The best place to find jQuery plugins !
Welcome on myjqueryplugins,
the best jquery plugins library !
Connect it with GitHub and create your plugin Homepage.
Make known your plugin to the community or link it to your own website !
The best place to find jQuery plugins !
Welcome on myjqueryplugins,
the best jquery plugins library !
Connect it with GitHub and create your plugin Homepage.
Make known your plugin to the community or link it to your own website !
Plugin submitted by alpixel
Had you ever wanted to add some custom scrollbars to your website, to scroll the contents and the default browser scrollbars just doesn't match up with your design ?
Make your own scrollbar design with jScrollbar !
jScrollbar is fully skinnable with CSS (you can use images instead) and can detect mousewheel event.
1 2 3 4 5 6 7 8 |
<!-- include CSS & JS files --> <!-- CSS file --> <link rel="stylesheet" type="text/css" href="jScrollbar.jquery.css" media="screen" /> <!-- jQuery files --> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery-ui.js"></script> <script type="text/javascript" src="jquery-mousewheel.js"></script> <script type="text/javascript" src="jScrollbar.jquery.js"></script> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!-- Main container --> <div class="jScrollbar"> <!-- Scrolling content container --> <div class="jScrollbar_mask"> <p> <!-- Your long content here --> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi... </p> </div> <!-- slider container --> <div class="jScrollbar_draggable"> <!-- slider --> <a href="#" class="draggable"></a> </div> <!-- don't forget to clear the floats --> <div class="clr"></div> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 |
<script type="text/javascript"> $(document).ready(function(){ // simple jScrollbar plugin call $('.jScrollbar').jScrollbar(); // more complex jScrollbar plugin call $('.jScrollbar').jScrollbar({ scrollStep : 25, position : 'left', showOnHover : true }); }); </script> |
Comments
Hello,
can you specify me how to disable or destroy an element after $("#myElement").jScrollbar() called??
Can i make $("#myElement").jScrollbar("destroy")???
Please
Hi grimbo,
I can't see what you want to do !
Why do you want to destroy an element after the scrollbar call ?
Can you fix your element with the CSS (el{display:none}) ?
Thanks
I believed it was likely to be several uninteresting old article, but it surely paid for my time. I will article a hyperlink for this web site on my own website. More than likely this site site visitors will discover in which very useful.
Warn
The plugin "jscrollbar" is with broken link in github.
Thanks..
Hello Im a Chinese. And I found it is not work when I use Ajax . Just no scrollbar appears, I am confused. %>_<%
I met this problem too, I figure it out with another trigger to make the scrollbar appear, just like
$('#something').mouseover(function(){$('.jScrollbar').jScrollbar();})hope it could help, btw, I am chinese too.
Hello, how can i set the scrollbar to the bottom automatically? But i don't know the length (i mean height) of content in div.
when the text is smaller than the size of the scrollbar is to position the head to the left, creating a bad visual effect
Hi, thanks for this, it was exactly what I needed. I'm having trouble with one thing, though: I want to set the height of the scrolling section to the height of the browser window and I can't figure out how. Setting the heights to 100% screws everything up.
The scrollbar only works when the zoom is set to 100% in Google Chrome. When I zoom out, I cannot scroll down. When I zoom in, I can scroll down, but then when I try scrolling back up, my content disappears. Does anyone know how to fix this problem?
Hi Tara,
It works for me when i zoom in/out.
Are you sure you don't have a javascript error ?
this plugin is not working on joomla 2.5 plz help me
Thank you for this plugin! It work´s fine, but...
I have problem with the tablet view. The scrollbar doesn´t work on my tablet (Android / Dolphin). It show´s me the scrollbar and the content but unfortunately without a functioning.
plz help me
Hi, iam newbie, i used the plugin it works fine, but i have problem.
/--link-intially it shows only 100letters
when click on expand to full content.
normally it displays full content before expand.
after expanding link it dispalys content with previous height
it happens only with expand/collapse link it woks fine when a lot of text is added.
please any suggestions ...........
I was just wondering if there is a way of setting an anchor link within the div with your scrollbar on. And obviously for the scroll bar to move when the anchor link is clicked.
Thanks!
Hi sam,
Actually, you can't do that. but it's a great idea for the next version !
Thanks
Thanks for the quick response!
Aww that is a shame, would have been perfect for a project I'm working on. Do you think you'll be releasing a new version any time soon? :)
Thank you once again, very handy plugin!
Unfortunately, the next release with this feature is not coming soon.. I have no time for that.. But if you know a little bit jQuery, you can try to add this for your project !
Regards,
Hi! I have aproblem with draggable stoping. when i scroll the bar to top or to bottom of the scrollable div, it is still possible to scroll bar and it is disapearing, not stoping. Please help to solve that...Thanks.
Hi.. I have Problem this plugin not working in joomla 2.5 . its not show scroll on mouse over and other event.
please tell me what's problem .
thanks
Add new comment