سوال: درباره اسکرول [بایگانی]

water_lily_2012

چهارشنبه 26 تیر 1392, 12:34 عصر

سلام
می خواهم وقتی از دکمه وسط موس برای اسکرول استفاده میکنم روی اسکرول افقی صفحه اثر بزاره نه عمودی.

و چطور می تونم شکل اسکرول را به صورت دلخواه دربیارم؟

و چطور می تونم با کلیک روی یک لینک اسکرول را به مکان دلخواه ببرم؟

تشکر

water_lily_2012

چهارشنبه 26 تیر 1392, 19:56 عصر

سلام
دو تا سوال اولم نیست

IamOverlord

پنج شنبه 27 تیر 1392, 00:50 صبح

سلام!
اولا که این جا رو ببین...: http://webdesignledger.com/tools/6-jquery-plugins-for-scrolling-effects
یه سری متد هم در jQuery برای مقوله ی scroll هست... اینا رو ببین:
scroll (http://api.jquery.com/scroll/)
scrollTop (http://api.jquery.com/scrollTop/)
scrollLeft (http://api.jquery.com/scrollLeft/)
برای animate کردن هم این مثال رو ببین:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js" charset="utf-8"></script>
<script>
$(function(){
$('#btn-clickme').click(function(){
$('body').animate({scrollTop:300}, '500', 'swing', function() {
alert("Finished animating!");
});
});
});
</script>
</head>

<body>
<input type="button" id="btn-clickme" value="Click Me!" />
<h1>Blah blah blah...!</h1>
<h1>Blah blah blah...!</h1>
<h1>Blah blah blah...!</h1>
<h1>Blah blah blah...!</h1>
<h1>Blah blah blah...!</h1>
<h1>Blah blah blah...!</h1>
<h1>Blah blah blah...!</h1>
<h1>Blah blah blah...!</h1>
<h1>Blah blah blah...!</h1>
<h1>Blah blah blah...!</h1>
<h1>Blah blah blah...!</h1>
<h1>Blah blah blah...!</h1>
<h1>Blah blah blah...!</h1>
<h1>Blah blah blah...!</h1>
<h1>Blah blah blah...!</h1>
<h1>Blah blah blah...!</h1>
<h1>Blah blah blah...!</h1>
<h1>Blah blah blah...!</h1>
<h1>Blah blah blah...!</h1>
<h1>Blah blah blah...!</h1>
<h1>Blah blah blah...!</h1>
<h1>Blah blah blah...!</h1>
<h1>Blah blah blah...!</h1>
<h1>Blah blah blah...!</h1>
</body>
</html>

و ظاهرا تغییر شکل scrollbar جزو استاندارد های تعریف شده ی خود CSS نیست و ایده ی مایکروسافتی ها بوده ولی فکر کنم الان تقریبا همه ی مرورگرها ازش پشتیبانی می کنن...
برای مرورگرهایی با موتور Webkit مثلا Safari - Chrome - Torch - ... این جا رو ببین: http://css-tricks.com/custom-scrollbars-in-webkit (http://css-tricks.com/custom-scrollbars-in-webkit/)
این پلاگین رو هم ببین: http://jscrollpane.kelvinluck.com (http://jscrollpane.kelvinluck.com/)
موفق باشی!

jalil_gh

پنج شنبه 27 تیر 1392, 14:32 عصر

می خواهم وقتی از دکمه وسط موس برای اسکرول استفاده میکنم روی اسکرول افقی صفحه اثر بزاره نه عمودی.
برای این کار شما میتونید از پلاگین jquery-mousewheel (https://github.com/brandonaaron/jquery-mousewheel) استفاده کنید. این پلاگین رویداد mousewheel رو برای مرورگرهای مختلف نرمال‌سازی میکنه.
حالا کد زیر رو به برنامه‌تون اضافه کنید.
$(window).mousewheel(function (event, delta) {
var left = $(this).scrollLeft();
window.scrollTo(left - (delta * 50), 0);
event.preventDefault();
});

water_lily_2012

جمعه 28 تیر 1392, 19:15 عصر

سلام
هنوز وقت نکردم این روشی که نوشتید را امتحان کنم. و یه سوال پیش اومد که اول باید این را بپرسم.
من دارم صفحه ای طراحی می کنم که شبیه استارت ویندوز 8 هست و width صفحه حدود 2000 پیکسل میشه و ارتفاع صفحه 768.پس عرض همیشه اسکرول داره و ارتفاع معمولا نداره.
حالا امروز دو تا از دوستام گفتند که اصلا کارت اشتباهه و استاندارد وب نیست چون صفحه نباید به صورت افقی اسکرول بشه و باید عرض صفحه 1024 باشه
حالا می خواستم بدونم درست گفتند یا نه؟
تشکر

IamOverlord

جمعه 28 تیر 1392, 19:47 عصر

من که این طور فکر نمی کنم!
این همه قالب حرفه ای که این کارارو می کنن پس چیه؟!

water_lily_2012

جمعه 28 تیر 1392, 20:57 عصر

سلام
بحث نوشتن و زیبا بودن نیست. اینی که من نوشتم هم زیباست. اصل این کار را اشتباه دونستند و گفتند معمولا هیچ وبی اینطور نیست و نباید معمولا اسکرول افقی باشه و باید فقط عمودی باشه

شما مطمئن هستید که از نظر اصول وب نویسی این کار اشتباه نیست؟ اخه این دو تا دوستم که باهم اوفتادند به جونم و تکی نتونستم حرفی بزنم. گفتم مطمئن بشم.
اگر هم لطف کنید ادرس دو سه تا از این قالب های حرفه ای اینچنینی را بنویسید.
کد jalil_gh را اجرا کردم و جالب بود.
تشکر

jalil_gh

جمعه 28 تیر 1392, 22:30 عصر

اول یه نگاهی به اینجا (http://webdesignledger.com/inspiration/40-of-the-best-horizontal-scrolling-websites) بندازید.
دوم اینکه اگر هم همچین چیزی وجود نداشته چرا نمی‌خواهید اولین نفری باشید که این کار رو می‌کنید؟ اینجور مواقع فرق یک پیشرو با دنباله‌رو معلوم میشه.
به قول استیو جابز:
Your time is limited, so don't waste it living someone else's life. Don't be trapped by dogma - which is living with the results of other people's thinking. Don't let the noise of others' opinions drown out your own inner voice. And most important, have the courage to follow your heart and intuition.

water_lily_2012

شنبه 29 تیر 1392, 10:43 صبح

تشکر
سایت جالبی بود. حالا خیالم راحت شد.
با همین روشی که معرفی کردید برای اسکرول، چطور میشه وقتی روی یک دکمه در سایت کلیک کردم اسکرول بره به یه موقعیت دیگر. فقط می خواهم روان باشه نه اینکه پرش کنه.
تشکر

jalil_gh

شنبه 29 تیر 1392, 11:16 صبح

میتونید از پلاگین jquery.scrollTo (https://github.com/flesler/jquery.scrollTo)استفاده کنید. داخل فایل دانلودی قسمت demo رو ببینید.

water_lily_2012

یک شنبه 30 تیر 1392, 12:19 عصر

سلام

سه تا فایل در فایل دانلودی بود یکی min.js یکی دیگه فقط js و یکی json چه تفاوتی بین اینها هست؟
من این پلاگین را به برنامه اضافه کردم.

<script type="text/javascript" src="js/jquery.scrollTo.min.js"></script>

حالا اگر یه منو به این صورت داشته باشم و بخواهم با کلیک روی اولین گزینه اسکرول به نقطه دیگر برود باید چه دستوری بنویسم.

<ul id="nav">
<li class="it-01 in slide"><a rel="page-about" href="#about">مطالب</a> </li>
<li class="it-02 in"><a rel="page-resume" href="#resume">سایت</a> </li>
<li class="it-03 in"><a rel="page-work" href="#work">کاربران</a> </li>
<li class="it-04 in"><a rel="page-social" href="#social">وبلاگ</a> </li>
<li class="it-05 in"><a rel="page-contact" href="#contact">خروج</a> </li>
</ul>
این را نوشتم ولی کار نمی ده

$('.slide').click(function(){window.scrollTo(800, 0 )});

تشکر

jalil_gh

یک شنبه 30 تیر 1392, 13:31 عصر

آرگومان‌هایی که این پلاگین دریافت میکنه به این صورته
function( target, duration, settings )
target هدف شماست،‌ معلوم میکنه که به کجا میخوایید اسکرول بشید.
duration زمانیه که این اسکرول طول میکشه.
تو settins هم یه سری تنظیمات میتونید انجام بدید. به دمو دقیقتر نگاه کنید.
شما کدتونو به این صورت بنویسید:
$('.slide').click(function(e){
//e.preventDefault();
$(window).scrollTo({top:0,left:800}, 3000);
});

water_lily_2012

یک شنبه 30 تیر 1392, 17:36 عصر

سلام
باز کار نداد. فکر کنم یه جایی مشکل داره
این خود سایت

خواهشا روی همین پروژه انجام دهید. مثلا با کلیک روی هر کدام از منوهای بالا اسکرول بشه به یه قسمت دیگر.
http://s4.picofile.com/file/7856190000/CMS.rar.html

تشکر

water_lily_2012

دوشنبه 31 تیر 1392, 21:29 عصر

سلام
کسی نیست نگاهی به این بندازه و مشکلم را حل کند.

water_lily_2012

سه شنبه 01 مرداد 1392, 10:26 صبح

سلام
فایل را در انجمن آپلود کردم

jalil_gh

سه شنبه 01 مرداد 1392, 11:42 صبح

اول شما کد مربوط به کلیک کردن روی منو رو داخل document.ready بزارید. چون شما اونو تو اول صفحه قرار دادید و اون موقع عناصر منو وجود خارجی نداره.
دوم اینکه نمیدونم شما داخل custom.js چکار کردید؟؟ این با کد مربوط به کلیک روی منو تداخل پیدا میکنه چون اگه شما تو کنسول بنویسید
$(window).scrollTo({top:0, left:100}, 3000);
کار میکنه ولی اگه همین کد را بزارید داخل رویداد کلیک منو کار نمیکنه.
فکر کنم شما هم از نمونه کدهای جناب tamafi6 استفاده میکنید و هم از کدهای jquery.scrollTo

water_lily_2012

سه شنبه 01 مرداد 1392, 15:42 عصر

سلام
بهرحال حل شد.
با جابجا کردن فراخوانی ها همه درست شد.روی هم تاثیر می گذاشتند.

tamafi6

پنج شنبه 03 مرداد 1392, 00:47 صبح

یک نمونه اینجاقراردادم میتونیدببینید

http://css3.host22.com/