 أضافة النسبة المئوية في شريط التمرير - هذه الاضافه طلبت من كثيرا هنا لذابك سوف اقدمها لكم كما يعلم اكثركم ان هذه الاضافه بقالب فكرة مين الرائع اظن ان اغلبكم شاهدها على مدونات اخرى .هي اضافه جميله وخفيه تعطي جماليه في مدونتك على الشريط الجانبي وهي مفيدة لزوار مدونتك اذ يتمكن الزائر من معرفه نهاية وطول محتوى الصفحه لانها عندما يمرر لاسفل الصفحه ينتهى العد الى 100% وعندما يصعد الى الاعلى يعد عد تنازلي من 100 الى 0% . |
- داخل القالب تحرير
html - فوق هذا الوسم
<b:skin/> نضع الكود التالي :
#scroll { display:none; position:fixed; top:0; right:15px; z-index:500; padding:3px 8px; background-color:#32C2A5; color:#fff; border-radius:3px; font-size:14px; } #scroll:after { content: " "; position: absolute; top:50%; right:-10px; height:0; width:0; margin-top:-6px; border:6px solid transparent; border-left-color:#369fcf; }
- بعد دلك اضف الكود التالي فوق هدا الوسم
<body/>
<script type='text/javascript'> //<![CDATA[ var scrollTimer = null; $(window).scroll(function() { var viewportHeight = $(this).height(), scrollbarHeight = viewportHeight / $(document).height() * viewportHeight, progress = $(this).scrollTop() / ($(document).height() - viewportHeight), distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2; $('#scroll') .css('top', distance) .text(' (' + Math.round(progress * 100) + '%)') .fadeIn(600); if (scrollTimer !== null) { clearTimeout(scrollTimer); } scrollTimer = setTimeout(function() { $('#scroll').fadeOut(600); }, 1000); }); //]]> </script>
- بعد دلك اضف الكود التالي أسفل هدا الوسم
<body>
<div id='scroll'></div>
أضافة النسبة المئوية في شريط التمرير - هذه الاضافه طلبت من كثيرا هنا لذابك سوف اقدمها لكم كما يعلم اكثركم ان هذه الاضافه بقالب فكرة مين الرائع اظن ان اغلبكم شاهدها على مدونات اخرى .هي اضافه جميله وخفيه تعطي جماليه في مدونتك على الشريط الجانبي وهي مفيدة لزوار مدونتك اذ يتمكن الزائر من معرفه نهاية وطول محتوى الصفحه لانها عندما يمرر لاسفل الصفحه ينتهى العد الى 100% وعندما يصعد الى الاعلى يعد عد تنازلي من 100 الى 0% . |
- داخل القالب تحرير
html - فوق هذا الوسم
<b:skin/> نضع الكود التالي :
#scroll { display:none; position:fixed; top:0; right:15px; z-index:500; padding:3px 8px; background-color:#32C2A5; color:#fff; border-radius:3px; font-size:14px; } #scroll:after { content: " "; position: absolute; top:50%; right:-10px; height:0; width:0; margin-top:-6px; border:6px solid transparent; border-left-color:#369fcf; }
- بعد دلك اضف الكود التالي فوق هدا الوسم
<body/>
<script type='text/javascript'> //<![CDATA[ var scrollTimer = null; $(window).scroll(function() { var viewportHeight = $(this).height(), scrollbarHeight = viewportHeight / $(document).height() * viewportHeight, progress = $(this).scrollTop() / ($(document).height() - viewportHeight), distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2; $('#scroll') .css('top', distance) .text(' (' + Math.round(progress * 100) + '%)') .fadeIn(600); if (scrollTimer !== null) { clearTimeout(scrollTimer); } scrollTimer = setTimeout(function() { $('#scroll').fadeOut(600); }, 1000); }); //]]> </script>
- بعد دلك اضف الكود التالي أسفل هدا الوسم
<body>
<div id='scroll'></div>
