Facebook style Scroll bar using Jquery | 2my4edge

29 June 2013

Facebook style Scroll bar using Jquery

Most of them eager to know about facebook and it’s functionality, so here we just know about facebook style scroll bar, how the scroll bar is seems in the facebook, the black color scroll bar and it presence when we hover the part where the scroll is presence, similar like the same style the scroll is ready by using Jquery, let see it.
Facebook style scrool bar
DOWNLOAD             LIVE DEMO

Mostly we can see this kind of scroll bar in facebook chat box, recent activity feeds and notifications side, that has automatically hide the field when we come away from there. And mostly we discussed about facebook style textarea, facebook style tooltip and invite facebook friends.

CODE

<div class="box" id="box">
   
   <ul class="ulclass"> 
                <h2 align="center">Titles</h2>
   
   <a href="http://www.2my4edge.com/2013/06/facebook-style-textarea-auto-grow-using.html" target="_blank"> 
   <li class="liclass">  Facebook style textarea </li>   
   </a>
   
   <a href="http://www.2my4edge.com/2013/06/print-or-save-web-page-as-pdf-using.html" target="_blank"> 
   <li class="liclass">  Print or save the page as .PDF    </li> 
   </a>
   
   <a href="http://www.2my4edge.com/2013/06/htaccess-uses-and-redirect-www-to-non.html" target="_blank"> 
   <li class="liclass">  .HTACCESS www to non-www and non-www to www </li>
   </a>   
   
   
   <a href="http://www.2my4edge.com/2013/06/choose-state-and-city-based-on-country.html" target="_blank">  
   <li class="liclass"> Choose state based on country    </li> 
   </a>
    
   <a href="http://www.2my4edge.com/2013/06/change-colored-image-into-black-and.html" target="_blank"> 
   <li class="liclass">Chage color to black and white image usinf css </li> 
   </a>   
   
   
   </ul>

   </div>

and here we are going apply this scroll bar only to the id #box div, so make script for this, and the script is

SCRIPT

<script src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript"> 
    $(document).ready(function () {
    $("#box").niceScroll({ autohidemode: true })
    });
</script>

Like the above script we just have to call the id, #box, and the niceScroll({ autohidemode:ture })
Else we can make it as false of autohidemode, Jquery plugin is needed, and nicescroll.js is also needed for this function.

CSS

#box2000 > div{ 
-webkit-transition: width 0.2s ease; 
-moz-transition: width 0.2s ease; 
-o-transition: width 0.2s ease; 
-ms-transition: width 0.2s ease;    
transition: width 0.2s ease; 
}
#box2000 > div:hover{
width:150%!important; 
cursor:pointer;
}

We know about this ease that is using in css3 for make delay of operation, and the 2000 is global variable declaration. On hover the width is important so we have increase that more than 100%.
And that’s it, enjoy with the demo.



RELATED POSTS:








6 comments:

  1. nice post sir!

    by,
    s.shivasurya,
    www.i-visionblog.com

    ReplyDelete
  2. How do I change the color of the scrollbar?

    ReplyDelete
  3. You have error, when did you type niceScroll({ autohidemode:ture }). It is not 'ture' but 'true'. :)

    ReplyDelete
  4. Very helpful post sir....

    ReplyDelete
  5. Excellent post. Thanks so much.

    ReplyDelete
  6. Thanks so much! E X C E L L E N T !!

    ReplyDelete

^