728x90 AdSpace

.

Latest News

samedi 11 octobre 2014

Installing Percentage In Scrollbar


Installing Percentage In Scrollbar 

Next post on how to install the function on the percentage of the scrollbar blog. Maybe you've seen this percentage function in another blog. 

Actually, the percentage of the scrollbar is not a feature that is important for a blog. But it never hurts to try, and even then depending on individual taste. 

By adding this percentage is not just a mere decoration blog but visitors will be able to see what percentage of the page that he has a scroll, if it has reached the bottom of the page then the percentage would be 100%.



The way the application is quite easy, just follow the simple steps below: 


First, save the code below just above ]]></b:skin> Or </style>
CSS

#scroll {
  display:none;
  position:fixed;
  top:0;
  right:15px;
  z-index:500;
  padding:3px 8px;
  background-color:#369fcf;
  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;
}
 Next, save the caller code below </head>
HTML
<div id='scroll'></div>
Save the following code just above the </ body>
JQUERY
<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>
 Then save the template and see the results. 



If the steps you are doing is not wrong, then your blog should already exist in the percentages next to the scrollbar. 

Easy enough. Good luck.
Installing Percentage In Scrollbar
  • Blogger Comments
  • Facebook Comments

0 commentaires:

Enregistrer un commentaire

Top