Custom scrollbar plugin utilizing jquery UI that’s fully customizable with CSS. It features vertical/horizontal scrolling, mouse-wheel support (via Brandon Aaron jquery mouse-wheel plugin), scroll easing and adjustable scrollbar height/width.
Changelog
14/12/2011
Updated demo and download archive with the updated mousewheel plugin (version 3.0.6), in order for mousewheel to work with jquery 1.7.
13/04/2011
Fixed a bug regarding pressing-dragging-releasing scroll buttons.
23/02/2011
Automatically setting content width for horizontal scrollers is no longer calculated via javascript. Instead of using jQuery .each() or for statements, the width is now set by adding an additional div (.horWrapper) that wraps content and by setting the display of .container div to inline, thus expanding its width automatically (check the updated css file for details).
How to use it
In order to implement the plugin, you first need to insert inside the head tag of your document the jquery.min.js and jquery-ui.min.js (both loaded from Google), the jquery.easing.1.3.js (the plugin that handles animation easing), jquery.mousewheel.min.js (to support mouse-wheel functionality) and the jquery.mCustomScrollbar.css which is the file where you can style your content and scrollbars.
<link href="jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script> <script src="jquery.easing.1.3.js" type="text/javascript"></script> <script src="jquery.mousewheel.min.js" type="text/javascript"></script>
Next you’ll need to insert the markup of the content blocks you want to have custom scrollbars inside the body tag. The structure of the markup is exactly the same for every content block except the first div which should have a unique id (in this example: mcs_container).
<p>Your long content goes here...</p>
Keep the markup structure exactly as shown above, placing your content inside the div that has the class name content. In order to have multiple content blocks with custom scrollbars on a single document, you use the exact same markup with a unique id for each block (e.g. mcs_container, mcs2_container, mcs3_container etc.).
The markup for horizontal scrollers needs an additional div with class name horWrapper that wraps the .container div. This is necessary in order to set the total width of contents automatically, without the need to insert it by hand in css or make complicated calculations with javascript.
<p>Your long content goes here...</p>
To add the additional scrollbar buttons, you need to insert two additional anchor tags inside mcs_container div, with class names scrollUpBtn and scrollDownBtn:
<p>Your long content goes here...</p><div class="dragger"></div></div> </div> <!-- scroll buttons --> <a class="scrollUpBtn" href="#"></a> <a class="scrollDownBtn" href="#"></a>An extra feature suggested and provided by isHristov is to add a few lines of CSS right after your content markup, in order to help users that have javascript disabled scroll the content:
<noscript> <style type="text/css"> #mcs_container .customScrollBox{overflow:auto;} #mcs_container .dragger_container{display:none;} </style> </noscript>The final step is to include the actual custom scrollbar plugin (jquery.mCustomScrollbar.js) and the function that calls and configures the scrollbar(s) at the end of your document, just before the closing body tag.
<script> $(window).load(function() { $("#mcs_container").mCustomScrollbar("vertical",400,"easeOutCirc",1.05,"auto","yes","yes",10); }); </script> <script src="jquery.mCustomScrollbar.js" type="text/javascript"></script>You can configure each content block scrollbar by setting the parameters of the function call:
- The scroll type (“vertical” or “horizontal”)
- The scroll easing amount (e.g. 400 for normal easing, 0 for no easing etc.)
- The scroll easing type
- The extra bottom scrolling space (applies to vertical scroll type only)
- Set the scrollbar height/width adjustment (“auto” for adjustable scrollbar height/width analogous to content length or “fixed” for fixed dimensions)
- Set mouse-wheel support (“yes” or “no”)
- Scrolling via buttons support (“yes” or “no”)
- Buttons scrolling speed (an integer between 1 and 20, with 1 indicating the slowest scroll speed)
Multiple scrollers
To set multiple content blocks with custom scrollbars on a single page, give them a unique id (keeping the exact markup) and add a function call for each one. For example:
<script> $(window).load(function() { $("#mcs_container").mCustomScrollbar("vertical",400,"easeOutCirc",1.05,"auto","yes","yes",10); $("#mcs2_container").mCustomScrollbar("vertical",0,"easeOutCirc",1.05,"fixed","yes","no",0); $("#mcs3_container").mCustomScrollbar("vertical",900,"easeOutCirc",1.25,"auto","no","no",0); }); </script>You can style each scroller separately in jquery.mCustomScrollbar.css, since styles are assigned only to the element with the original id (see the .css file inside the jquery_custom_scroller.zip).
Scrolling long content
There’s a bug in jquery.min.js that resets to 0, an animate value greater than 9999 pixels. This bug will affect the scrollbar if content width or height is equal or greater than 10000 pixels, resulting a scrolling jerk. This annoying bug is going to be fixed on a future release of the library. Until then, we need to come up with a temporary solution and since editing jquery.min.js is not the best of practices, we’ll overwrite the jquery function containing the buggy code
Insert the following code below the window load function:<script> /* function to fix the -10000 pixel limit of jquery.animate */ $.fx.prototype.cur = function(){ if ( this.elem[this.prop] != null && (!this.elem.style || this.elem.style[this.prop] == null) ) { return this.elem[ this.prop ]; } var r = parseFloat( jQuery.css( this.elem, this.prop ) ); return typeof r == 'undefined' ? 0 : r; } </script>Dynamically loaded content
To load new content dynamically inside scroller(s) (via .load(), ajax requests etc.), you need to call (or re-call) mCustomScrollbar function after new content is loaded. For example:
$("#mcs_container .content").load("new.html", function(){ $("#mcs_container").mCustomScrollbar("vertical",400,"easeOutCirc",1.05,"auto","yes","yes",10); });When you have multiple content scrollers on a single page that load new content dynamically, it’s better to create another function that calls all scrollers and call it on window.load as well as each time new content is loaded. The demo includes this functionality, so you can check and grab the code.
Hiding content scrollers
If you want to have the scroller initially hidden, you need to hide it after calling the mCustomScrollbar function. This is important, in order for the script to calculate content width or height correctly.
Mousewheel scrolling with Safari on mac OS
Mousewheel scrolling with Safari browser on OSX might be extremely fast thus a bit unusable (blame the vendor!). I have uploaded a modified jquery.mCustomScrollbar.js at http://manos.malihu.gr/tuts/jquery_custom_scroller_js_osxsafari.zip that checks for mac OS and Safari browser to lower mousewheel delta. I haven’t implement the modification in the original plugin cause I don’t really fancy coding for specific operating systems or browsers.
Mobile browsers and touch support
Simon Dau extended the plugin with touch support for mobile browsers and touch-screen devices on Kartogram blog. Big thanks to Simon!
If you need assistance with the script, please make sure you read the comments section (at the moment there are over 500 comments), as many users have answered questions and posted helpful bits of code
Feel free to use the plugin wherever and however you like. Enjoy
This entry was posted in jQuery/Javascript and tagged content scroller, custom scrollbar, javascript, jquery. Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.
727 Comments
This is very nice, I think I will use it on a commercial project if I am allowed to
You are allowed to use it anywhere/anyhow you like. If you eventually use it on a project of yours it would be cool to let me know
cheers
Hi, nice plugin. But is it possible to use a div with a scrollbar (let’s say horizontal) inside a div with a vertical scrollbar?
I don’t mean two scrollbars for the same content, but for two different contents.
Something like this http://img692.imageshack.us/img692/7899/screenshot001mh.png
Thanks
@reese
It’s not possible as it is (out-of-the-box). It should be possible but honestly I can’t tell how much work it needs to be done in order to do it. Unfortunately, at the moment I work on so many things, I can’t tell when I’ll be able to try it.
Hi,
It’s a great plugin. I have adapted it into a Confluence extension. Check it out at Akeles Space Lister Extension.
Thank you
Hi there,
Very good plugin! Compliments!
If you don’t object, I’d like to use it in my new site.
One question though…
I use a later jquery version and it appears that the scroll only works in Firefox…
In all other browsers, the scrollbar moves alright, but the content doesn’t…
When I use your link to the Google api jquery 1.4.4 it works fine.
Any idea why this is?
Thanks!
Ward
Hey, great job!!! I’m using thin on a new project. After I done with the job I’ll show you the result and give the apropriated credit for you and your website in the html and css code line.
Loved it. Was wondering if I can use it in an iframe ?
i followed all the directions, scroll bar looks good, but wont scroll. I am using inside an iframe on Facebook.
Your long content goes here…
Your long content goes here…
Your long content goes here…
Your long content goes here…
Your long content goes here…
Your long content goes here…
Your long content goes here…
Your long content goes here…
Your long content goes here…
Your long content goes here…
Your long content goes here…
Your long content goes here…
Your long content goes here…
Your long content goes here…
Your long content goes here…
Your long content goes here…
Your long content goes here…
Your long content goes here…
Your long content goes here…
Your long content goes here…
Your long content goes here…
Your long content goes here…
Your long content goes here…
Your long content goes here…
Your long content goes here…
Your long content goes here…
Your long content goes here…
Your long content goes here…
Your long content goes here…
Your long content goes here…
Your long content goes here…
Your long content goes here…
Your long content goes here…
Your long content goes here…
Your long content goes here…
Your long content goes here…
Your long content goes here…
Your long content goes here…
Your long content goes here…
testing
testing
testing
testing
testing
testing
testing
testing
testing
$(window).load(function() {
$(“#mcs2_container”).mCustomScrollbar(“vertical”,400,”easeOutCirc”,1.05,”auto”,”yes”,”yes”,10);
});
<script src="we2tng/js/scroll/jquery.mCustomScrollbar.js” type=”text/javascript”>
Great script! I used it on Nutffles.com
Hi, I loved your plugin, but I found a small problem. It does not work on iphone/ipad!
Is there any solution?
thanks and congrats for the wonderful work!
I am trying to use this plugin inside a CMS (http://get-simple.info) to scroll the content dynamically inserted by the CMS. The plugin fails. The entire content moves together out of the view and goes in the opposite direction. If I remove the dynamic content code and insert normal text, the plugin behaves correctly, meaning that my files, paths and everything else is put together correctly.
How do I make it work with this CMS?
LOOOOOVE the easing animation on the mouse wheel. Very very useful!!
Been looking for something like this for ages, amazing.
Cool, just started a new project today and this little beauty here will come in very very handy
You will get a link from me soon !
Really nice and very useful content. Great work buddy, keep it up
Thank you so much for this component, i really enjoy it!
i’m searching this days for something like that, and i have found just it here
Just one question: the mouse scrolling doesn’t work, is there some problems with css absolute position, or other css trouble that make it unwork?
thank you again
Hello,
It should work fine with position:absolute tho I’d have to see the actual code to see if there are any problems.
It was a little issue with other script, it was my error! thank s a lot, it is a wonderful scroll!
it is my demo project, the contents and some pages are not optimized:
http://demo.puntidivistastudio.it/museum2/curriculum/
Looks very nice indeed! Any plans to make a plugin out of this code? Also the scrollTo method would be really useful, as well as horizontal scroller, min bar height etc. (take look at jScrollPane). In fact I believe that with this component as a plugin you and your site could become famous
. Please do not forget the license, because people get confused as you can see in the above comments… PS: all your other examples are great too!
Hi Vadim, thanks for your comments
Unfortunately I don’t have much time to make a plugin at the moment but I hope I’ll find some time in the future. I was thinking about horizontal scrolling too so I might give a go
The reason for not using scrollTo is because I wanted to use some easing with the scrolling, so I went with animate. I also feel a bit more familiar with animate cause I develop a lot with actionscript.
What I meant by scrollTo was the ability to scroll to a certain selector (inside the container) with some method provided by your potential plugin. So animate() can be used for it too…
I see. I might give it a go if I make a plugin out of it. Thanks for the suggestion
Hi,
This is a neat demo, however it’s basically unusable on my Mac thanks to the inertial scrolling already built into OS X. Scrolling using either the built-in trackpad or the Magic mouse causes the content to scroll instantly to the top or bottom at the slightest touch.
Thanks for the input Dave
Unfortunately I didn’t checked this script on a mac. I’ll check it and see if there’s anything I can do to fix it.
i can diagnose your problem. its that your using a mac…
HAH HAH HAH HAH GOOD ONE
hang yourself.
Hello again!
Inside jquery.mCustomScrollbar.js find the line var vel = Math.abs(delta*10); and change 10 to a lower number (e.g. 1).
That should help.
Man, your ideas come from a different dimension… Great post, well done!
Hi, man! Your work is pretty amazing and I trully appreciate it!
I was thinking in implementing this script in one of my projects so I wanted to see if it’s okay with you.
However, while testing, I saw that the scrollbox dies in case Javascript is disabled so I’ve made a few changes to make it degrade in case of this scenario.
You can update yours if you like.
The CSS:
Change:
"#customScrollBox{position:relative; height:600px; overflow:hidden;}"
to
"#customScrollBox{position:relative; height:600px; overflow:auto;}"
//tp make sure the default look will be with scroll if necessary
Add "display: none;" to
#dragger_container{position:relative; width:0px; height:580px; float:left; margin:10px 0 0 10px; border-left:1px solid #000; border-right:1px solid #555;}
//to make sure the dragger_container is not shown by default.
The JS code:
After
if($customScrollBox_container.height()>visibleHeight){
(line 11), add the following:
$customScrollBox.css("overflow", "hidden"); $dragger_container.css("display", "block");
//in case Javascript is enabled this script is executed, default scrollbar is hidden and custom dragger_container is displayed.
P.S. Your blog is awesome! I lost electricity while writing this and when I came back later the comment I was writing was still here! Genius! LocalStorage I guess?
Amazing mate, thanks a lot
I’ll update the post as soon as possible!
Edit: done.
I’ve just started using this plugin (it’s awesome!) however, I’m finding that sometimes it doesn’t scroll to the bottom of the content. It may scroll 80% down then the scroller reaches the end, however the bottom of the content is not visible.
Any ideas what could possibly be causing this? Thank you!
Perfect! Thanks a lot!!!
Excellent, but how to fix bug when using customized colors and clicking dragger, it changes back to default colors?
Find functions DraggerOver() and DraggerOut() inside script and change their color values for foreground, background, borders etc.
I am looking for same like scroller, unfortunately i found this one.
Thanks Dear.
uh.. what?
I love It!!!! too cool!!!! thks
Hello again.
I wasn’t very happy (at all) with my previous solution to the javascript-disabled problem so I come up with a new one. The problem with the previous fix was that in case javascript is enabled then for a few ms you would see the ugly default scroller and then the new scroller would be loaded. We definitely don’t want that.
The new solution basically is to return to your original code (display the nice scroller by default) and add just a tiny fix ONLY in case javascript is disabled with noscript tag. Step by step:
Change:
"#customScrollBox{position:relative; height:600px; overflow:auto;}"
to
"#customScrollBox{position:relative; height:600px; overflow:hidden;}"
//return to your original code
Remove
"display: none;"
from
#dragger_container{position:relative; width:0px; height:580px; float:left; margin:10px 0 0 10px; border-left:1px solid #000; border-right:1px solid #555; "display: none;}
//same here
Remove the following lines from the JS code:
$customScrollBox.css("overflow", "hidden");
$dragger_container.css("display", "block");
//same here
So now we have your original code before my fist suggestion. The only thing we must add is:
#customScrollBox { overflow:auto; }
#dragger_container { display:none; }
//this should go right after your markup (after you close all those divs for the scroller). This code adds the two properties to #customScrollBox and #dragger_container to display the standart and ugly scroller in case of disabled javascript
I think this solution is better.
Ooops, that’s bad. The code that must be added didn’t pass the validation.
New try. The code should be:
(remove hyphen)
#customScrollBox { overflow:auto; }
#dragger_container { display:none; }
(remove hyphen)
Okay, you can see the code here. It’s in txt file.
You can update my first post from today and delete the other crap (including this one).
Thanks a lot! Will do
Edit: Done! Code, post, demo and download files are updated. Thanks a lot for your input isHristov.
You are welcome!
I can show you the project where I implemented this one (and one more of your scripts) in a few weeks if you are interested.
Of course I am
Its a cool scroll bar.
I am having a little trouble with it displaying on firefox.
IE, Chrome is fine.
FF 2.6 has a huge gap down below.
Check out http://www.khaosok-accommodation.com/activities.html for an example.
How can I fix this?
It seems to put the height of the whole text on .container, I have tried adding height to it which fixes the height problem but then the scroll bar goes missing.
Thanks
Hello Don,
I normally do not check the scripts on old browsers (such as firefox 2, ie6 etc.) as they have varius implementation bugs and issues with css and javascript.
oops,
I meant 3.6, does not matter too much anyway if there is not fix for it
IS it posible to use the Script externaly, insted fo placing the script at the bottom of the page?
is yes. How ?
Yes of course. Make a new .js file and copy the script content inside it. Give it a filename (e.g. jquery.customscrollbar.js) and then load it in your document (before the closing body tag) like any other javascript files.
Hey, thanks! Really helpful!
Used it at: http://www.mariatheodoradimaki.com
super
Love it.
But could you please help? I don’t know where to start if I wanna modify this to horizontal bar.
Hi,
I’m currently creating a plugin out of this script, so if you can wait a couple of days, you’ll be able to implement vertical as well as horizontal scrollbars easily
Edit: done
That is awesome!
Hello again Toz,
Just finished the plugin. Please re-download the files and check the post for information on how to implement the plugin.
This is truly awesome. Thank you very much for letting me know.
I’m using the vertical scroll bar with the buttons.
I love it but I’m trying to set a fixed scroll movement for the buttons.
Lets say that I want to scroll with each click, 50px down. Can this be done? How?
Thank you!
heres one more like it
http://konrness.com/javascript/google-wave-style-scroll-bar-jquery-plugin/
would this also work to change the browser’s scrollbar?
like in this website.
Not really. It could only work if you place your entire content inside div.content and set the body, mcs_container etc. display to “fixed” and width to “100%” in your stylesheet.
figured :/
any idea how this was made?
i tried looking at the source but found nothing.
and tried google, that’s how i came across this.
thanks
OMG..!!
This is the thing I was waiting for…!!
That’s really amazing… Thank you very much for this.
Just one thing, All the JS required for this became very heavy in size(293 kbs) including the CSS.
I there any way to make this less in size…
Please reply.
Again thank you very much for this…….!!
Hello Ashish,
Thank you for your comments
The plugin (jquery.mCustomScrollbar.js) is about 8kb in size (un-minified). The rest of the files (except jquery itself) needed to implement it are:
The CSS (jquery.mCustomScrollbar.css). The one I created for the demo is little over 7kb and consists 5 scrollbars.
The jquery.easing.1.3.js, which is also 7kb.
And the jquery.mousewheel.min.js (about 1kb).
That’s an additional 23-25kb plus the jquery itself (which is better loaded from Google, so it’s always cached). Everything else depends on the markup and images (if any).
True but not true if you search a bit. On the Jquery Ui’s site you can create a custom version of the file with only what you need.
I just needed the minimum for the scroll in itself which is: Core, Widget, Mouse and Draggable. This gave me a 28kb file.
I even went further with a javascript compression algorithm and got a 26kb file.
Nice article.. realy great stuffs..
Looks great. I think it could be a little better if the click target for hitting a specific point on the scrollbar (anywhere not on the drag anchor) was wider than 1px. Seems awfully hard to hit.
Hi Zach,
Yes 1-2px is indeed hard to hit… With some padding or transparent images as background it’s easily fixed. Thanks for your comment
Excellent jquery for website. thanks for code support.
Nice jquery content sliders. Its nice that you can style it to match the color theme. Will be using these.
Really great lessons on your site:) Thanks a lot mate.
Surdo
I love this plugin. It’s perfect for both mobile and desktop applications.
Wouldn’t it be better to pass parameters as an object?
$("element").mCustomScrollbar({
scrollType : 'vertical',
easingAmount : 400,
easingType : 'easeOutCirc',
bottomSpace : 1.05 ,
heightWidthAdjustment : 'auto',
enableMouseWheel : true
});
Well, generally yes. Passing parameters as objects is the more error-proof method (not much difference other than that). The only reason I didn’t used it, is because it would clutter the code, especially when you call many scrollers. Thanks for pointing it
This should work perfectly with what I’m creating. Thanks, it all works great!
Pardon me as I’m a jQuery newbie, but is there a way to make the content scroll automatically along with the scrollbar similar to the “Most Popular on HuffPost” section on http://www.huffingtonpost.com?
An automatic content scroll can be done by animating the dragger with a simple function on page load.
The huffingtonpost.com “most popular” content is a bit different as it probably loads new content dynamically via ajax and then re-runs the scrollbar function. The same can be done with this scroller.
What exactly you need?
I don’t need dynamic content to load like Huffington Post, but a similar type of functionality where it scrolls automatically every few seconds but the user can also use a scrollbar to go through as well. Your code has a nice scrollbar design and fuctionality, I’m just wondering if we can easily make it scroll through the list automatically at regular timed intervals.
Hi,
I’ve used your scroller before and it’s really lovely, but now I’d like it to start scrolling automatically when the page loads. Your reply to Bes seems as close as the discussion gets to this, but unfortunately I don’t know enough jquery to know what you really mean by “animating the dragger with a simple function on page load. ”
Just for us non-scripters, how do you do that? I have no idea even where to begin with that? I would be soooo grateful if you or someone who understands this better could spell it out for us ignorants
fantastic scroller!
i’ve just set it up with a row of thumbnails, whose horizontal overflow: auto solution was an eyesore against the dark red design (especially the bright blue mac scroller, which i usually love!). i’m wondering though- is there any way to set the .container width to auto-detect its content (rather than set a width in the styles)? when my client adds or removes an image from the set, the total width of the thumbnails will change…
for instance, your thumbnail scroller doesn’t require the width of the container to be defined…
actually, the more i look at it, the more i think that might be a better solution for my design!
Unusable on Mac with a two-finger touch on the trackpad
I just checked it on a friends macbook (on opera and safari, with inertia scroll enabled) and it works as it should with a two-finger touch on the trackpad.
@Lionel
Inside jquery.mCustomScrollbar.js find the line var vel = Math.abs(delta*10); and change 10 to a lower number (e.g. 1).
That should help with mac scrolling.
Hi there Malihu,
Love the scroll bar here and I’m trying in vain to use it on a project. I’m relatively new to jQuery, as I’ve been learning as I go.
My dilemma is that after inputting your code for the scroll bar on the portfolio site I’m building, everything else fell apart. I’ve now got an iFrame not loading the linked content properly on the first click (loading in the bottom right corner), but it will show correctly on a second click on the same link. All the links are in the scrollbar and the pages loading in the iFrame are also loading an awesome carousel script I found. It works perfectly when I test it locally, but as soon as I tested it online I found this problem, across all browsers.
I don’t know how to fix it and I can’t seem to find anything to help me by searching online. I’m sure it has to be an event handler of some kind, but I’m pretty much stumped. Any help or guidance would be much obliged.
Hello Jessica,
Please give me link so I can check it and see if I can help.
Hi again,
I sent you the link in an email yesterday. I’m trying to not have to post it openly here cuz it’s still on my server at the moment and I don’t want the hits draining my personal site’s speed. Thanks a bunch.
We too are trying to incorporate this awesome plugin with our iframe but to no success. Malihu, was Jessica’s iframe issue resolved?
We are using SVG in our application and think this would go a long way to making the application’s presentation more awesome, guidance would be much appreciated.
@Skhan
Can you send me a link so I can check it?
Thank you Malihu for the feedback. We have not gone live as yet, our deadline is for 31Jan. Would love to get your feedback when we are ready.
Coming back to the topic, we are using iFrame and the SVG in it. The scrollbar automatically pops up when the user enlarges the image (using controls provided by us in the interface). The problem appears to be that (unless I have this horribly wrong), in this jquery plugin, the scrollbar is created using a ‘div’ and unfortunately in our case, the scrollbar is created automatically by the browser…
Would love to hear your thoughts on above and a possible workaround. Will send you a message with our web application link in two weeks.
Hi there. Love this! Is there any way for me to add up and down arrows ( v ^ )? Either on the top and bottom of the scroll bar or together in the bottom-right corner?
Thanks for reading!
Hello Colby,
I’ve updated the plugin to support scrolling buttons (both vertical and horizontal). Check the demo as I’ve implement it on a couple of scrollers and re-download the archive with the updated files.
Thanks for your suggestion
Nice Plugin. Thanks for that. I am currently working on a new site and might use this plugin.
Wow, this plugin looks awesome. Will give it a try.
Hi Malihu,
First off, great stuff.
My question is pretty much the same as Shaun from Jan. 4th ( http://manos.malihu.gr/jquery-custom-content-scroller#comment-3922 ). I’ve customised my horizontal scroller, styled it just right, everything’s working a treat, except the width is defined in the CSS. And as Shaun will be, I’ll also need it to be dynamic.
So, no complaints here, just a request for help.
Thanks again for the effort of making a great piece of code available.
Keep up the great work,
nick
Hello Nick and thanks for your comments.
Shaun used the thumbnail scroller (http://manos.malihu.gr/jquery-thumbnail-scroller) which I’ve updated to expand the thumbnails container dynamically.
I could modify a bit this script to do the same (especially if your thumbnails have a fixed width) and send it to you. Is this ok?
Hi again Malihu,
Thanks a lot for your speedy reply, but a developer friend and I put our heads together and wrote some code that calculated the total width of all the images (plus padding), and then gave the div style that width. So, alls good here. Thanks.
I had a jQuery preloader to run while the images loaded, but once the preloader was finished and removed itself, your scroll was inactive. Have you heard that any of your other ‘fans’ that have had this problem?
Thanks again for your help and generosity.
Hello again Nick,
Grats on solving the issue with the div width
If all thumbs have the same width it’s fairly easy to calculate it and scale the container div. The tricky part is to do it when thumbs have different size. I’ve done it for another script and I might implement it on this scroller when I get some time.
As for the preloader, try to call the mCustomScrollbar function after the preload of all images is done.
Hi,
You have done excellent job.
One question how did you use custom font in your site.(you have used it in “jquery_custom_scroller ” demo folder too which is downloadable).
Thank you.
Really good work.
Hello!
I used the Google Font API (for my site and most of the demos) which is very easy to implement (a single line in css) and works great. Check it here:
http://code.google.com/intl/el-GR/apis/webfonts/
Available fonts on Google Font Directory:
http://code.google.com/webfonts
Thanks for your comments
Thank you.
Thanks a lot
Thank you!
Thanks a lot
Great plugin, malihu!
Back in September Vadim asked about a method for scrollTo or basically an initial auto-scroll when page loads.
I’ve tried a few things to try and cause this to happen, but can’t seem to crack it. I have it on a template page that I want for all pages within a section. But for each individual page, I want to scroll to see the item being viewed at time of $(document).ready() which would appear as a separate call when the content page is loaded.
Any advice?
Thanks! Loving the plugin!
Really an excellent work. Great!
But I’m wondering why you have decided not to auto-append all extra nedeed markup to the selected DIV in real-time, instead of forcing the user to do that.
This could make the (user) code cleaner and the usage much easier and less error-prone.
Hello Daniele,
A fair question
I try to keep html markup separate from (in this case javascript) functionality. I like to have the document structure and content intact as -among others- it greatly helps maintenance, updates etc. I always seemed to work that way (I do the same with flash actionscript) and I didn’t know until recently, that there’s a definition for it: “Unobtrusive JavaScript”.
The thing is that I mostly post stuff for developers and web authors/designers, so most of the times I deliver a script as I would like to get it if I was looking for something.
I do agree that if I’d publish something for a broader audience (for example an html5/flash video player), I would probably create it the way you describe.
Thanks for your comments
Malihu,
This response really frustrates me. I passed up on your plugin when I first began my quest to satisfy my designer’s requirements for this very reason–that you require me to either hand-code a bunch of boilerplate markup, hack your plugin, or wrap it in a plugin of my own. Now after losing two days’ worth of productivity with several other custom scrollbar implementations, I’m back where I started–right here–and that’s the only reason I’m taking the time to post a comment.
“Unobtrusive JavaScript” is keeping the JS out of the markup (e.g. not using HTML’s onfoo attributes, not using inlined tags, etc.). But what you have here is a situation where the markup your plugin requires is incredibly intrusive because a) it requires the developer to either memorize the structure or repeatedly consult the documentation to see how it’s supposed to be laid out, and b) it introduces a metric butt-load of non-semantic markup that serves a purpose only if JavaScript is enabled. So practically speaking, this misapplication of the concept of “unobtrusive JavaScript” completely backfires and makes people shy away from using your otherwise excellent-looking plugin.
In general, anytime a plugin requires a particular structure (especially one as deeply nested as what the present plugin requires), that structure should be dynamically generated by the code. That’s just plain good programming–it’s less error prone, it’s easier to create markup, it makes it easier for developers to swap out implementations (yours is the only plugin I’ve seen in this genre that requires so much extra hand-added markup), and it keeps the markup free from distractions that have nothing to do with the structure of the document itself. In short–it’s “compassionate programming.” This is why web development frameworks like Rails are so wildly popular–they let you focus on the task at hand without getting bogged down with the burdens of creating reams of boilerplate code.
If you were to lift the burden of the hand-creation of all this boilerplate from the user, your plugin would be as attractive to use as the demo page it powers.
@Dan
Thanks a lot for your valuable input and for taking the time to post your thoughts.
I am aware that I could completely “skip” some of the divs required for this plugin or just create them with js. Believe it or not, I’m like constantly working and I can’t get the time I need to update this plugin, something I wanna do for like several months now
I’m constantly learning new stuff on coding, designing etc. and there’s always a new-better way of doing things. I will definitely try to find some time to implement them on this custom scrollbar plugin.
I’m really sorry for any frustration I caused.
Seems that when I first create a fairly complicated plugin such as this, there are times I get focused in taking into consideration all the possible scenarios (vertical-horizontal scroll, images-no images, various images widths/heights, arrow buttons, liquid dimensions,window resize, dynamically loaded content, performance etc.), resulting in running out of time polishing or giving some extra thought on some implementation details.
Please keep in mind that I don’t come from a purely programming background. I was a designer for many years and started scripting in Flash which although is very similar to javascript, it is completely different from DOM scripting, so please bare with the errors I make.
The only objection I have is your point b about markup that serves a purpose only if JavaScript is enabled.
Right or wrong, when creating plugins, scripts, websites etc. I don’t really care, support or even consider anything that has javascript disabled (or is as old as IE6). I simply like to focus and spend time on more important things like adding features, better design etc. than supporting js disabled browsers
Thanks again for your comments. I’ll post an update when I modify the plugin.
Hi malihu,
First of all, congrats for the scroller. I had the same issue with horizontal scrolling, and had to calculate the width of the container and apply it before calling the scroller script. Someone asked why didn’t you appended the mark-up. Well, in that case, the width had to be applied somehow after the scroller was initialized and it would’ve been a little harder.
Anyway, is it possible to make the script behave like the one here: http://www.lebensraum-eilenriede.de/ – I mean, the content and the dragger to “snap to grid” ?
Thak you,
Adrian
Oh, and one more thing. When I click on the dragger, it moves along with the content. Could that be avoided somehow? Thanks
You’re right Adrian. I’ve updated jquery.mCustomScrollbar.js so it doesn’t scroll the content when you click on the dragger. Please re-download the .zip archive to get the updated version
Thanks for the suggestion!
Great, thanks for that. How about that functionality like “step” from jQuery UI slider? Any ideas? :-S
The scrollbar script at http://www.lebensraum-eilenriede.de/ is completely customized to work with their specific images dimensions. It’s not possible to implement it on a plugin that must work on any given content type (images, texts etc.) and/or length. It’s an entirely different script to develop.
Ok, got it. Thank you
Fantastic plugin. I needed something to supplement my old flash slider and this was just what I had in mind. However, it does get a little wonky for me when I use a large width on the scrollbox container. Any ideas?
http://www.iamtimothylong.com/testing/port
If you scroll through the first slider, you’ll notice it begins to skip and repeat about halfway through. I’m sure it’s an error in my end, but if you could shed some light I’d appreciate it! Thanks!
Hi Timothy,
From what I’ve seen, it seems that some of your image links are broken (e.g. images/photo/selected/DSC_0224.jpg). In addition, you need to make sure you’ve calculated correctly the total width of the container div (in the css file), especially when your elements have various widths.
Hi again Timothy!
I have updated the post with a solution to your issue.
The problem you describe happens due to a jquery bug that limits animate values to 9999 pixels. Check the solution provided at the end of the post.
great script. it works, however if i try to .hide() the container, and then .show() it again, the scrollbar won’t appear but the container does. weird bug. any ideas?
Are you hiding the whole content (e.g. $(“#mcs_container”).hide()) or just the container div ($(“#mcs_container .container”).hide())?
I’ve made a test of hiding and showing both and it works fine so I’d have to check your code to see if I can help.
Ok i set up the files here:
http://pennypoints.com/test1.html
http://pennypoints.com/test.html <-click on home text to show box
the only difference between is in test1.html i commented out: $('.box').hide();
line 57.
if i hide the box, and then show, the scrollbar disappears. I must be doing something stupid, as usual
Jay,
The dragger is kept hidden because the plugin checks if the content is long enough to apply a scrollbar (if content is shorter than its container, the dragger is hidden).
By hiding the content box before calling the mCustomScrollbar function, the calculation of content height becomes null, thus the dragger remains hidden.
To resolve the issue, move $(‘.box’).hide(); and $(‘.tab’).click functions below mCustomScrollbar function call (still inside window load).
This should solve the issue
thanks
Hi, I have the same problem when i tried to hide it initially.
I’m using display: none to hide the “mcs3_container”. And using jquery tooggle to unhide. But the custom scroll bar will not appear after that.
Able to help?
Hi, check the above comment to see why this happens. You probably need to hide it after calling the mCustomScrollbar function (still inside the window load)
Hi, I have the same problem, but I need to start my page with the container invisible! So, if I hide it AFTER calling the mCustomScrollbar function, I see that content for one second.
Is there some tips to hide something without “display:none”?
Hi again,
I’m getting this error, and I don’t know what seems to cause it. The scroller works, but I get the error
$dragger.position() is null
if($dragger.position().top>$dragger_container.height()-$dragger.height()){
jquery…lbar.js (line 307)
What could be the cause?
Thanks,
Adrian
Does this happen on a particular browser? Can you provide a link?
Correction. The scroller doesn’t work. I have several scrollers on two pages and I thought that the error was from the scroller that works (the horizontal one). But it’s from the vertical scroller from another page. The dragger is moving on dragging, but the content doesn’t. Any idea, malihu?
Thanks again.
I’ll upload the files and provide you the link in a bit.
Here it is:
http://adrianb.mediaproi.ro/personal/inviteme/4-importa.php
And the working horizontal one is here:
http://adrianb.mediaproi.ro/personal/inviteme/2-alege-model.php
The only thing I see is that “contact-list” and “people-invited” divs do not have a unique id. You have the same class name on the following dl tags. Try to give the dl another class name and see if it works.
IDs are unique. One is “contact-list” and the other one “people-invited”. What do you mean by unique, in this case? Both have same two classes, but I don’t think that’s the problem. I also removed the classes from DL’s, still no effect.
Adrian,
Just checked the functions.js script and figured what the problem is. On vertical scrollers, the minimum extra bottom scrolling space parameter must be 1 (you’ve set it to 0).
Actually, it’s entirely my fault as I haven’t documented or comment it in the code and post.
I’ll modify the script to convert 0 to 1done. In the meanwhile, just set the extra bottom scrolling space parameter in your vertical scrollers to 1 instead of 0.Phew! Great! It works now! Thanks, malihu!
But I still get that annoying error
$dragger.position() is null
if($dragger.position().top>$dragger_container.height()-$dragger.height()){
jquery…lbar.js (line 307)
Ok, I now know where’s the error from. It’s triggered on window.resize() when I open and close my firebug in Firefox. Any ideas on that, malihu? Thanks again for your time and help.
In fact, it’s triggered on any window resize, not just when firebug is being opened or closed. Sorry for spam
Hello there!
This is really nice work! Congratulations and thank you for sharing this with us. I’m just wondering if i can use any ScrollTo method ?
I’ve read all comments and two friend talked about this in their comments. Any progress about this situation ?
Thank again..
hey malihu!
this scroller is really cool. but i found a bug which i couldn’t get over…
i was trying to use the horizontal scroller for pictures. and if you have a lot of pictures and you have to set the width of the mcs5_container .customScrollBox .container on something arround more then 12000px the scroller starts to go crazy on a certain position. it’s beginning continiously from the first picture and moving super fast…
any clue what to do?
thanks a lot!
chris
Hello chris,
This happens due to a jquery bug that limits animate values to 9999 pixels. Check the solution provided at the end of the post
Hi,
Scrollbar is really cool, but for some reason, it only appears when I resize my browser window! Any idea what I may have done to cause this and how I can get round it!
Your help would very much appreciated.
Hello Nige,
Is your content long enough to require a scrollbar? When your container height is set in percentage, when you resize the window, it re-calculates content height and apply a scrollbar if needed. If this isn’t the case, I’d need to see your link and code.
Hi Malihu,
Thanks for getting back to me so quickly! This project isn’t live yet, but I have uploaded to a folder on the company site.
http://www.mememedia.co.uk/kirman/themes/fullscreen/Untitled-2.html
If you click on the little green tag in the middle of left hand side of the browser window a text box slides out, this is the contailer that needs to be scrollable.
Any ideas would be appreciated!
The scrollbar doesn’t show because you start the text-box hidden. You need to hide the box after calling the mCustomScrollbar function (still inside the window load).
Hi Malihu, Have I understood you correctly? It hasn’t worked!
Hi,
Sorted! I’ve moved the $(‘.portfolioInfo’).hide(); $(‘.text’).hide(); after my click function and the scroll bars seem to fade in with the text now!
Thanks alot for your help. The scroll bars look cool.
Thanks
Malihu, I promised to show you the project where I implemented this but there is still not enough content for the scroller to be triggered at the page.
But no worries – I’ll fulfil what I’ve said at the moment it become possible. 
It looks like you’ve done pretty good job as far as I can tell by the number of comments and the buzz around.
And the plugin can do wonders. 
Congratulations!
Thanks for your credit in the post. :_)
However, I was trying to implement it in a new project where the content in div.content is dynamically changed through jQuery.load. The problem is that when the new content is loaded the div.dragger dimensions are not calculated for the new content and some bad things happen (a lot of empty space may occur at the bottom of the div.content if the loaded document is smaller or what’s even worse – you may not even get to the content at the bottom if the new content is bigger than the firstly loaded).
I thought you should have it in mind. I’ll try to find a solution but my head is a mess right now. Please let me know if you have an answer for this.
Thanks and cheers!
I have a temporary fix for this so I’m gonna share it in case someone else wants to load content dynamically.
The concept is to call the function CustomScroller() anytime we load new content into the div.content. To do this first we have to make this function “global” so we can call it from anywhere within our script (and outside from $.fn.mCustomScrollbar = function).
First we change the way we declare this function:
function CustomScroller(){to
$.fn.mCustomScrollbar.CustomScroller = function CustomScroller(){– we make it “global” this wayThe call to this function (CustomScroller();) is currently placed before its declaration (it’s pretty much at the beginning of the script). But now when the function is global this calling won’t work so we have to move CustomScroller(); from the top to the bottom (almost) – the exact place is just before the line
$(window).resize(function() {Now, because we changed the way we declare this function we must change the way we call it:
Change CustomScroller(); to $.fn.mCustomScrollbar.CustomScroller(); . There are 2 places in the script where we should change it – the first is the one we’ve just move from top to bottom and the second is placed within $(window).resize(function() { – it is also closed to the bottom.
Next we remove
if(mouseWheelSupport=="yes"){$customScrollBox.unbind("mousewheel");
}
and add $customScrollBox.unbind(“mousewheel”); after if(mouseWheelSupport==”yes”){ – there are 2 occurrences.
This way we make sure we don’t bind more than once “mousewheel” event.
If we are using horizontal scrolling, we add
$customScrollBox_container.stop().animate({left: 0}, 300, "easeOutCirc");
$dragger.
stop().animate({left: 0}, 300,"easeOutCirc");
after
//horizontal scrolling ------------------------------if(scrollType=="horizontal"){
or if we use vertical scrolling then add
$customScrollBox_container.stop().animate({top: 0}, 300, "easeOutCirc");
$dragger.
stop().animate({top: 0}, 300,"easeOutCirc");
after
//vertical scrolling ------------------------------} else {
Now everything is put in place and when we load some dynamically new content into the div.content we should call the global function after the loading is complete. If we use load, we should do this:
$("div.content").load("new.html", function(){$.fn.mCustomScrollbar.CustomScroller();
});
The last code could be different depending the way you load new content, but all of the above is necessary. There is one problem though - the size of the dragger (the part you move) is not precalculated when the new content comes.
That's it for now and I would love to see some comment (yeah, even negative).
hey man, im terribly happy you noticed this (if you are in fact talking bout the issue i think you are) you see, my div resizes dynamically with a filter button (which filters the content of it) and ive had the issue once of a custom scrollbar not resizing..
now, i dont think it was malihu’s one, and i havent even implemented it yet, im still working on the site; but eventho my java knowledge is quite.. short, i think this may occur, as i havent seen some kind of relative instruction on the code.
anyway, the reason im posting is that.. i didnt get what you said. hahah
as i said my java knowledge is almost unexistant and i have no idea where or how to place the codes you provided..
would you happen to have online the files youre working at so i could give em source a quick look and see where do i have to place em?
thanks a lot, greets
It would be pretty hard to understand it if you haven’t seen maluhi’s files and instructions already…
Read the instructions, download the plugin, open the files and inspect them and then read my comment again – I’m sure this way you’ll get it.
And if you don’t – I’ve uploaded the .js plugin file here (it won’t be there forever) – I’ve put “here” at any place where I’ve made some change – just search within the file.
With this .js you should be able to refresh (no everything) the slider by calling $.fn.mCustomScrollbar.CustomScroller(); when you need it.
Sorry for this post but my link kind’a disappeared.
Here it is (the js. plugin file) – http://webpresence.bg/uploads/dev/jquery.mCustomScrollbar.js
IsHristov
ROCK ON. You solved the “scrollTo” problem while at the same time fixing for dynamic content.
Hello again isHristov
Thanks a lot for posting the fix! I’m currently modifying the script to accept images with different widths on the horizontal scroller. By the time it’s ready, I’ll check and implement your code in the plugin. Gonna do some testing to check if it works with multiple scrollers, browser resize, scrollbar auto height etc.
I’ll post an update soon.
Edit: done!
Yeap, that’s definitely better.
Now the dragger resizes when/if the new content loads.
But you should consider removing
&& $customScrollBox_container.width()!=$customScrollBox.data("contentWidth")and
&& $customScrollBox_container.height()!=$customScrollBox.data("contentHeight")
from lines 45 and 185 within jquery.mCustomScrollbar.js. With this check you prevent the container to move to the left/top 0 if the new loaded content have the same width/height (and that’s a very possible scenario).
Greets!
@isHristov Yes, I’ve set this condition to prevent other scrollers in the same page from reseting. I’ll check it further to see if I could implement another condition besides size.
I’m not absolutely sure (haven’t test it), but I think that when we call
$("#mcs_container1").find("div.content").load("new.html", function(){
$("#mcs_container1").mCustomScrollbar("vertical",400,"easeOutCirc",1.05,"auto","yes","yes",10);
});
only the scroller for #mcs_container1 would be “refreshed” and the rest of the them would remain unchanged. Am I wrong ?
Yes you’re right, only the scroller for #mcs_container1 would refresh.
Hi,
Very nice plugin !
I am trying it on a page divided in three columns, where the left division contains thumbnails who target named anchors on the center division, the division I use your custom scroller on.
The scroller works fine, but when I call a part of the center division by a link on the left one, the scrollbar dragger doesn’t follow.
Would it be possible to position the dragger initially according to the position of the displayed part the center column ?
Thanks.
Yes! That pixel limit workaround is perfect for now. Thanks for taking the time.
Is it possible to have vertical as well as horizontal scrollbars at the same time?
Not at the moment. I don’t really know how easy it’d be to implement it. I’ll check it and let you know if it’s relatively easy to do.
Cool Control, but just one question: Is it possible to have some links outside the scroller control which links to the scroller? I have a large text with 8 chapters. I’d like to put links to the chapters above the scroller so that the scroller moves to the clicked chapter. Would this be possible? Is there any demo? Many thanks!
Not possible at the moment. A feature like this would require additional coding especially to integrate with many scrollers. I might give it a try in the future. Thanks for suggesting it
Hi malihu,
thanx for that great content-scroller. its really nice with its easing.
I’m new to jQuery, and sure I made a mistake:-( but after searching for some hours for it,
I try to ask you, what’s wrong with my test?
http://kunden.graphics4web.de/stindt/test/
everything is working nice, but the dragger is much to long, nearly same size like the dragger_container. in css it should have 60px height. But it looks like 400. I can’t find my mistake? maybe, somebody gives me a hint. would be nice.
thanx:-)
lobinski
Hi,
I think the long dragger in your code is normal, cause your content is not very long and you’ve set the scrollbar height/width adjustment to “auto”. If you want the dragger to have a fixed size (the one you set within the css), change the parameter to “fixed”
cool, yes it works:-) thank you very much.
Hey, I tested your demo page with my ipad running ios 3.2.1 and the scrollbars don’t seem to respond in safari. Have you tested the script for ipad? If so, what ios version?
Thanks, great script; you have some gems in your other site posts too
Do you have a script to scroll the box down X pixels any time i push the down arrow key? and alternatively scroll up when i push up arrow key? thx
i got it to work with this script:
$(document).keydown(function(e){
if (e.keyCode == 38) {
$(“.scrollUpBtn”).mousedown();
setTimeout(“$(‘.scrollUpBtn’).mouseup()”,250);
}
if (e.keyCode == 40) {
$(“.scrollDownBtn”).mousedown();
setTimeout(“$(‘.scrollDownBtn’).mouseup()”,250);
}
});
Great! I’ll check it further. Thanks for posting it Jay
Hello!, Sorry as you manage the installation of this function?, I do not work: (
Hello.
First of all thank you for your scroll. It works very well for me (for now …)
A quick question: how to go top or bottom of the page thanks to the side arrows rather than to scroll the text when you click on it. This feature would be very helpful and my lack of knowledge does not allow me to adapt your code to my needs.
Is this feasible?
Do you plan to implement this type of function?
Can you give me some hints?
In any case thank you for your work and sharing your knowledge.
In advance thank you for your reply
In jquery.mCustomScrollbar.js find function BtnsScroll(dir) and BtnsScrollX(dir) functions. Inside them set both var scrollSpeed variables to 20, so you can instantly scroll to top and bottom accordingly. I haven’t actually checked it, but it should do the trick.
Hi there! I tried your plugin and it works just great in all common pc or mac browsers. Great job! But on iOS devices (iPad or iPhone) there is no way to scroll the content.
Do you have any idea how to create a workaround?
Cheers!
Hello Marc and thanks for your comments,
Unfortunately iOS is very limited on jquery events. Actually, the only event that actually works on iOS is click. This plugins utilizes events like drag, mousedown, mouseup etc. which are what every scrollbar needs.
A simple solution would be to add a condition to check for iOS and apply a normal scrollbar (e.g. css overflow:auto) for it.
Malihu – thanks for this plugin man I really like it.. just wish it worked with iPad..
So after some research I see a whole bunch of scrollers for ipad but none that have buttons.. just a draggable scroll like you mentioned overflow: auto.. although they are custom…
Take a look – I think you can check this out to figure out how to make it work with iPad/Iphoen
http://cubiq.org/iscroll
http://cubiq.org/dropbox/iscroll4/examples/simple/
Thanks !
very sweetttttt… thanks for posting this!
I am having trouble with the “noConflict”.
On my own website there are several jQuery scripts – and it works.
On an other site there are also several scripts but it doesn’t work, so I like to use a var like this:
var $jScroller = jQuery.noConflict();
But everytime I try to implement it to your Script it goes like “Not with me fucker.” Where and how do I do that?
Hi, love the plug in! It’s exactly what I was looking for, but I have a problem maybe you can help with. I have it running successfully on a few pages that are in the root directory of my site, but on one page in a subdirectory, it won’t load. I’ve changed the links to the .js files and the .css files correctly, but I still get nothing. in both instances, the div is being loaded with dynamic content, and that works well. My site is not yet live so I’d like to send you an email with the link, if you could find a few minutes to look at it and advise?
I can tell you that Safari is giving me this error:
TypeError: Result of expression ‘$dragger.draggable’ [undefined] is not a function. jquery.mCustomScrollbar.js:221
but I know nothing of javascript, so I’m in your hands.
Thanks!
Hi Jeff,
Please send me an e-mail with the link and see if I can help
Hi Malihu,
Have you had an opportunity to examine the site I’m having trouble with? It’s live now, so I’ll post the url here: http://ticorestaurant.com/gallery
You’ll see I’m using PowerGallery by WebAssist, and something is not working. The css is working, but the scrolling isn’t. Any help is appreciated.
I haven’t been able to work out the issue I’m having with the scrollbars. I know you’re busy, but would appreciate any help you can offer. The page: http://ticorestaurant.com/gallery
You can post here or email me directly. Thanks!!
I love the freedom this code gives for designing the appearance of the scrollbars and would like to use it a lot on future project. There is one problem, though.
It doesn’t work well with dynamic content from an xml file, imported via spry data sets. The content is displayed, the scrollbar and up/down buttons are displayed, but there is no action.
http://www.peermann.com/CCAI/artists/artists.html
http://www.peermann.com/CCAI/Scripts/bioScroll.css
http://www.peermann.com/CCAI/Scripts/bioScroll.js
It’s the artist’s bio below the slideshow. The scrollable menu to the left works because its height is a fixed value in the talentContent rule (I had to change names so the two scripts don’t get into each other’s way). But the cintent is dynamic – spry repeat – and functions without problems.
The bioContent div appears to get the hight information from the dynamic content – or else it wouldn’t display the scrollbar and buttons – but doesn’t want to function without a fixed value in the css rule.
The problem may be the Observer I placed into the code.
With the observer active, the scrollbar and arrows are displayed but not functioning, indicating the height information for the dynamic content is conveyed.
With the Observer commented out, the scrollbar and arrows are not displayed.
With the height information added to the content’s css rule, the scrollbar and arrow display and function.
With the height information added to the content’s css rule and the Observer active, the scrollbar and arrows display but don’t function.
My conclusion is, there is something in the Obsever’s code that doesn’t play nice with the scroll.js, or vice versa.
Thanks for the great work and for the feedback you provide.
I have a question on this part:
———————————————
Hiding content scrollers
If you want to have the scroller initially hidden, you need to hide it after calling the mCustomScrollbar function. This is important, in order for the script to calculate content width or height correctly.
———————————————
May I ask you or the other users here to explain, please, how to “have the scroller initially hidden”. That is something I can not figure out by myself. Thanks again.
Hi Nikola,
An example could be:
$(window).load(function() {
$("#mcs_container").mCustomScrollbar("vertical",400,"easeOutCirc",1.05,"auto","yes","yes",10);
$("#mcs_container").hide();
});
Hi malihu,
love this tutorial, but is there a way I can use it to make a fullpage scrollbar? I mean, to replace the default browser one…
Thanks!!
How do I adjust for the difference in mousewheel scroll speed between Safari and Firefox? The script is set to “delta*1″ for vertical, which is ok in Firefox, but way too fast in Safari. I have to bring it down to “delta*0.001″ to get a reasonable speed in Safari. That, of course, brings it to less that a snail’s pace in Firefox.
Assuming you wanna modify it on Safari on mac OS, you can modify a bit the script as follows:
Inside jquery.mCustomScrollbar.js find CustomScroller(); (line 38). Right above this line add:
//check for safari browser on mac os to lower mousewheel delta
var os=navigator.userAgent;
if (os.indexOf("Mac")!=-1 && os.indexOf("Safari")!=-1 && os.indexOf("AppleWebKit")!=-1 && os.indexOf("Chrome")==-1){
var mousewheelDelta=1;
} else {
var mousewheelDelta=10;
}
Next, find var vel = Math.abs(delta*10); (lines 112 and 252) and replace them with: var vel = Math.abs(delta*mousewheelDelta);
That should do the trick
Let me know if that helped.
rKJ8mu Hi! I’m just wondering if i can get in touch with you, since you have amazing content, and i’m thinking of running a couple co- projects! email me pls
Sure, send me an e-mail (manos AT malihu DOT gr)
This is awesome btw. Thanks for doing all the work here. Not sure if I’m missing this, but I’d like to slow down the speed of the scroll when I click and drag the scroll bar. I’m using a horizontal scroll. I’ve slowed down the scroll speed when I use the buttons, but can I do the same when I click and drag the bar?
Also, I tried changing (var vel = Math.abs(delta*10) to ’1′ but I’m still getting a wicked fast scroll in safari. Any help would be appreciated. Thanks.
Thanks
The “speed” of the scrolling when you click’n'drag the scrollbar is determined by the speed you move the cursor, exactly like the way you scroll with your browser native scrollbar. The only thing that alters the scroll movement is the scroll easing amount that you can increase, decrease or set to 0.
The vel variable affects scrolling with the mousewheel. Does the extremely fast scroll happen in Safari on OSX? Does it happen when you scroll via a trackpad or with your mousewheel as well?
Hi Malihu,
This is an amazing plugin!
Just a question, for the current version, is it possible to use two scroll bars (vertical and horizontal) for the same content? Or I need to change something? Like adding a new dragger_container?
Thanks!!
Ahh… ok I read your comment: http://manos.malihu.gr/jquery-custom-content-scroller#comment-4207
Thanks again, Malihu! Amazing plugin
Has anyone encountered an issue where the scroller adds to the top position rather than minus so that the scroller runs the wrong way?
Just ran across this condition. It happens with one user who uses a mac keyboard and mac mouse on a pc. The scrollbar is in an asp.net update panel. The first time it displays, it works correctly. After that, it scrolls backwards.
Another possibly related update panel issue on explorer only, resize throws an error in jquery-1.5.1.js because this.offsetParent is undefined. Wrapped it in a try/catch to keep it from failing.
Hope to figure it out, this is the best scrolling plugin of the many we’ve evaluated. Great job Malihu!
hi..! manos
i use google alert find out u blog..
Lovin’ your style
Hi!
This plugin it’s amazing!
I have only one question, i must insert the scrollbar in a page call with ajax function, how can i do this?
If I insert the jquery code in the master page, the script doesn’t work, even if I insert the script in the page called by ajax, the code doesn’t work.
How can I do?
Thanks
Check the section “Dynamically loaded content” on the post. You should load the script on the master page and re-call mCustomScrollbarevery time you load new content or content that the scroller applies changes.
This is great.
There is just one thing that I can’t get to work.
I want to have links on the page outside the scroll box to anchor links in the scroll box, but when I do this the scroll bar disappears.
Is there any way to stop this?
Thanks
I haven’t implemented a scroll-to feature on the plugin yet and there’s no simple way of modifying the script to accomplish such a functionality. If I find some time to implement it, I’ll post an update and let you know.
Malihu,
I wouldn’t mind helping out on this scroll-to feature. If you (having knowledge of why/where the code isn’t simple to modify) could point me in the right direction, maybe I could help.
I tried a month or so ago to do it on my own, but didn’t end up cracking. But if you could point out the areas of the code that you know are the issue, then maybe I could get more focused.
The script it exactly what I am looking for. Though I am running into a problem, maybe you can help.
Inside .content I have divs that, with jquery toggle from 30px, to 400px. So they slide open. For some reason, and I’ve been testing for days, I can’t figure out why your script doesn’t recognize the new width of .content after the div is toggled open to 400px. I would imagine it would just change the width of .content and the slider would then appear and be functional.
Maybe you can help?
Hello Ryan!
Every time content width/height changes dynamically, you need to re-call mCustomScrollbar in order to re-calculate the dimensions and function correctly.
On your jquery function that toggles width, add a callback function that calls (as an example):
$("#mcs_container").mCustomScrollbar("vertical",400,"easeOutCirc",1.05,"auto","yes","yes",10);Hope I’ve helped
I mean… That kind of helped… It triggers the scrollbar to show, but not at the correct time… Perhaps I can send you what I have and you can take a quick look at it. I am sure it’s a quick insert of something or tweak that I’m not ding, but all this is somewhat new to me.
Great work! Really nice stuff in great locations also! Strong impact!
Hi, I have a problem regarding a scrolling container with a background image.
I want the background image to scroll (by setting background-attachment:scroll), but instead it’s always fixed.
Is this a known issue? How could I solve that?
Thanks man, awesome plugin
I also should mention that my background image is repeated horizontally.
me again. Nevermind, I’ve solved the problem
Hi!
Why if i put in “.content” div other floating div the scrollbar go crazy?:)
I can’t tell for sure unless I see the code but generally, when you place a floating div inside another div (like .content) you need a clearfix. For example, after your floating div(s), add another one like this:
I’ve tried to use anchors within the scrolling content div, but when I click on the link to go to the anchor, It skips to the right position, but the scroll bar disappears. Is there a way to get anchors working properly in the scrolling div?
Hey this scroller is great, thanks a billion, but its acting buggy when used on multiple pages with multiple widths.
The scroller skips wicked fast towards the end and basically breaks, I’m sure its something I’ve done. Tried giving each .content class an inline width but still breaks.
Any suggestions?
Nevermind, I saw that little thing about 10,000 pixel animate limit for the jQuery library.
Whew!
Killer scroller holmes.
I really, really want to use this plugin on a site I’m building, but I can’t seem to get the scrollbars to appear in a DIV that is toggled on/off.
I’m more a designer than I am a developer, so, if you have the time, I’d be grateful if you were to let me know what I’m doing wrong here. I don’t understand “callback” and the like, but I do know how to copy/paste.
The test link is http://afhashwani.com/v4/04_test.html
When you click on any of those three links, the overlay box will display, but the scrollbar won’t appear unless you resize the browser window.
Cheers!
Hello Ahsan,
Try to move each mCustomScrollbar function inside its relative slideRight function as an animate() callback. For example:
jQuery(this).animate({width: 'show'},function(){
$("#mcs_container1").mCustomScrollbar("vertical",1000,"easeOutCirc",1.1,"fixed","yes","yes",2);
});
Let me know if it worked
Really great script. It was a life saver for me. Used it at http://www.franzgarcia.com.
Only problem is if the browser isn’t maximized and you scroll all the way to the end and then maximize the browser the scroll-er does not automatically reposition itself.
Is there a way to do this ?
Thanks for using it
After you’ve scrolled to the end and maximize, the second you use the scroller (press, use mousewheel or buttons), it’ll reposition automatically, so the functionality remains intact.
At the moment, it’s the most efficient way cause it requires no extra coding or removing/adding time intervals etc. just for display purposes for a max-scroll-resize situation.
Hey Malihu,
Thanks alot. I actually used your advice for Sean below (minus the CSS part) to solve my issue.
Funny how things work out sometimes. Great script, keep up the good work.
Great
Love this. Question: I am using the horizontal scroller and would like to start the scrolling from an image other then the first image. Any way to accomplish that?
Sure… Open jquery.mCustomScrollbar.css and add a left value to .dragger (e.g. left:150px). Open jquery.mCustomScrollbar.js and insert:
ScrollX();right below ScrollX function (line: 142).
Hey
Just wanted to let you know that this is exactly what I have been looking for. However, I just cant seem to get it to work. I have it customized to fit my content, but it is not scrolling.
I have checked my code twice, and to the best of my limited ability, I am very sure I placed everything correctly.
http://www.aviarycafe.com/nesttest2/eat2.html
And no making fun of my coding.
Any tips?
Hello,
jquery.mCustomScrollbar.js doesn’t seem to load (http://www.aviarycafe.com/nesttest2/jquery.mCustomScrollbar.js gives a 404 error). Try re-uploading it on your server or moving it to the right directory (nesttest2/).
Oh man! It was so simple I missed it… Thanks for the extra pair of eyes. And for the great scroll bar. Enjoy your coffee!
Hi.
Congratulations for your job.
I have a problem when I tried to implement your scrollbar in my website.
The scrollbar moves, but the text is fix and it does not move.
Firefox returns to me the next message:
Error: too much recursion
Archivo de origen: http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js
Línea: 33
Do you know what the problem is?
Hi again!
This is the source code of my website:
http://dl.dropbox.com/u/20510467/scrollbartest.rtf
I think that the problem is in
load(function() {$(“#mcs_container”).mCustomScrollbar
because the #mcs_container is in other divs
It is posible? How can I solve it?
Thanks
Hi Alvaro,
I can’t really help unless I check the page somewhere online, along with valid links to its related documents (not localhost)
Hi malihu.
.
Im so sorry. My client would cut my neck if I show the website to somebody
I have uploaded a video where I show the problem. I hope that it is enough.
http://dl.dropbox.com/u/20510467/001.mov
The website is a store based in Prestashop. Maybe it help you.
Thanks for all,
Hi! first of all,congratulations because of your great post, very good examples and explaining
So, I’ve tried to readjust it to my sizes,styles with no problem, but when I’m no longer able to make it run over my web (www.sailingcharterbaleares.com)
The problem is, I’ve coded a rotator menu where once you’ve selected a link, the content change and show its correspondent description, so I’ve added your structure to each of my diferent description classes.
I can visualize each description with its scrollbar correctly, but at the end, whe adding the script source before of the tag, the scrollbar dissapears.
So, could you ckeck the site I’m developing to have an idea of the problem?
Thanks and congratulations again
Hi malihu,
great scroller! I am using it on this site http://188.65.32.28/thebull/ If you click the read more button at the top right, you will see it is loading more text with jQuery slideToggle. If you click it again – now read less, the scroller appears to adjust for the new content. BUT I need the scroller to appear when first clicked. If you view source you will see that I am calling mCustomScrollbars(); after the click function. I just cant seem to get the scrollbar to appear when the read more is clicked. If you could have a look that would be great.
Thanks
$(document).ready(function(){$(".toggle_container").hide();
$("div.trigger").click(function(){
$(this).toggleClass("active").next().slideToggle("slow");
$("a.trig").text($("a.trig").text() == 'READ MORE' ? 'READ LESS' : 'READ MORE');
mCustomScrollbars();
return false; //Prevent the browser jump to the link anchor
});
});
Just an update: I added this:
$(document).ready(function(){
$(".toggle_container").hide();
$("div.trigger").click(function(){
$(this).toggleClass("active").next().slideToggle("slow");
$("a.trig").text($("a.trig").text() == 'READ MORE' ? 'READ LESS' : 'READ MORE');
//mCustomScrollbars();
$("#scroll-left-container").mCustomScrollbar("vertical",900,"easeOutCirc",1.02,"fixed","yes","no",0);
return false;
});
});
but got the same result – scrollbar is added only on second click of the read more button.
Thanks
Hi! first of all,congratulations because of your great post, very good examples and explaining
So, I’ve tried to readjust it to my sizes,styles with no problem, but when I’m no longer able to make it run over my web (www.sailingcharterbaleares.com)
The problem is, I’ve coded a rotator menu where once you’ve selected a link, the content change and show its correspondent description, so I’ve added your structure to each of my diferent description classes.
I can visualize each description with its scrollbar correctly, but at the end, whe adding the script source before of the tag, the scrollbar dissapears.
So, could you ckeck the site I’m developing to have an idea of the problem?
Thanks and congratulations again
@jfcolomer
Try the following quick fix:
Move mCustomScrollbars(); from $(window).load function to your custom script function. E.g.:
$(function() {
mCustomScrollbars();
var current = 1;
...the rest of your code...
Hi friend, thanks for your quick fix, now it shows the dragger correctly but the scroller doesn’t works. I’ve uploaded the new fix to the web http://www.sailingcharterbaleares.com
I’ll try to fix it, thanks for your support
Try putting the mCustomScrollbars function as a callback in the animate() function of content block. I’ve check your script and I understand correctly the function you load description is “display”. If so you can do it like this:
$('#rot1 .description').animate({'bottom':'-270px'},500,'easeOutCirc',function(){
$('p',$(this)).html(info_elem.find('.info_description').html());
$(this).animate({'bottom':'0px'},400,'easeInOutQuad',function(){
mCustomScrollbars();
});
})
Note the callback function after the “‘easeInOutQuad” parameter.
Hi friend, thanks for your quickly answer but when putting the mCustomScrollbars function as a callback in the animate() function, the carrousel does not work like it should, so I’m not sure what to do now :S
http://www.sailingcharterbaleares.com
Juan
I got this to work on most browsers. Thanks.
But, any ideas for getting it to work on an iPad?
Hello Penny,
As far as I know iPad doesn’t support any of the normal jquery event functions other than click. This script utilizes many more including drag, press etc. that are required for any js custom scrollbar. There are specific custom libraries for iPad out there, but I rarely use them as I never develop for specific browsers or devices.
The best way to support iPad using this script, is to write a condition that checks for iOS and apply the code inside the <noscript> which essentially activates a native browser scrollbar on the container.
Hi, Does anybody knowhHow can I check it using jquery.support function? jquery.browser is deprecated soon, so the way to do it is with jquery.support, but I can´t figure out how to make this possible..
Great Scrollbar, really nice code!!
@fresno
Although jquery.support seems the “right” way to go, most of the times jquery.browser is the easiest-most efficient way to implement.
The “problem” with jquery.support is that it requires the development of feature detect plugins to recognize bugs/browser issues.
Hey man, thanks for this, absolutely love it!
Only problem im having is with the ipad/iphone detect. Would you mind letting me know exactly what I need to put and where it goes in order to get a scrollbar on my ipad?
Cheers,
Nick
Hi Malihu,
Sorry to be a pain, but would you be able to have a quick look at my question a few posts above and let me know if you can think of a solution – would be greatly appreciated
Thanks
Rob
Sorry for the late response Rob.
Try to add mCustomScrollbar function inside a condition that checks if div.trigger has class “active”. You can do it like this:
if($('div.trigger').hasClass('active')){
$("#scroll-left-container").mCustomScrollbar("vertical",900,"easeOutCirc",1.02,"fixed","yes","no",0);
}
You should also call mCustomScrollbar function as callback in slideToggle function like this:
$(this).toggleClass("active").next().slideToggle("slow",function(){
if($('div.trigger').hasClass('active')){
$("#scroll-left-container").mCustomScrollbar("vertical",900,"easeOutCirc",1.02,"fixed","yes","no",0);
}
});
Hi Malihu,
Thanks alot for helping me with this. I didnt need the addClass actually so it worked using this:
$(document).ready(function(){
$(".toggle_container").hide();
$("div.trigger").click(function(){
$(this).next().slideToggle("slow",
function(){
$("#scroll-left-container").mCustomScrollbar("vertical",900,"easeOutCirc",1.02,"fixed","yes","no",0);
$("a.trig").text($("a.trig").text() == 'READ MORE' ? 'READ LESS' : 'READ MORE');
});
});
return false; //Prevent the browser jump to the link anchor
});
Thanks!
Rob
Hello,
very nice script, i really enjoy it. But got question about it – if i try to set css hover on #mcs_container .dragger_container it doesn’t work on firefox. whole jquery functions are written in very hard style and can’t find where is the problem.
Just checked
#mcs_container .dragger_container:hover{...}and
#mcs_container .dragger:hover{...}on Firefox version 3.6.15 and work as expected.
sorry, problem was with type declaration, without this line:
it doesnt work
Nice work! For those who don’t want to change the HTML structure, just wrap your element using jQuery:
$(‘.myScrollableElement’)
.wrap(”)
.wrap(”)
.wrap(”)
.wrap(”)
.wrap(”)
.parent().parent()
.after(”);
});
I also prefered to change the plugin source to use $(this).find(…) instead of $(“#”+id+…). Now the container doesn’t need an id.
I found the minimal overhead to be worth the ease of maintenance.
Thanks for posting this Diogo
This seems to be the best scrollbar replacement script out there, and I’m excited to implement it into my work… just having some trouble that I hope you can help me with.
I am currently working on a photography website for my sister using WordPress. I want to keep all pages at the same height, but I can’t get the page to scroll.
This is the URL to my problem: http://testing.lindsey-martin.net/triciaann/about-2/
I’m fairly new to web design and I have very little javascript knowledge. If there is anything I need to post here, let me know. Thanks in advance for any help.
I got it to work… Found out that in WordPress, when calling the function, “$” should be replaced with “jQuery”.
Hey Lindsey,
I have the same problem. where exactly did your replace the “$” ?
Greets, Tim
Hi Malihu,
Can you do me a favor? I’m using your plugin now, and it used to work perfectly..but then suddenly it doesn’t work anymore – now the dragger can only be dragged to a certain point and half the content is hidden. Can you perhaps take a look at my page and suggest what might be wrong? (The black portion is the dragger_container – I thought it might make it easy to spot what’s wrong that way.)
Really appreciate the help, thanks.
Add the following to the file jquery.mCustomScrollbar.js:
after this line:
put the following :
totalContent = $customScrollBox_content.height();
scrollAmount = (totalContent - (visibleHeight / bottomSpace)) / (draggerContainerHeight - draggerHeight);
drag: function(event, ui) {
Great scrollbar! I almost have it working.
It seems though that the height of my div is not calculated right.
Check out my example here: http://www.meetsteven.com/scroller/
What am I doing wrong?
Never mind. Got it working
Now my structure is the same as yours.
Malihu, is there a way to make this plugin work without the jquery UI? Not everyone is using it and thus it plays a quite negative role in page load time.
Btw, you can see the implemented plugin right here – http://webpresence.bg/seo/en/ . I promised to show you this a long time ago but I had a lot on my mind these days.
Cheers!
Great
The script needs jquery UI for many reasons (draggable, easing etc.). You can make your own build of jquery UI though to make it much more lighter (http://jqueryui.com/download)
Hmm, that’s pretty cool, thanks!
Hi,
First of all thank you so much for sharing your knowledge.
Now, onto business. I’m currently using your script at a beta site I am doing, it seems to work well *however* on large content the “dynamic loading” function seems to cease working in certain browsers, while taking 2 clicks in others.
(note picture links don’t work, but menu is suppose to)
http://www.julietaing.com/beta4
if you visit that page in CHROME: the menu links work, the content is loaded into the middle however something happens where it doesn’t adjust the width of the content div, and also doesn’t show up any scroll bars.
Firefox: Clicking on menu links brings up the content div, however it takes a second click on the same link for all of the pictures to show up + scrollbar and width to be correctly displayed set.
IE8 (browser): Surprisingly page seems to work in IE8. (surprisingly because well IE sucks)
IETESTER: ”
LINE 344,
CHAR 4
Error: ‘$dragger.position().top’ is null or not an object
Code 0
Please help,
Thanks,
Vinh Nguyen
Hello, very good job. Thank you very much for sharing.
I have a problem. I use jQuery to display content in a div, it works great when you load the first time (using include), but when I go to another link and return the scroll does not work.
The website is http://www.giselaverdessi.com/site
Thank you very much
PD: Sorry for my English.
Ups… http://www.giselaverdessi.com/sitio
Hello,
You need to call mCustomScrollbars function every time you load new content on containers that have custom scrollbar. You should add it as a callback on your click event like this:
$j("a.cargar").live('click', function(event){
event.preventDefault();
var url = $j(this).attr("href");
$j("div#contenido_include").fadeOut("slow").hide().load(url).fadeIn("slow",function(){
mCustomScrollbars();
});
return false;
});
Works perfect.
Thank you very much for an answer.
Is there any way to make this work on a mobile device.
I Tried your samples on a droid and it didnt work.
Im hoping to find a solution that allows scrollable divs
on iPhone, droid etc and FF, safari, ie, chrome, etc.
Is this possible?
Thanx
Hi,
Unfortunately mobile OS (iOS, android etc.) are very limited on jquery events or require jquery mobile framework to function properly.
The best and easiest solution at the moment, would be to add a condition to check for mobile OS and apply a normal scrollbar (e.g. css overflow:auto) for it.
Hi,
Sorry I’m really new to this and can’t figure out why my page is doing what its doing.
julietaing.com/beta4
Upon page load:
Menu doesn’t seem to load at all in chrome (no scrollbar/width set).
In firefox they require 2 mouse clicks for width to be set accurately and scrollbars to adjust
In IE it works fine.
I tried the suggestions you gave to Alexandro on my page, though it still functions conditionally as described above. Please help. Thanks.
-Vinh
Hello,
Seems that many users have problems calling the scrollbar function on dynamically loaded content, so I’ve decided to include an additional tiny plugin (plugin info: http://benalman.com/projects/jquery-resize-plugin/) that checks when content changes its width or height and automatically calls scrollbar function.
Firstly, get the plugin file:
http://manos.malihu.gr/tuts/jquery.ba-resize.min.js
and put it in the directory of your document.
In the head of your document, before the closing head tag add:
<script src="jquery.ba-resize.min.js"></script>At the bottom script, below your LoadNewContent function add:
$(".content").resize(function(e){$("#mcs5_container").mCustomScrollbar("horizontal",400,"easeOutCirc",1,"fixed","yes","yes",20);
});
With this, you can remove the other callback functions calls of mCustomScrollbar.
Hey,
Just wanted to give an update that your suggestions worked. Thank you so much for taking the time to assist me!
-Vinh
Hello
Can you share with you your code Mr Vinh Nguyen
Hey,
I’m back again for a small request.
http://julietaing.com/
The page looks beautiful, in part thanks to your nice scroller. At present, the scroller is a set width, I would however like to make it to 100% of the WINDOW size.
When i set width to 100% either in the div dragger container, or within the CSS file, it sets it to 100% of the dynamically adjusted width, rather then the window size.
What this causes is as you scroll, the scrollbar will go off to the right side and out of reach.
Hi there – I love the script!
It works beautifully…except in the html file i want to place it in.
You’ll notice in this file it doesn’t work:
http://www.kapitalc.com/boqueria/menus/menus_tapas.html
but in this file (same code)it works perfectly:
http://www.kapitalc.com/boqueria/menus/test.html
Perhaps another effect on this page is causing a conflict…?
any help you could provide would be greatly appreciated!
Hi Simone,
Seems the jquery.mCustomScrollbar.js path is incorrect.
Opera Dragonfly console:
URL
http://www.kapitalc.com/boqueria/menus/scroll/jquery.mCustomScrollbar.js
Response
404: Not Found
Method
GET
Host
http://www.kapitalc.com
Path
/boqueria/menus/scroll/jquery.mCustomScrollbar.js
fixed that….but still doesn’t work….any ideas?
I found a bug in the scrollbar, you can do it in the demo page:
In the first demo scrollbar click and drag the scroll down arrow anywhere, the scrollbar scrolls all the way down, that easy to fix probably.. But here is the big problem, after previous task scroll back up and click the update content link, and then you cannot scroll all the way down of the new content!
I am customizing this scrollbar to a page and noticed this bug.
LOL at spam protection, “Sum of 1 + 3 ?” I enter 4, it says it is wrong!
I must be really bad at math..
Thanks for reporting it! Issue is now fixed
I’m having some issues with your plugin in IE7. scrolling right sends the scroller way beyond the limit of the content, but then scrollling left a few times makes it animate correctly back to its start point.
You mentioned that you don’t support older browsers. does this include IE7?
any ideas why I might be having this issue? Thanks.
Hi, don’t worry. I fixed the issues.
Thanks
I’m having similar trouble in IE7, actually. The script seems to be adjusting the width of the horizontal wrapper to the ridiculously high value, but it never resizes it to recalculated value. Any ideas on why?
Hi mate, thank you very much for this scroller, it’s great, and just wanted to add, the scroller with the up and down arrows is one of the few iphone and ipad compatible scrollers out there. I just need you help on one thing, I use jQuery TOOLS on my site, and jQuery UI doesnt get on with tools as they both have a function call to ‘TABS’, could you tell me which parts of jQuery UI you’re using exactly so that I could go and make a custom version of it with the bare minimum?
Thanks again
Vish
I only use draggable iirc
Hi, ive got same problem. I am using tabs, and this plugin works only in 1st tab. U downloaded only custom jqueryUI with only draggable, but it didnt solved my problem :-/
any idea or solution?
Thanks
…so problem solved
i have to call function mCustomScrollbars() opening tab… so i add before the function this:
$(document).ready(function() {
mCustomScrollbars();
$(‘ul.tabs a’).bind(‘click’, function(){
mCustomScrollbars();
});
});
You’ve done a wonderful job on this scroller!
I’m wondering if there is any way to have the horizontal scroller position begin at center… giving the user the option to scroll left or right when the page loads.
Thanks!
In order to change the initial position of the horizontal scroller, edit jquery.mCustomScrollbar.css and add a left value to the dragger. E.g.:
#mcs_container .dragger{left:50%;}
Also, edit jquery.mCustomScrollbar.js and add:
ScrollX();
right below ScrollX function.
Worked PERFECTLY – thanks again!!
When this piece I’m working on goes live I’ll post a link
explore.ironrange.org
Fun implementation of your slider – thanks again for the support!
@hansoloz cool
I cannot get the scroller to start at 200px instead of 0px, so the user can scroll left or right.
Adding a Left in the CSS for the dragger does nothing.
or maybe I’m placing the ScrollX(); in the wrong spot. In an earlier post you said to place it at line 142, which breaks the code, and is ‘before’ the Scroll function. so I’m confused. Please help.
Thanks so much!!
One more quick question
Is there any way to turn off the animation when the page loads and scrolls to center? In other words I’d prefer for the page to load with the content in the scroll area centered, rather than it scroll to center after after everything loads…
Thanks!
The best scrollbar plugin out there!
Thanks a tonne Malihu! Thanks!
Million internets to you!
Hi there.
I really love your script, it’s amazing!
Just one thing bothers me: The scroll speed depends on the length of the content since scrolling is done by positioning the dragger and then positioning the content depending on the dragger position.
So if we have a content of 1,000px height and a visible content with a height of 100px (which is also the height of the dragger container) the scrolling speed is totally different to a content of 500px height and the same visible height of 100px since the steps on the dragger container are the same but the content position refering to the dragger position is different. In fact, 1,000px of content height scroll 2x faster than 500px of content height if the dragger container has the same size.
See what I mean?
Is it possible to scroll not by positioning the dragger but using a given amount of pixels for each step? Or if it’s easier: Is it possible to position the dragger (when using mouse wheel and scrollbuttons) that it’s corresponding position of the content is stepping in a given amount of pixels?
I really would like to have the same scroll speed for different heights of content. That would make your script even better (at least for me).
Thank you very much!
The behavior is exactly as you describe and it’s the same with the browser’s native scrollbar. It’s basically how scrollbar works. To change that, would require a totally different script and I’m not sure if it would be good for usability or would work at all.
Thank you for your answer.
Didn’t ever notice that in my browsers. It always seems to me that the scroll speed is always with different heights of content.
I’ll try to find a way to change your script to scroll a certain amount of pixels when using the arrows or mouse wheel and post it afterwards if I succeed. For me it feels more natural this way.
Great script.
As a Flash guy, I think it’s kinda funny that all over again we all are getting excited about the ability to scroll, fade things, movement…but I digress.
I’m trying to learn jquery. Love this script. Have a unique requirement that I can’t figure out, but which should, I think, be relatively easy to implement.
I have set up a page with one horizontal scrollbar. The Div contains about 2o items, side by side.
I want to be able to load the page with the scrollbar dragger set to various x postitons. So, whereas the default of course is for the dragger to be at the left most side of the container (0px), I’d like a user to be able to arrive at the page with the dragger, for example, set 30% to the right, so that content item 7 of 20 (for example) is revealed; so that the content div has already partially been scrolled.
Anyone have an ideas about how to mark this up?
Basically, onLoad, I think I need a function that:
1. sets $dragger.position to (x)
2. triggers the scrollDownBtn event
This is above and beyond, but I suspect that I’m not the only one could use this funtionality. Thanks for any help.
To Follow up, my lame attempt to write this would be:
$(window).load(function() {
$(“#mcs5_container”).mCustomScrollbar.dragger.position=300;
$(“#mcs5_container”).mCustomScrollbar.Scroll;
});
Is that syntax even close?
The logic is right
The way to get what you want is:
Edit jquery.mCustomScrollbar.css and add a top value to the dragger. E.g.:
#mcs_container .dragger{top:300px;}
Edit jquery.mCustomScrollbar.js and add:
Scroll();
right below Scroll function. This should do the trick
I know the feeling, I’ve been a “flash guy” since for ever (I’ve done most of my js scripts in flash years ago), but it’s always interesting and fun scripting for the browser
when calling the scrollbar function on dynamically loaded content, the scroller will back to the start. any way to maintain the position while resizing?
In jquery.mCustomScrollbar.js, inside if(reloadType!=”resize”… conditions (horizontal and vertical), remove or comment:
$dragger.css("left",0);
$customScrollBox_container.css("left",0);
$dragger.css("top",0);
$customScrollBox_container.css("top",0);
I had the same issue and I commented the top = 0 for vertical scrolling. However I have dynamic expand/collapse buttons inside my content. If I collapse the dragger height gets calculated correclty but it does not scroll down correctly .. help!!!
Thx very very much for this nice Scroller…
It was so easy to customize it for my own needs. You can see the result on thegoriandreys.com
Greetings from Hamburg,
J. H.
Great
Thanks for sharing!
I am using a horizontal slider with very large images in my scroller. I would like the images to be sort of magnetic to auto stick to the image, so that the images center themselves? Has anyone done anything like this with your scrollers?
The scrollers are awesome! If I can only get this one function to work they’d be perfect for my use. Can I write an if statement based on dragger position? Is there another solution?
Thanks for your help!
Hi, a really great code! I work with the horizontal scroller but it breaks in my Internet Explorer 8! Also your horizontal scroller example on your site overflows in IE8. Do you know a quick fix?
SORRY, MY MISTAKE. No problem with IE8. I was calling the scripts in the wrong order.
I am having the same issue. The horizontal scroller works in firefox and chrome no problem but is breaking in IE 8 where I’m using it on my site and in the demo on this page. What order do the scripts need to be called Sebastian? Plz help me…
I just wanted to comment and THANK YOU for a really awesome jquery solution for horizontal scrolling. After some difficult (on my part mostly I’m sure) I was able to implement your plugin in a horizontal photo blog that I came up with. Here it is if anyone’s interested in testing it for me: http://blogsforphotogs.com/horizontal
Please ignore the fact that I use jScrollpane for the vertical scrollbars on the text blocks. I needed to be able to turn off the horizontal scroll on mobile devices but keep the scrolling on the text boxes, so that was the easiest way I could find to implement it. I also wasn’t sure if nexted scrollbars would work very well so I didn’t want to risk it.
*nested not nexted.
Thanks a lot for sharing your implementation and for your kind comments Theresa
Thax for your work this is really cool~!
Excuse me, do not prompt the implementation of a permanent ajax load data at a bias of scrolling to the specified number of pixels. The fact that it does not do, say here’s the code:
$(function()
{
var settings = {
//showArrows: true,
animateTo:true,
animateInterval:30,
animateStep:45,
maintainPosition: false
};
var pane = $(‘.scroll-panel’)
pane.jScrollPane(settings);
var api = pane.data(‘jsp’);
var i = 1;
$(‘.scroll-panel’).bind(‘jsp-scroll-y’,
function(event, scrollPositionY, isAtTop, isAtBottom) {
if(scrollPositionY >= (($(“#content-wrapper”).height() – $(“.scroll-panel”).height()) – 60)) {
$(“#content-wrapper”).append(“This is paragraph number 123″);
api.reinitialise();
}
});
});
at re-initialization of the scroll “jumps” up …
I can not find solutions to the load data like Twitter, please help with the code. Thank you in advance.
Hi There,
I’ve just worked this into a site I’m doing and it looks great. However I tried to do the fix for iPhone you suggested to a couple people above, it doesn’t work. This is the code that I tried, I placed at the end of the jquery.mCustomScrollbar.css file and I’ve tested just setting a background colour for the div and it is responding. Just that it doesn’t give me a regular scroll bar. Any idea what I’m missing?
@media only screen and (max-device-width: 480px) {
#mcs_container .customScrollBox {
overflow: auto;
}
#mcs_container .dragger_container{
display:none;
}
}
In addition to altering css, you’d need to skip mCustomScrollbar function call. You can do this with a simple js condition. Check here:
http://snipplr.com/view/31607/iphone-ipad-ipod-detect/
Hm, I’m having trouble implementing this iphone fix. What exactly is the code you use, that you put in between the below, to skip the mCustomScrollbar function call? And where do you put this? Sorry if this is a dumb question, I don’t know js/jquery well at all….Really appreciate your help!!
jQuery(document).ready(function($){
var deviceAgent = navigator.userAgent.toLowerCase();
var agentID = deviceAgent.match(/(iphone|ipod|ipad)/);
if (agentID) {
// do something special
}
});
Hi Malihu,
Thank you for your great work and generosity with this script. I’m also confused as to how we would skip the function. Your help with this would be greatly appreciated. I was able to add detection to my CSS, but can’t for the life of me get the script you linked to, to “skip the function” so I can see default iPhone or iPad scrollbar. Thanks in advance.
Was wondering how to get rid of the scroll bar if needed. I seen in the article where it says to add hide function after the call, but I’m not that great with javascript yet, so if you could show me the code with this included that would be awesome. Also, thanks for this great plugin, it works beautifully.
Keep up the good work.
Hey man, really awesome work. thanks for that.
The only thing that concerns me a bit is the markup.
Wouldn’t it be possible to only create a simple element, add a specific class and make the plugin do all the heavy work from there? like
<ul class='scroller'>
<li> item 1 </li>
<li> item 2 </li>
<li> item 3 </li>
<li> item 4 </li>
</ul>
then the plugin itself would create all the structure, containers and handlers it is needed?
That would really make lives really simple and only let the developer worry about markup that matter within the page?
But congratulations again it is a really awesome pluging
This is an excellent plugin, thank you Malihu for building it and supporting it.
Having difficulty tracking down why we are getting the error below. Is this common?
Error: $dragger.position().top’ is null or not an object
Not a common error. Would need to check your implementation.
I had this error in the beginning, in my case problem was that I tried to apply scroll to a div that was not present in some cases.. I added a condition checking divs on each page and all is working fine now..
hope it helps..
regards
Hello,
really great work.
Can you also provide it in mootools?
If you do I will spent a big coffee for you …
cheers
Hi joe,
Unfortunately I don’t code with mootools and I don’t have any availability at the moment to see if I could convert the code from jquery. I’ll definitely update the existing code though, in order to make it compatible with mootools scripts and plugins in case they exist on the same document.
Is there a way to make it so on button can load multiple dynamic contents boxes. For instance I want to make one button load two dynamic content html’s into different divs one is for the text and another is for image. Is that possible?
Also they Have to be in different divs because one scrolls down and the other one doesn’t.
If anyone could help me out I would eternally grateful.
Thank you,
Christopher Lee
Fantastic plugin. I am going to use it in my upcoming personal blog. I have a request which is more of a feature request. It would be great if you can provide a way to position the buttons at a place different from the container
A doubt about the horizontal scroller. Is there any way to hide the left button if the content is on the edge of the left bank, at the beginning of the content?
Thanks and grats for the great job!
Hi, I seem to have a js conflict because I had your scroller worker fine before I put into the index page that has another js for a slider. Im not too familiar with js. Can you tell me how to fix the conflict?
Thank you Malihu.
Here is my webpage.
Hello Eddie,
Try to remove the unnecessary 2nd jquery in your code:
<script charset="utf-8" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
which is located inside <div id=”container”>
I’ve added this to a Web program I use, but am having a little difficulty with. It does scroll, but it seems to have a very long delay. It’s like it reloads the position of the div once I stop scrolling.
My ‘content’ was already inside a classed div and I’m wondering if the script has to keep loading the changes everytime. At least its the way it seems.
Example of my content –
This is also called from a PHP Echo statement which I gather could also be the culprit?
From example above –
Code not too liked on here! lol
http://pastebin.com/CQGpvCq5
Is it possible to have some links inside the scroller control which links to the a particular topic of the entire content?
Its not working for me..
Is it possible to do the function with manual onclick trigger to go to that particular topic.. ? please help me
I apologize in advance if this question is obvious, I’m a novice trying to navigate as I go. I’m using the scroller for something like a news feed, so ideally the content inside the scroller would load from a separate XML file that my even-less-code-savvy colleagues can edit.
Is it possible to load that type on content inside the scroller?
it’s have a big bug in ie6, when I using the instead of the , and use the float:left, the horizontal scrollbar can’t not be work.
Nice jquery
But when viewed on IE 6 scrollbar and contents is missing.
What may be the problem?For IE 7 & 8 it is working fine.
@Enlive @jackyon
I don’t test/support ie6 at all.
Hey and thanks for your fantastic plugin!
I have a question: is it possible to use mouse move tracking instead of dragging to scroll the content ? Thanks
Thank you so much for the great scrollbar!
One question: I’m using the horizontal scrollbar to scroll through some images. Everything is working great, except that when I go to the page with the scrollbar, all the images flash on the page for a moment while the script loads. Is there a way to avoid this? Here’s an example of what I mean:
http://bazsarozsa.com/test/ss11.html
As you can see, it displays the hidden images for a moment before loading. Any thought you have on how to work around this would be great. Thanks again!
Best, Larissa
Hi,
Great scroller. I’m having trouble with it – the CSS looks great but the scroller doesn’t function. Could I ask you to take a minute and look at my source on http://www.papastronsay.com/prayers/index.html and see if I’m doing anything obviously stupid? I occasionally get $dragger.draggable is not a function from firebug but it usually doesn’t happen.
Not to waste your time, would it be handy to provide a simple working sample page I can just copy into my site and work on? Just following your instructions or copying your demo page doesn’t work for me.
Thanks so much.
Hi,
Use $(window).load() function instead of $(document).ready() to call mCustomScrollbar function and load jquery.mCustomScrollbar.js after.
It’s also better to move those in the bottom of your html just before the closing body tag.
Check the final step of the “how to use it” section above.
Thanks, it is coming working now
Hi,
first of all great plugin! I have a question, i read all the comment but i didn’t find the right answer. I have a log content inside the div with your scrollbar, and i would like to place many anchor that point to differen part of that div. I can do that? At least is possible to add something like scrollTo() to your plugin?
Thanks a lot!
I haven’t implemented a scroll-to feature yet, so there’s no “easy way” of accomplishing such behavior. At least not without writing an additional more or less complex function…
Ok, thanks…maybe i’ll try, but i’m sure i won’t have success (i’m not so good writing directly in js)…Thank you anyway
I’d also like to use a scrollTo function if some kind person wants to write it. Maybe I’ll try to write it myself some day.
Thank you for making this, it is very good stuff.
I’m using the vertical scroll bar with the buttons.
I love it but I’m trying to set a fixed scroll movement for the buttons.
Lets say that I want to scroll with each click, 50px down. Can this be done? How?
Thank you!
You may want to think about changing your class names from .content and .container to something more unique (scroll_container, scroll_content?), given how common those names are used elsewhere in most CSS frameworks as wrapper divs, which can mess with the ease of implementing your script.
Very nice effect by the way.
Hi.. can i change the image of circle to any other in the scroller?
I am using the mcs4 container tag code..
You can use pure css or any image you want to shape and style the .dragger.
In the demo, the #mcs4_container circle dragger is done by utilizing css3 border-radius property, without the need to use an image
Thanks a ton man.. its really awesome and simple to use.. Great going..
Cheers !!
Hey man, awesome code. One quick question. Any tutorial on how to customize the scrollbar or should i just mess around with the CSS file and see what i can do. Also, does this use CSS3? I am only vaguely familiar with the new CSS, as its been years since i’ve done heavy coding.
Hi Mike,
Basically you can do almost anything you want with css… just mess with it
You can use css3 to make pretty cool things like rounded corners, shadows etc. without using images
In the demo all the scrollbars except the one with the horizontal image-strip are customized purely by css, so you can get an idea of what you can do just by checking it.
You can of course use images that work better by setting the scrollbar height/width adjustment to fixed (to avoid image stretching).
Hi there, this is truly a great plugin!!
I would like to know if there is a way to control the horizontal scroller direction and make it scroll from right to left.
Also, I know others already mentioned it before, but I really think a scrollTo option can be great addition.
Thanks!!
Sahar
Hello, great work this plugin!
I came here to say that I found a bug on it, but fixed too.
The problem was that sometimes, when the scrolling was disabled it still scrolling the content. Making divs, height about 200px, be scrolled 3000px and blocks it to came back.
The solution was putting inside the functions Scroll() and ScrollX() a verification in order to check if the scroll is enabled: “if( $dragger_container.is(‘:visible’) )”.
I don’t know if it’s correctly, maybe this treatment is in another place.
Anyway, thanks for your work! XD
Hello there,
First off let me thank you for making this script available to all. I am sure I am not the only person who finds this very useful.
Another reason why I am sending a message is to ask for you input on this minor issue that I am having after trying to put the scroller inside a lightbox. The website that I am developingis running in WordPress and most of the navigation bring the user to a lightbox. The lightbox contains a batch of images (usually 5 images) and that is where I used the scroller. So here’s the problem: Since I put the scroller inside a lighbox, I was not able to make use of the window.load event. Instead, I used:
$(document).bind(‘cbox_complete’, function(){
$(“#mcs5_container”).mCustomScrollbar(“horizontal”,900,”easeOutCirc”,1.05,”fixed”,”no”,”no”,0);
});
Colorbox is the name of the lightbox plugin that I use. I used the bind event for the purpose of firing the scroller script after the lightbox or the colorbox loads. The problem is that it loads even if the images are not done loading.
I tried searching the net for workarounds but I found none and am now so desperate finding a solution. At first, I was thinking that it’s a browser issue but then I found that the “early” execution of the scroller script is the one causing the problem.
Please, if you know what the solution is, I will be forever grateful..
Thank you once again and I look forward to hearing your feedback.
Best regards,
Bien
Hi there,
Absolutely love the script, been trawling the internet for a while looking for customisable scroll bars, found this to be the easiest and most customisable one out there….. however I seem to have picked up a problem; I’m fairly sure its to do with the initialising the scroll bar on the window load, but I have the scrollbars appear, then (once loaded I assume) disappear again, if I remove the $(window).load(function) the scroll bars appear and then dont disappear, which led me to believe its to do with this. Is there anyway to stop this occurring, or hide them quicker so they are not noticeable?
$(window).load(function() {
$(“#cont”).mCustomScrollbar(“vertical”,400,”easeOutCirc”,1,”auto”,”yes”,”yes”,10);
});
http://imageshack.us/photo/my-images/821/scrolla.jpg/
Thanks, and great work
Hi, me again.
Also when I load up my content dynamically and scroll to the bottom of the content box, there is a massive gap as the end. Is this in one of the settings somewhere? I’ve checked the CSS for margins and padding etc but cant find anything that would be effecting it.
Thanks
Hi again,
Ignore both the above, all working now
Hello sir,
forget my earlier question. I just solved the problem by setting a fixed width for all the dynamic images. the problem only occurs when there’s no defined width (however this is still not acceptable by the project I am doing, I will just justify it to my client).
I found another problem. I was checking the browser compatibility of my project when I found this one issue in Safari. All is working well in Safari except that the horizontal scroller that I am using displays the standard horizontal scrollbar(by standard I mean a scrollbar that you usually see in browser when you have contents occupying big width and the browser displays scrollbar). Have you guys encountered this problem? or have you already tried opening your scroller-using websites in Safari?
Please please help. I will appreciate your inputs.
Bien
Sir,
Forget my Question # 2 above. I solved the problem. I saw isHrisov’s comment above and aplied it to horizontal scrolling: I put this:
$customScrollBox.css(“overflow”, “hidden”);
$dragger_container.css(“display”, “block”);
right after:
if($customScrollBox_container.width()>visibleWidth){ //enable scrollbar if content is long
thank you so much for this ass-kicking script! keep on rocking!
“Ignore both the above, all working now
”
Ggnn.. I hate when people do this. Would it be so hard to provide an answer?
I had the same problem (scrollbar disappearing after load). The problem was that my content (text) was in a DIV container which himself had a determinated height (css) property. I simply removed the height so this JQuery plug-in could do the work, i.e. get the proper height in a dynamic way.
Hope this helps.
Thanks for taking the time to post your solution Justin
Hey guys,
Any fix for IE9 – everything breaks
…
Cheers
Ken
Hi duncan,
The plugin works well on ie9. The demo works perfectly well for me (re-check your implementation to see if any css property breaks the script).
Thanks for the terrific plug-in.
I think I found a small bug and a fix for it: the mouse-wheel event hander should be detached even when no scroll bar is necessary because of the short contents.
This causes a problem on Chrome (mine is 12.0.742.91) when the stuff to which the customized scrollbar applies is dynamically generated. You can see it when the following conditions hold:
- the whole page is long to have the browser scrollbar
- the area using the lib gains its stuff dynamically
- the area has some long contents to make the customized scrollbar appear
and then is replaced by some shorter to make the scrollbar disappear
- the page scrollbar from the browser is not at its top
- now using the mouse wheel on the area messes up its contents.
Hope this helps.
I love the plugin, but I am still trying to get it work on my wordpress project. The problem I am facing now is that it only works when I place the loading tags for the scripts (jquery.min.js, jquery-ui.min.js, jquery.easing.1.3.js, jquery.mousewheel.min.js”) below the
But when I do that, one of my wordpress navigation plugins stops to work…When I move the “script”-tags ABOVE the wordpress tag
The navigation plugin I am referring to is this: http://www.designchemical.com/blog/index.php/wordpress-plugins/wordpress-plugin-jquery-vertical-accordion-menu-widget/
Any idea to how I can resolve this problem?
Hi,
if you want to add the jQuery library to WordPress you need to use the enqueue_scripts function. Otherwise when you load jquery manually it will overwrite any jquery plugins, which have loaded previously.
If you are going to stick with the jquery menu plugin then this automatically loads jquery for you so you can include the above code but just miss out the actual jquery file
Thank`s for your great job!
I’m using vertical bar in this project:
http://www.portaldocolaborador.com/cartaoclubemais/regulamento.html
but I don’t understand why dragger line (and dragger button) aren’t visible.
Can you help me?
Hello Fabio,
Had a quick look into your document with firebug and seems that .container div overlaps and hides .dragger_container. Try to change your css properties of either one of these.
Hi!
First of all, great work, very user-friendly and all.
Now I’m trying to combine the jQuery resizing with this, and I’ve got an annoying problem.
If I resize my box higher than my content, the scrollbar disappears.
(In my case, I was like: neat! They even thought of this case! Though I’m also curious if I can make the scrollbar somehow remain visible.)
The problem, is that after the scrollbar disappears, and I use my mousewheel, the content suddenly disappears too!
I hope you can help me with this.
Hi malihu,
Great work! Just one question – is there a way to make the actual content draggable with the mouse without additional plugins?
Not really. It would probably need the same amount of code anyway.
On a live production website you could of course create a single js file containing all plugins (less html requests) and minify it. You could also download a custom built jquery ui containing only the functions your scripts need (less file-size).
Excellent work Malihu!
Everything is working just fine, but I have already talked about problem and I can’t fix it :/
http://jquery.design-boss.com/beta
Take a look at above example, as you can see, when you open “REFERENCE” tab, the scroller isn’t showing properly, but once you change window size the scroller shows it self. I was trying everything that you said above, but still can’t figure it out.
I’m using this code for showing/hiding the content:
$(“#menu ul li a”).click(function() {
var menuVal = $(this).attr(“class”);
if($(this).hasClass(“current”)) {}
else {
$(“#content, .contentWrapper”).hide();
$(“#content, .contentWrapper.content-”+menuVal).fadeIn(500);
$(“#menu ul li a”).removeClass(“current”);
$(“#menu ul li a.”+menuVal).addClass(“current”);
}
});
Help!
Ok, I’ve fixed it, but it doesn’t show scroller immediately, but it delays for like 0.5 second.
I’ve done this:
$(“#content, .contentWrapper.content-”+menuVal).fadeIn(500,function(){$(“#mcs5_container”).mCustomScrollbar(“horizontal”,500,”easeOutCirc”,1,”auto”,”yes”,”no”,20); });
Is it possible to make scroller show immediately, so it doesn’t lag?
The 500 milliseconds delay is due to the fact that you call mCustomScrollbar as a callback after the fade-in animation is done (your fadeIn() lasts 500 milliseconds, thus the half-second delay). You can try putting mCustomScrollbar function call outside of fadeIn() like this:
$(“#content, .contentWrapper.content-”+menuVal).fadeIn(500);
$(“#mcs5_container”).mCustomScrollbar(“horizontal”,500,”easeOutCirc”,1,”auto”,”yes”,”no”,20);
to see if it works.
This works, but the “.dragger” wont show up… I can see the dragger line, but the dragger itself wont show up. I’ll try removing all other plugins and double check the CSS/JS code.
Looks like it’s working fine now. I’ve fixed the dissapearing dragger using default css/js for scroller.
Thanks Malihu for your help, I really appreciate it!
excellent, very nice scrollers. thanks
Fantastic scrollbars! Easy to implement on my webpage and quite customizable. Something I haven’t been able to do, though, is enable a scroll when simply hovering over the scroll buttons, so that a click is not required. Do you know how we can add this functionality? I tried adding code such as onmouseover=”$(“.scrollUpBtn”).click();” or onmouseover=”BtnsScroll(‘down’);” but none of it seems to work.
Thanks!
I too have tried (not very hard, I must admit) to get the roll-over/mouseover to trigger the
.click()event.I tried adding both this…
$('.scrollUpBtn').mouseover(function() { $(this).click(); });…and explicitly, ie. not using this…
$('.scrollUpBtn').mouseover(function() { $('.scrollUpBtn').click(); });…after the
$("#id").mCustomScrollbar(...);is initialised. But, without success.The
.mouseoverevent triggers as/when it should but the simulated.click()isn’t carried out it seems.Anyone solved this? Someone must have done this already?! Please share!
(I see my second ‘explicit’ effort wasn’t all the explicit, as it selected all elements of the
.scrollUpBtnclass, so ignore that.)Since that I have tried replacing
.click()with$(this).trigger('click');.And…
$('.scrollUpBtn').bind('mouseover', function() {$(this).trigger('click');
});
…again both without success.
The
.mouseoveris still working, it’s just the click that isn’t?!*&^@#Hi,
Thanks for this awesome scrollbar! I have encountered a problem though. I use this script with lightbox (the original one), and I can’t get both to load. I’m new to javascript, so I guess it’s a simple problem, but I can’t get it to work.
This is what i use in my header:
Do I have to change some onload event or something like that? As I said; I’m new to javascript, so if you provide a solution, please write where I should put it etc.
Thank you in advance!
Hello Adam,
If I’m not mistaken, the original lightbox (or lightbox version 2) uses prototype/scriptaculous. That might conflict with jquery. I’ll definately try to find some time to update this script to be more compatible with other js libraries but in the meantime try this:
In your document, wrap the script with (function($){… and …})(jQuery); making it like this:
<script>
(function($){
$(window).load(function() {
$("#mcs_container").mCustomScrollbar("vertical",400,"easeOutCirc",1.05,"auto","yes","yes",10);
});
})(jQuery);
</script>
You may also need to add jQuery.noConflict(); right before (function($){. Depending on the order you load the libraries (prototype, jquery etc.), adding this might help.
Edit jquery.mCustomScrollbar.js and do the same by adding (function($){ as the 1st line and })(jQuery); as the last line of the script.
Hope it helps.
Hi,
Works like a charm, thank you so much! You saved me there.
Hi again,
The previous problem is solved, thank you, but I got problem with extremely fast scrolling in safari on OSX. I tried the modified jquery.mCustomScrollbar.js file, but with no luck. I tried to change the mousewheelDelta to 1 just to try, but then I got an extremely slow scrolling speed in chrome. So, how do I solve this problem?
I also got a question to you about this script; is it possible to add a auto scroll when the user moves the cursor from left to right etc.? For example; if the user slightly moves the cursor to the right, the images (or content) scrolls to the right, etc. Is this possible to implement?
Thank you!
hi.
i added the scroller to 2 pages in the same exact way.
for some reason it works in this page but not in this page.
can you tell what’s the problem?
thanks
oren
hi…
sorry in advance if m here with so stupid problem. Its second time m using this awesome jquery. It worked fine in my last project but this time i have combined it with an gallery that is slidable. My problem is that this jquery works fine when page is loaded but after the content are slided and when come back to the same content where i have used mcs scrollbar jquery, this scrollbar jquery stops working. can some one figure it out? I m using “gallriffic” jquery for image gallery and also have tried changing placement of queries…..
I’ve just started using this plugin (it’s awesome!) however, I’m finding that sometimes it doesn’t scroll to the bottom of the content. It may scroll 80% down then the scroller reaches the end, however the bottom of the content is not visible.
Any ideas what could possibly be causing this? Thank you!
P.S. Sorry for posting this twice and to a reply – I don’t see where to add a new comment.
Is there any way to define scroll direction? Ie. is it possible to have a horizontal scrollbar, that goes from right to left, as opposed to left to right?
I would love to hear a reponse on this as well.
Similar to this, is it possible to have a horizontal scrolling section that starts at the end of the content, with the scroll bar all the way to the right. Can we set the starting position of the scroll bar?
Thanks, and great work.
that’s awesome. Thank you
This is great! Thanks so much for sharing your hard work. I had a quick question about the mouse hand showing up when you rollover the scroll bar. In your demos they show up, but for some reason the one I’ve built shows no mouse cursor change. Any clue what I missed?
Thanks!
Steve
@steve
Try setting cursor: pointer in the css on the proper element!
Awesome control. The dragger won’t display in FF5 though. I haven’t tried it on any earlier versions as I just upgraded my machine to FF5, but it definitely doesn’t display the dragger. The scroll still works with the up/down arrows and mousewheel though.
I used the scroller in mcs_container(the first example). The only difference between my code and your example is that there are additional divs inside the “content” div. Could this be causing the FF5 dragger issue?
Has anyone else had problems displaying the dragger in FireFox?
The plugin works as expected in Firefox 5 as well on previous versions, so the issue you’re experiencing must have something to do with your implementation. You can check the demo on this post on ff5 to confirm that it works.
Hi Malihu
First of all, good work with the plug-in. There seem to be numerous custom scrollbar plug-ins out there, but I really like how customisable yours is via CSS.
I’ve been trying to use your plug-in on a project, but I’ve hit a problem – I’ve searched extensively and scoured all the previous comments here but I don’t think anyone else has mentioned this.
The problem is, if you have a form containing text boxes etc within the scrollable content, when you tab between form fields the custom scrollbar html structure gets messed up if you tab to a field that is initially out of view.
You can replicate this problem easily – just add a inside your “content” div, obviously with enough content to activate the scrollbar. Put a text field at the top of the form and another at the bottom. Click in the first text field so that it has focus, then hit the tab key to move to the next text field and you’ll see what happens.
I can tell you exactly what’s happening and why – I just haven’t managed to find a solution to this yet! What happens is when the second text field gains focus, because it is out of sight within the overflow: hidden div, the browser automatically re-positions that div to bring the field into view. Because the browser does this automatically, no jQuery code is executed, so the scrollbar doesn’t scroll. In fact, the scrollbar div is moved up by exactly the amount required to bring the text field into view, so it disappears off the top of the content container (or at least partially disappears, depending on how much content there is).
I think what is needed is to somehow capture the fact that the next field is out of view from each field’s blur and / or focus event, and force the content to scroll by the amount required to bring that field into view, before the browser automatically shifts the overflowed div. I don’t know if it’s possible though to prevent this automatic browser behaviour. Of course this needs to work in reverse as well, so when using shift-tab to go back through form fields the content will scroll back up.
If I work out a solution to this I’ll let you know with another post; in the meantime I’ll leave it with you.
Cheers.
Hi again
Sorry just wanted to add to my previous comment – this seems to be an issue with every scrollbar plug-in I’ve tried, so it’s not just yours! But if you can find a solution maybe it will help others.
Cheers.
I’m having the same problem as Sam and Eric above with IE7 setting the width on “horWrapper” to “999999″ and then not setting the new value once the content has loaded.
@Sam: In future, instead of saying “Hi, don’t worry. I fixed the issues.” why don’t you posted how you fixed it so other like myself won’t have to waste everyones time with re-posts of the same problem??
Im not that great at CSS and was wondering if you would have a CSS snipet on having on a horizontal scroller a left and right arrow appear righh before and after?
The same thing as your vertical examples!
Thanks, and great work!
Hi again Malihu
I’ve solved the problem with applying your scrollbars to form-based content, so just thought I’d post an explanation in case it’s helpful to you or anyone else.
First thing is the html needs to be re-arranged slightly – because you have the “dragger container” div inside of the “customScrollBox” div, when you tab between form fields and the browser repositions the content, the scrollbar moves with it. There’s actually no need for the scrollbar to be inside that “overflow:hidden” div, so just move it outside. I actually think the best way is to define the scrollbar div first, and float it right instead of left. Obviously it may be necessary to fiddle with CSS a bit to maintain the page layout depending on the situation. So I’ve changed the html structure to something like this:
… content …
and the CSS for “dragger_container”:
.dragger_container { position: relative; float: right; width: 0px; height: 300px; ….}
Once that’s done the scrollbar no longer gets “lost” when the browser repositions the content, but of course it still doesn’t scroll without some extra jQuery code. This was actually pretty simple to implement once I worked out what was going on with the rest of your code.
Basically if the browser has moved the content in order to bring a form field into view, you need to move the “dragger” by the equivalent relative amount. So firstly you need to know the ratio of the scrollbar size to the content size to determine how much to move the dragger. After studying your code I realised you’re already doing this calculation, but – here’s a note on variable naming (as a long-time developer
) – you put this ratio value into a variable called “scrollAmount”. When I saw this I figured it contained a pixel amount value to be scrolled, but it doesn’t. So I’ve renamed this variable “scrollRatio” which makes a lot more sense (to me at least).
So once you’ve got the ratio, determining how much to move the dragger is pretty much the reverse of what you do to work out how much the content should move when the dragger is dragged, i.e.:
1) get the amount the content has moved (which is just it’s top position);
2) negate that value, as obviously the dragger should move in the opposite direction to the content;
3) divide by the “scroll ratio”.
This needs to happen whenever a form field gets focus, as that’s when the browser has potentially repositioned the content. So to implement this I added the following to the jQuery code just before the Scroll function (the first line replaces your “scrollAmount” calculation – just to be clear):
var scrollRatio = (totalContent – (visibleHeight / bottomSpace)) / draggerContainerHeight – draggerHeight);
$(‘:input’, $customScrollBox_container).focus(function() {
var contentTop = $customScrollBox_container.position().top;
var newDraggerPos = (-contentTop / scrollRatio);
$dragger.css(“top”, newDraggerPos);
});
This could probably be done in one line without all the extra variables, but just wanted to make it clear what I’m doing.
Cheers.
Sorry my new html structure got lost / interpreted – should’ve known that would happen
.
Here it is again, hopefully this will post successfully:
<div id=”myDivToApplyCustomScrollbar”>
<div class=”dragger_container”>
<div class=”dragger”></div>
</div>
<div class=”customScrollBox”>
<div class=”container”>
… content …
</div>
</div>
</div>
Awesome Pete,
Thank you!
Thanks for taking the time to post this. I’ll definitely implement it on the next update of the plugin
Any chance you can help me get this fix working before you update?
It’s not working for me (the html/css fix is fine, the jquery is where I’m having trouble), Dreamweaver says there’s a syntax error but I’m not good enough with jquery to figure it out. The program is showing the issue is with the ” / bottomSpace)) / ” part of the code (I understood where to put it, and to replace the line mentioned by the author). Any help would be appreciated, I’m using this for a WordPress site and it was working perfectly until I got to the “contact” page with the form!
Fantastic work though, I really appreciate you sharing the code!
I’m trying to integrate the Custom Content Scroller in a WP E-Commerce Shopping Cart widget and there’s definitely some issues where the content either does not scroll at all or it scrolls but in the wrong direction. I’m wondering how feasible it is to incorporate this into a tight PHP script? The page in question is for a Rock Fashion site and can be viewed here.
Hi Malihu,
Thanks for sharing this and for your continued support.
Any ideas how to load new content dynamically when scrolling reaches the end? What i want to do is when scrolling to the bottom load new content into the page and readjust the scroll bar of course?
Regards,
Khaled
Hey Malihu!
Your blog and your posts are pure awesomeness!
Thanks to your ass kicking codes, files and tips, I’m able to design like a boss. My soon-to-be website has professional ass kicking looks, and I’m 100% internet self taught!
You rock.
Please make more cool posts like these.
Take care.
Hi,
I have a question that involves cross-browser compatability and the user’s default font setting for the browser which they are using. If a users browser font size is set to be larger causing text to overflow, how do you have the dragger appear and reappear depending on the scale of the box?
If you get the scroller going in reverse check lines 318 and just
targY = Math.abs(targY) * -1;
to ensure it’s negative since for some reasons with dyn loaded content (esp. images) the targY stuff ends up being positive instead of neg.
It worked for me!
Thanks a lot!
Hey,
I just don’t get it.
I try to get this code into wordpress, but it doesn’t work.
here’s my code:
[somepics....]
….
the scripts in my :
<script src="/js/jquery.easing.1.3.js” type=”text/javascript”>
<script src="/js/jquery.mousewheel.min.js” type=”text/javascript”>
…
i noticed that wordpress uses the “enqueue script” function, but I don’t understand how it works.
and that’s before the tag:
$(window).load(function() {
mCustomScrollbars();
});
function mCustomScrollbars(){
$(“#mcs5_container”).mCustomScrollbar(“horizontal”,500,”easeOutCirc”,1,”fixed”,”yes”,”yes”,20);
}
/* function to fix the -10000 pixel limit of jquery.animate */
$.fx.prototype.cur = function(){
if ( this.elem[this.prop] != null && (!this.elem.style || this.elem.style[this.prop] == null) ) {
return this.elem[ this.prop ];
}
var r = parseFloat( jQuery.css( this.elem, this.prop ) );
return typeof r == ‘undefined’ ? 0 : r;
}
/* function to load new content dynamically */
function LoadNewContent(id,file){
$(“#”+id+” .customScrollBox .content”).load(file,function(){
mCustomScrollbars();
});
}
…..
so maybe you can help me with that one.
Greets, Tim
Hi Tim,
A way to properly include jquery as well all the necessary scripts in your wordpress is this:
In your wp theme directory you should have a functions.php file. Edit this file and add the following function at the top:
function init_js(){
if(!is_admin()){
/* jquery (google CDN) */
wp_deregister_script('jquery');
wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js');
wp_enqueue_script('jquery');
/* jquery UI (google CDN) */
wp_deregister_script('jquery-ui-core');
wp_register_script('jquery-ui-core', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js');
wp_enqueue_script('jquery-ui-core');
/* easing */
wp_register_script('easing', get_bloginfo('template_directory') . '/js/jquery.easing.1.3.js','', '1.3', true);
wp_enqueue_script('easing');
/* mousewheel */
wp_register_script('mousewheel', get_bloginfo('template_directory') . '/js/jquery.mousewheel.min.js','', '1.0', true);
wp_enqueue_script('mousewheel');
/* custom scrollbar */
wp_register_script('mCustomScrollbar', get_bloginfo('template_directory') . '/js/jquery.mCustomScrollbar.js','', '1.0', true);
wp_enqueue_script('mCustomScrollbar');
}
}
add_action('init', 'init_js');
This includes jquery and jquery UI (one time only) from google CDN and the rest of the scripts from the directory js inside your themes folder (you can change the path to where your scripts reside).
You should also not forget to link jquery.mCustomScrollbar.css in your header.php as well as to add the script call in your footer.php or on the template you need.
this plugin doesn’t seem to work on firefox 5
Hi, did you checked the actual demo or another implementation of the script? The demo is working well on Firefox (including version 5).
Love the scroller, works awesome.
I’m having a slight issue with it loading in ie7. For some reason the scroller appears on the right side and not the left. Any suggestions? Here’s the code I’m using:
http://www.mstechsolutions.com/tmp/IE7.png
http://www.mstechsolutions.com/tmp/CORRECT.png
/* content block 1 */
#mcs_container{position:relative;}
#mcs_container .customScrollBox{position:relative; height:100%; overflow:hidden;}
#mcs_container .customScrollBox .content{clear:both;}
#mcs_container .customScrollBox{position:relative; height:100%; overflow:hidden;}
#mcs_container .customScrollBox .container{position:relative; width:320px; top:0; float:left;}
#mcs_container .customScrollBox .content{clear:both;}
#mcs_container .customScrollBox .content p{padding:0 5px;}
#mcs_container .customScrollBox .content p.alt{padding:10px 5px; margin:10px 0;}
#mcs_container .customScrollBox img{border:5px solid #fff;}
#mcs_container .scrollUpBtn,#mcs_container .scrollDownBtn{position:absolute; display:inline-block; width:11px; height:5px; margin-right:12px; text-decoration:none; right:0; filter:alpha(opacity=100); }
#mcs_container .scrollUpBtn{top:0px; background:url(../images/mcs_btnUp.png) center center no-repeat; left:0}
#mcs_container .scrollDownBtn{bottom:0px; background:url(../images/mcs_btnDown.png) center center no-repeat; left:0}
#mcs_container .scrollUpBtn:hover,#mcs_container .scrollDownBtn:hover{filter:alpha(opacity=60); -moz-opacity:0.60; -khtml-opacity:0.60; opacity:0.60;}
#mcs_container .dragger_container{position:relative; width:1px; height:149px; margin:6px 0px 0 5px; background:#cbbfbb; cursor:pointer;}
#mcs_container .dragger{position:absolute; width:12px; height:15px; background:url(../images/scroll-dragger.gif) no-repeat; text-align:center; line-height:30px; overflow:hidden; cursor:pointer; left:-4px}
#mcs_container .dragger_pressed{position:absolute; width:9px; height:16px; background:url url(../images/scroll-dragger.gif) no-repeat; text-align:center; line-height:16px; overflow:hidden; cursor:pointer; cursor:s-resize;}
I am definitely new to all this..
Does this work with floated elements?
I’ve just started to implement it. It seems to mess things up when my content is floated and reached a certain size. Also doesn’t seem to work in firefox ver5(I don’t know about the lower versions). The arrows start disappear when I have my container scroll div floated. It seems to do the same even when I keep the whole script and css intact.
Maybe I could also be doing it all wrong.
It’s such a great look and the fact that you can customize it makes it so convenient.
However I have yet to understand how exactly to use it.
Does the container for the scrolling area have to be relative or be positioned relatively or absolutely as shown in the examples?
Speaking of which is there a way to center the track like so that the button is like walking on a line so to speak?
Sorry another question is there a way to change the draggers hover state?
This is a great-looking plugin and the demo functions beautifully. I’ve been trying to implement it here :
http://whitelemondesigns.com/test/about.html
But I just can’t seem to get it to function. I’m not an experienced javascript or jquery user at all; I assume there’s some basic thing that I’m not doing. Could I have some kind of javascript conflict?
Any help at all would be greatly appreciated.
Hello Greg,
Check the final step on this post to include the actual custom scrollbar plugin and the function that calls and configures the scrollbar.
Thanks… I incorporated that… but it’s still not working. Sorry to bother again, this is actually my first foray into javascript. Any further insight?
Hi there,
Thank you for posting this! It’s just what I was looking for. I’m in the process of implementing your code (the horizontal scroller) and have a few questions:
1) Is it possible to add a function that enables scrolling with the arrow keys? How do you do that? (I’m a newbie)
2) As of today, does the scroller work on the ipad and iphone? If not, how do you add a condition (I saw that in the comments above)?
You can my work in progress here (please note, not all links are working yet, it’s just a mock-up with the scroller): http://industriallosangeles.org/NEWila/sites/hughes.html.
Any help you can give would be most appreciated. Again, thanks for all your hard work!
Hi, great plugin, thanks!
I modified the css for my project.
I have a question: the arrow buttons work fine on iPad?
I have only an android platform and I seen that the arrow buttons don’t work (but the slider works fine if you touch). Have you any suggestion?
You can try my site at this link
Thanks
I’m betting the arrows won’t work on iPad, simply cause the only event that really works on those devices is click, which is not efficient for this plugin (as you wanna press to scroll). Android supports more stuff in general.
Thanks malihu,
you know how I can fix this problem? I’m not an expert with js code.
Hey, great plugin. Got a question:
I’m using an iframe inside the scroller to load an external page (tumblr) into the scroller, works great except that I want the scroller to go back to the top when a new page is loaded in the iframe – right now it stays scrolled down when the next tumblr page is loaded. I’m a bit lost here, is there a way to get the scroller back to the top? Should I load the external content otherwise perhaps?
Grateful for any help.
Hello Oscar,
If you know when a new iframe page is loaded, you can use the following code (for vertical scroller):
$dragger.css("top",0);
Scroll();
and
$dragger.css("left",0);
ScrollX();
for horizontal scroller.
This may also be used as a callback on other functions or events.
Hey, thanks for getting back to me.
So I’m thinking something like this should work:
function load()
{
$dragger.css(“top”,0);
Scroll();
}
But to no effect, any ideas? Really appreciate the help.
Sry, code got messed up:
function load()
{
$dragger.css("top",0);
Scroll();
}
and:
- iframe onload=”load()” src=”link.html” -
- /iframe -
I have a problem with divs which are changing their height on click. They are inside the content div. So when I’ll change height to big then i can’t to scroll down to the end. Do you have some solution for this?
Hello Matthew,
Please check this comment:
http://manos.malihu.gr/jquery-custom-content-scroller#comment-4582
With the help of that resize script it is easier to apply the correct scrollbar every time the content changes.
The other solution would be to call mCustomScrollbar function as a callback each time you click to change your div(s).
Thanks, thanks, thanks!
I was having the same issue as Sam, Eric and Gavin above with IE7 not resetting the width of the horWrapper element. The fix is to trigger hasLayout with a zoom value of 1.
#h-scroller-element .customScrollBox .container {
zoom: 1;
}
Great! Thanks for posting this
Thanks for sharing! Saved me a lot of time!
Has anyone figured out how to get the scroll bar on the left hand side instead of the right side? I’ve toyed with this quite a bit but it’s harder than you might imagine :/
Anyone feeling bold?
I’ve tried to use anchors within the scrolling content div, but when I click on the link to go to the anchor, It skips to the right position, but the scroll bar disappears?
Hey, I have a problem with your plugin in Chrome and WordPress. I don’t know why in Opera 11.5, IE 8 ,9, Safari, Firefox everything is ok, but in Chrome my scroller dosn’t work as it should.
This is page adress http://www.fnowak.pl/1pointstudio/?cat=1
One more thing. Plugin doesn’t work with other jquery plugins just like for example Fancybox
sorry it’s work
Hi, how did you made it work?, (sorry for my english written, i speak spanish)
I´ve installed fancy box in wordpress.
Thank you very much
Javier
Hi Malihu,
For some reason the code isn’t working for me. It was working about an hour ago but since dreamweaver shut down unexpectedly it hasn’t been working since.
Any clues?
Hey,
The plugin is realy cool, but i am facing a problem.
I will add div in place of plain text with property float, the scroller doesnot work properly.
Please let me know the solution for the same.
Thank You in advance!
Hi,
is there a way to let the scrollbar at the bottom after reinit it?
for exemple after someone have add a comment (in ajax) we have to reload the scrollbar, but after that the scroll is on top.. not very user friendly
Thanks!
Hi. This is very well developed.
Just got one question. Is it possible to have just the dragger container if the amount of content isn’t enough to fill the hole area, instead of doesn’t appear the dragger container and the dragger. For instance: in the demo file “jquery_custom_scrollbar.html” if the first block just have one paragraph the container and the dragger disappear. right?? It was interesting to disappear just the dragger and keep the dragger container (line).
Thanks
sorry …
I found it. line 325 of js file–> $dragger_container.css(“display”,”block”);
Thanks for this excellent plugin
Great plugin. Really well done. Question–is there an easy way to just have the buttons for scrolling and no scrollbar? I know I can probably hack it out, but wondering if there was a proper or recommended method of doing this. Thanks!
smart
hi first Thanks for this excellent plugin. Secondly i am trying to use horizontal version. for displaying images in a row. is there a way that dragger starts from middle of the dragger container box instead of far left and the content also be centered in the display area.
looking forward for some easy and fast fix. thanks again.
Kunwar
Hi Malihu – this is by far the best scroller I’ve found after many weeks of searching. However I just can’t seem to get it working on my project. I’m sure it’s something very simple I’m overlooking, but I just don’t know what. Do you know of any special considerations for installing it on Joomla sites? Initially I followed the instructions from this site with no luck, then I tried replicating the code from the first example included in the download, also to no avail. Any suggestions you have would be much appreciated. I am dying to get this to work as visually as well as structurally your scroller would add serious value to my site. Cheers. Nick.
Many thanks for the plug-in! It really come handy to me…
I have one question to do and it’s about the vertical dragger. I’d like to have it as a point, not instead as an slash. (I want a 9×9 pix dragger)
The css code is as follows: #mcs_container .dragger {width:9px; height:9px; }
but in fact, as you can see in the next photo, is has been reshaped to a 9×132 one http://i52.tinypic.com/hvqbl3.png
What should I change? Is it possible to have it in a certain lenght?
Many thanks for your help!
Pablo
hai
In Horizontal non-adjustable image scroller with easing, can i make “arrows” disable or non-clickbale when image reaches the at the end?
Hello, I have a strange issue in IE 7 and 8.
I have some dynamic content loaded via jquery. When I load the content in IE 7, it isn’t able to scroll all the way to the bottom. Could this be to my css positioning?
Hi Manos!
On Google I found your jQuery solution for custom scroll bars. I can’t get it to work in WordPress… The bottom of the content isn’t shown properly:
http://www.sadiejayne.nl/media/photos/
Is there a solution or fix for this problem? Or am I just doing something terribly wrong?
If I load jQuery 1.6 instead of 1.4, the scrolling animation becomes a little bit jagged. This happens in all browsers I’ve tested (FireFox, IE and Chrome). Changing the reference to 1.4, makes it perfectly smooth again. It’s not very noticeable, but still annoying enough that I’m considering using older version of jQuery. Perhaps some issue between the jquery.easing and later versions of jQuery?
Great plugin! I had some problems with showing the scrollbar in a hidden div but I fixed it using the tips above (put the div you want to hide in the window load function) but… now it shows the div for a flash and then hides it… kind of anoying. Anyone fixed this problem?
The scrollbar seems to be working fine in Mac OS X 10.7 (Lion). But like you said, it scrolls fast in Snow Leopard. Can you update the mac specific version of the plugin to account for the difference between Snow Leopard and Lion?
Hi,
Great project!
I’m currently “learning by doing” HTML/JS/CSS and your plugin just helped out with our new corporate website. It’s not online yet, but I just wanted to let you know how I wrote a quick and dirty “scrollTo” solution:
// scroll to
$(container).css('left', '-' + parseInt(scrollTo * parseInt($(horWrapper).css('width'))) + 'px');
$(dragger).css('left', parseInt(scrollTo * parseInt($(dragger_container).css('width'))) + 'px');
I have a wrapper function, in which the elements (container, dragger, …) are created via document.createElement(‘div’) and after I called mCustomScrollbar on the parent node, I exec these to lines to jump to a pre-defined float value (scrollTo).
This probably isn’t very accurate, but for now it does it’s job.
Is there any known bug related to the window resize function?
Because I’m having a problem when I resize the browser window. I also have a script that resizes the background image and one container div. Could be any conflict with my resize function??
Thanks
Is there a way to validate the contents of ? W3V says that style tag is not permitted to sit where it sits now. Thanks.
Excellent plug-in! I have used it in my website (click the name to check it if any interest). As there are quite few question within comment section to add additional functionality of custom scrolling etc. I have written a short blog post about how to do it. It can be found here:
http://www.blog.kartogram.co.uk/post.cfm/custom-functionality-for-custom-scrollbar
Again, thanks a lot! brilliant project.
cheers,
SD
Fantastic
Thank you Simon.
Many praises to Simon Dau for the added feature and Malihu for this awesome plugin! I was about to give up hope on a scrollto anchor-like navigation within mCustomScrollbar and am damn glad I read through all of these comments to find this!
Awesome! Saved me a ton of time!
Great job! awesome! thanks
What an awesome scrollbar you’ve made! Thank you!
I’m having a weird thing happen though: as one brings the scroll button back up, I never get back to the initial starting place and opening text is cut off and starts later:
In webkit I see this when I bring the scroller back to the top:
(I added the style inline)
The “top: -231px;” is the problem. Initially on page load that code is:
Any thoughts?
Thanks!
Eddie
Forgot to reference problem page:
http://wilshirerestaurant.com/bio-test/
Thanks,
Eddie
( Forget to reference the problem page:
http://wilshirerestaurant.com/bio-test/ )
What an awesome scrollbar you’ve made! Thank you!
I’m having a weird thing happen though: as one brings the scroll button back up, I never get back to the initial starting place and opening text is cut off and starts later:
In webkit I see this when I bring the scroller back to the top:
The “top: -231px;” is the problem. Initially on page load that code is:
Any thoughts?
Thanks
Eddie
Forgot to reference page so you can see the problem:
http://wilshirerestaurant.com/bio-test/
Hi! Amazing job.
I’m implementing this in my personal tumblr theme, changing the scrolls.
My problem is that I want to make this:
custom scroll
>>nested custom scroll
and then:
jQuery(window).load(function() {
jQuery("#mcs1_container").mCustomScrollbar("vertical",150,"easeOutCirc",1.05,"fixed","yes","no",0);
jQuery("#mcs2_container").mCustomScrollbar("vertical",jQuery(window).height(),"easeOutCirc",0,"fixed","yes","no",0);
});
It works just with one custom scroll… when I open a link with nested custom scroll, both works like one :S, the nested scroll have the control of the drag…
Any way to get it?
Sorry for my bad english, I’m learning… Thanks.
Hello Malihu,
Great work, using it for my college project.
One of my HTML page has lot of content so I used TOC type linking.
TOC heading are (links) placed on the left side, and the right side has content. These links are the anchor, clicking on these links scroll up/down the right side of content area to the respective topic heading. This content is tagged inside the “”, however when I click on the link whole scrollbar move up. Can you please help?
Thanks
Hi, I had trouble trying to implement your script anchors would like to see how you could do to go to the top with a single click with a aclanje.
And another development is that it does not work for me via the scroll key, take this example but it did not work.
$ (document). keydown (function (e) {
if (e.keyCode == 38) {
$ (“. ScrollUpBtn”). Mousedown ();
setTimeout (“$(‘. scrollUpBtn ‘). mouseup () “, 250);
}
if (e.keyCode == 40) {
$ (“. ScrollDownBtn”). Mousedown ();
setTimeout (“$(‘. scrollDownBtn ‘). mouseup () “, 250);
}
});
In advance thank you very much:)
Carlos Molina
Hi Man!
I like the scrollbars very much, but i have an issue.
I tryied to implemente at the same time the scrollbars, a page fade and lightbox, and i discovered when the lightbox is added, the scrollbars doesn’t work.
Please help me with this issue.
you can see it at http://www.dinamoarquitectura.com/test/proyecto1.html
Thankx a lot!
Why on earth are you passing parameters into your function vs. using a more traditional jQuery plugin approach of using “options”?
$(“#mcs_container”).mCustomScrollbar(“vertical”,400,”easeOutCirc”,1.05,”auto”,”yes”,”yes”,10);
vs.
$(“#mcs_container”).mCustomScrollbar({
“vertical”: true,
“easeOutCirc”: 1.05,
“auto”: true,
…. and so on
});
When I wrote the script, I didn’t want to clutter the code when having multiple version of the scroller on the same page (just so the code would be shorter). That’s not the best of practices I know. I’ve been meaning to update the plugin to pass parameters as options (among others) but I work like crazy and haven’t got the time to do so (yet).
If you put it on github I wouldn’t mind taking a crack at it
Hello,
Thank you for the nice script.
Is there a way to manipulate the start position or automaticly scroll to a (variable) position when te page loads ?
I have a page with 15 static thumbs. When a thumb is pushed i jump to a page with your (horizontal) scroller containing 15 big images in one row. I’ll get a position-var true the url (like page.html ?scrollerposition=1200). Is it possible that the scroller scroll to this (variable) position ???
THX !!!
I carn’t seem to get this to work on my computer!
I keep getting 1 error from the jquery.mCustomscrollbar document saying
$dragger.draggable is not a function
[Break On This Error] stop: function(event, ui) {
so I carnt move my dragger anywhere!
I’ve copied the whole thing word for word mulitple times and its just not working but it seems to be working fine for you. help. :’(
Hi there, excellent stuff. Thanks.
However, i encountered that on some days the css or the script not working while at some other times, it works perfectly fine. is it due to the ‘http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js’ script where the script was hosted that the page is down or something? Please advise. Thanks
Hi, I don’t know if the reason was google CDN was down but here’s a code to use for loading jquery from google with a fallback to local:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/jquery-1.6.1.min.js"%3E%3C/script%3E'))</script>
The example above asumes you have “js” directory where a local copy of jquery (jquery-1.6.1.min.js) resides.
Hi Malihu, appreciate your help. Thanks. However, the scrollbars still don’t work. I noticed in the demo that the following scripts includes ’1.4/jquery.min.js’ , ‘jquery.easing.1.3.js’ and ’1.8/jquery-ui.min.js’. But it didn’t mention anything about ver 1.6.1. as you described in your above solution. Could this be the cause? please advise thanks.
I think this bug needs to be fixed in the demo as well.
Hi again, just an observation that I’ve made. I’ve used the script for 2 different websites and whenever I noticed that the demo in this page do not work, the scroll bars on both my websites do not work as well- even when the sites are run on my local computer. I suspect that something online is causing this issue. I hope you can look into this? thanks! Other than this issue, i think it’s a great application.
Hi, finally got it working. I added the following script to get it working locally:
!window.jQuery && document.write(unescape(‘%3Cscript src=”jquery-1.6.4.min.js”%3E%3C/script%3E’))
!window.jQuery && document.write(unescape(‘%3Cscript src=”jquery-ui-1.8.16.min.js”%3E%3C/script%3E’))
Thanks for your time!
Hello,
Thank you for this wonderful scroller. Very polished work. Just one problem, when I implemented it on my site, the scrolling behavior was inverted. When I drag the scrollbar down, instead of moving the page up, it goes down. I used your example in “jquery_custom_scrollbar_vertical_full.html”, which works in the demo, but not on my site. I made sure to include all the correct elements. I even tried different config options. What could be causing this?
Thank you !!
My site is here : http://2011.xod.ca/.
For everyone who have problem of size when loading new content to vertical scroller, add this line:
scrollAmount=($customScrollBox_content.height()-(visibleHeight/bottomSpace))/(draggerContainerHeight-draggerHeight);
at the beginning of Scroll() function
@GeneC
I’ve got this prblem to. Do you have only DIVs in yur content-box?
Great post man!
An addition script to plugin for whom want to scroll to a specific item on load :
function scrollToItem(item){
var n = item.position().top - 20;
var c = $(".container");
var c_h = c.height();
var d = $(".dragger");
var d_h = $(".dragger_container").height();
var d_p = parseInt(n*d_h/c_h);
c.animate({top: -n},1000);
d.animate({top : d_p},1000);
}
$().ready(function(){
scrollToItem($("#div1"));
});
How did you determine the -20 on var n?
You rocks mate.
I got some problems to resize after I put the content to appear after a jQuery animation but finally I solved with your LoadNewContent after the animation complete.
Thanks a lot.
Hi,
I also like to use your script – used once or twice in projects.
Now I used it again and it does not scroll up when I drag the dragger down,
it scrolls with the dragger… but I implemented it as stated here and as I did before.
Any Ideas?
Greets Timmy
I would like to fix the header of the table and rest of the content should be scrollable. Currently I am using your script for scrolling the table which is scrolling header and data too. How to make header as fixed ?? I really need help on this.
Hi – I’ve customized your scrollbar – and it looks great.
However I can’t get it to actually scroll.
Can you please take a look?
http://www.centerenrichment.org/final/mission2.html
p.s. I’m on a Mac – if that make any difference.
Thanks
Amy
I dug through my coade and realized that the scroll isn’t working because I am using another Jquery code on the same page. It is PrettyPhoto.
Pretty photo uses:
“https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js”
and the Custom Scroll uses:
“http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js”
Is there any way to make them both use the same reference so that they don’t cancel eachother out?
Well done!
I started from your work for scrollbars used in Uefa MatchCentre:
http://www.uefa.com/uefachampionsleague/season=2012/matches/live/index.html?day=2&session=1&match=2007586#previous
Cool
Thanks for posting!
Hello,
first of all, thank you for you great scroll tools.
I have a little prob using the auto-adjustable horizontal srcoll (horWrapper) :
It works fine on Chros and Safari, but I sometimes ave a little surprise on firefox (6.0.2 and 7.0.1) and internet explorer 9.
Sometimes one image of my horizontal scroll goes to line. it’s very strange.
If i delete one image or add one image on the container, it works fine.
here is an exemple of the problem :
http://nathanael.brun.free.fr/remove/test_php/exemple_horwrapper_prob.php
I’m not an expert, I only try to develop a website with what I find and try to understand things as i go, so I may have done some mystakes that I don’t understand.
thanks,
Nael
Hi,
I face the same thing in my firefox version 3.6.23 and OK in other browsers. I think it is because of the mis-match between the plugin and the browser.
In my case i just increase the width of the horWrapper by 1 pixel (do this in the .js )then the last image is able to display inline.
Thanks to Manos too.
Hi Hoyt,
Check the quick fix below as it should also work in your case.
Hi Nael,
This happens because of the whitespace added by browsers on inline-block elements (a space separating each inline element like words, images etc.).
A really quick fix is to remove any spaces or new lines between your img elements in your html document. For example this:
<img src="pripyat_fichiers/images/chernobyl-01-eng.png " alt="Chernobyl map"/>
<img src="pripyat_fichiers/images/chernobyl_pripyat-entry.jpg " alt="Chernobyl Pripyat"/>
should be:
<img src="pripyat_fichiers/images/chernobyl-01-eng.png " alt="Chernobyl map"/><img src="pripyat_fichiers/images/chernobyl_pripyat-entry.jpg " alt="Chernobyl Pripyat"/>
I removed the new line before the last image and it works fine ! thank you Malihu.
This is great and nice jquery add on. Thank to you for create such a wonderful tools. I have try to my website and it works fine in 32bit machine including Mac Lion, but windows 64bit is giving me an headache (all browser IE9, FF, chrome)
this is error, I found
Message: Expected ‘)’
Line: 12
Char: 312
Code: 0
URI: http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js
Message: Object doesn’t support this property or method
Line: 211
Char: 5
Code: 0
URI: http://www.bluecube.com.sg/internal/metaphor/wp-content/themes/metaphor/js/jquery_custom_scroller/jquery.mCustomScrollbar.js
Appreciate your help! Thank you!
I cannot get the scroller to start at 200px instead of 0px, so the user can scroll left or right.
Adding a Left in the CSS for the dragger does nothing.
or maybe I’m placing the ScrollX(); in the wrong spot. In an earlier post you said to place it at line 142, which breaks the code, and is ‘before’ the Scroll function. so I’m confused. Please help.
Thanks so much!!
I got it to work.
I just had to remove #mcs5_container
Hi malihu,
I have got the vertical scroller working very well here:http://www.papastronsay.com/prayers – THANK YOU for all your hard work.
Problem: the arrows don’t line up with the scroller. I’ve tried hacking the css to no avail. Any ideas? It would help a lot to make my page look better.
God bless,
Br Dominic Mary, F.SS.R.
Just increase a bit the margin-right values of scrollUpBtn and scrollDownBtn anchors.
i seriously wanted this one…u r life saver…thank you so much for sharing
Wow – Great demo! Still generating interest.
I want to use it for my photo website (specifically the thumbnail horizontal scroller at bottom) though I would like it if I could also drag the strip of images (e.g. click anywhere on any of the images and pull left or right, ideally locking on a fixed vertical axis so as not to cut off the image if dragging up or down) – is this possible?
Thanks,
sm
Hi all;
Just in love with that plugin !!and congrats for all that amazing code;
I’ve read all the post from the beginning and still missing something,
I’m trying to display 2 customs scrollbar with “the same css style” in the same page :
to make it simple i used the example provide in the demo
i liked the style of the div ” mcs3_container”
so i ve duplicated it and named it div “mcs6_container” to keep “unique Id”
then applied the same structure
check out the link
Only the”Adjustable scroller height with 1/3 range ” have to be check
-the first on works fine
-the second one can’t scroll ?
any idea?
i ve used this script on the html page:
$(window).load(function() {
mCustomScrollbars();
$("#mcs6_container").mCustomScrollbar();
});
For the Css part
i’ve gave the almost same style ( except the position on the container )
to #mcs3_container and #mcs6_container
any word would be really appreciated
Regards.
You might find http://manos.malihu.gr/jquery-thumbnail-scroller better for what you wanna do (if you don’t need scrollbars etc.)
Cannot get the scroller to work, don’t get what is wrong added all the code. Any help?
Thanks
TW
Great script!
I implemented it on this site http://www.thomaspagani.com but each time I resize the browser window I got this error:
$dragger.position() is null[Interrompi per questo errore] if($dragger.position().top>$dragger_container.height()-$dragger.height()){
How can I fix it?
thanks
daniele
Hi Malihu,
Just in love with your plugin!!
Congrats and thanks for all the update;
i’d like to set up 2 div ( with the same style )with the custom scroll bar
so i just respect the syntax of the HTML and i add an unique Id and nothing happen?
check out the link ( i’ve been using the demo page and duplicate the div “mcs3_container”
and i ve called it “mcs6_container ”
Example with 2 div with the same style
Any light would be appreciated
I add this in the script
$(window).load(function() {
mCustomScrollbars();
$("#mcs6_container").mCustomScrollbar(); // to make the scroll bar appear //
});
Regards
Hi Maxime,
Thanks for your comments
You don’t need to add
$("#mcs6_container").mCustomScrollbar();
on window load cause you already call it correctly inside mCustomScrollbars();. Just remove it from your window load function.
Hi Malihu ,
Thanks for your answer
i’ve just remove this line
$(“#mcs6_container”).mCustomScrollbar();
as you adviced me
Result
This time the scroll bar don’t show up? only the first div (#mcs3_container) can scroll but not the second !
That’s for sure i ‘m really missing something
i took the demo example so that i don’t have to put to much extra code
and keep it simple to see my mistakes …
i have to admit i m still in the dark
can you light up my path?
Since you want #mcs6_container to scroll vertically, you need to set the scroll type parameter of its mCustomScrollbar function call to “vertical” (currently you have it “horizontal”).
Just change this:
$("#mcs6_container").mCustomScrollbar("horizontal",500,"easeOutCirc",1,"auto","yes","yes",0);
to this:
$("#mcs6_container").mCustomScrollbar("vertical",500,"easeOutCirc",1,"auto","yes","yes",0);
EUREKA!!!
I can see the light again yeaaaaaaah
thanks a tone MALIHU you Rock man!!!
check out this small showcase with your fantastic scroll bar
Now i ‘m able to add more scrollbars menu
thanks again!!!
Hi Malihu,
I hope you can help me. I used your script in one of the sites I am developing. The script works great in all pages except the home page. For some reason, the content scrolls to the wrong direction. When I drag sa scrollbar down, the content scrolls along with it.
I have read above that it must be that the value of targY is positive. Tried modifying the code but I am not able to make it to work.
Please see http://dev2.firstplanbcompany.com/demo-eurosweethearts/ … this site is in the works.
Thank you for your help.
I have exactly this problem.
I’m using WordPress and this occurs when I introduce into the mix.
I have tried all the work arounds that I can find including the correct registering and re-registering of jQuery and using jQuery in no-conflict mode and yet the content is still moving with the scroll bar and the increments are positive rather than negative.
Anyhelp would be appreciated.
Thanks,
Chris.
Hi,
I think I found a bug. If initially the scroller is initialized with a long content (with scroller) and then reinitialized with a shorter content(without scroller), although the scroller is gone but the mousewheel is still bound. Scrolling with the mouse wheel will result the content inside it to disappear. I’ve modified your code and added mousewheel unbind when handling shorter content.
Khai.
The URL you can find my site on is: http://www.thethespians.co.uk/videohome
I’m developing a new site and I need help with the scroll bar being integrated into tubepress youtube channel feed – as you can see, it’s there, but it’s scrolling the wrong way!
Hi Malihu,
Your tool is so simple to implement and such a wonderful resource to use in projects.
I had a question about the reset of the scroll bar and content. When you add in new content and reinitilize the scroll function, is there a way to keep the scroll bar where it is along with the content. For example I have an element in side of your scroll bar that has the ability to expand and collapse. Obviously when I expand I re-init your scroll component, and when I collapse I re-init again. Is there a way to keep the positions where they are OR a method for me to implement so any init after the first one keeps the location to where it is?
Hi, this plugin is great and does everything I need but I’m having a crazy problem with the horizontal thumbnail slider demo.
The example file works perfectly in IE8/9 and if I re-save it with notepad it still works fine. However if I open it with Dreamweaver CS5 and save it again then in IE the last thumb is pushed down to below the others.
If I compare the notepad and Dreamweaver files the content is identical. I think I’m going mad, can you shed any light on this?
Many thanks!
This seems to be an issue with the extra space between inline-block elements. In your markup, try to have each of your thumbnails tags on the same line, without any space or tab between them. For example:
<a href="#" rel="nofollow">...</a><a href="#" rel="nofollow">...</a><a href="#" rel="nofollow">...</a>
Thanks for the reply, I removed the spaces between the elements but it doesn’t seem to help. I’ve actually replaced the thumbnails with divs as I want to have content in there.
Like I say, it seems to be that Dreamweaver is doing something to the files that is causing the problem. I’ve discovered a workaround, if I work in Dreamweaver and then copy the code into notepad and save it there then it works. Not ideal but it will have to do until I can sort this out.
Thanks for your help and thanks for the plugin!
Sorry to bother you but I was trying to use this scrollbar I really like it is there a way to center the track when the button is being pushed? Could I add hover to the drag? Also most importantly how can I add the same scroll bar customization to more than one div? Or is that not possible?
Very nice plug in. One problem though: While the code works very well on a stand alone page (either php or html), when I place the code inside a component of a Joomla site, it doesnt run one of the javascripts (it doesnt implement the: ui_draggable class). Any ideas on why this might be happening?
Ok, I tried something that manos mentioned in an earlier post and it worked!!!
This is what I did:
[quote]
In your document, wrap the script with (function($){… and …})(jQuery); making it like this:
(function($){
$(window).load(function() {
$(“#mcs_container”).mCustomScrollbar(“vertical”,400,”easeOutCirc”,1.05,”auto”,”yes”,”yes”,10);
});
})(jQuery);
You may also need to add jQuery.noConflict(); right before (function($){. Depending on the order you load the libraries (prototype, jquery etc.), adding this might help.
Edit jquery.mCustomScrollbar.js and do the same by adding (function($){ as the 1st line and })(jQuery); as the last line of the script.
[/quote]
And Additionally I placed the javascripts at the root of the site (will move them to appropriate folders once I get home. )
Manos you are the best, vre!!!
Wonderful script! Thank you very much.
Now a question for everyone:
I’m trying to make the scroller “jump” a fixed amount of pixels when you click the arrows, or when you drag it. Is that possible? Any ideas? I’m not a javascript expert, but maybe with some hints I can do it.
Cheers!
nice one – thx for sharing; greece power !
in this page you have the dragger_container inside the .container .. this will not float:left the scrollbar – please adjust like you have it in the source; dragger_container has to be placed in the .customScrollBox
you really like different cursors though
ever seen this error ?
or this for webkit (before was from opera)
commenting out these parts helped
/*$dragger.draggable({
axis: "x",
containment: "parent",
drag: function(event, ui) {
ScrollX();
},
stop: function(event, ui) {
DraggerRelease();
}
});*/
/*$dragger.draggable({
axis: "y",
containment: "parent",
drag: function(event, ui) {
Scroll();
},
stop: function(event, ui) {
DraggerRelease();
}
});*/
hi
can anyone tell me how to maintain the scroll position using this script
how to maintain the scroll position when dynamically add content using ajax or any thing else
Thank you for a good script!
I’m trying to make a horizontal website with your script, I encountered one problem.
Instead of your thumb images, I put ‘ul, li’ codes in there. After then, the scroll function stopped. In my interpretation, It supports only simple image tags. Where do i have to modify this script? I’m an just web designer in Korea but a developer. I’m striving to solve this problem for few days.
Can you help me?
hi,great plugin
dont know if you have already developed it, but i needed a scrollto method for your plugin, so i’ve implemented is as an external function, scrollerScrollToX for Hor and scrollerScrollToY for Ver scroller
maybe is it possible to integrate it – in a better code – as an internal method of your plugin
regards.
alessio
the code
——————————————————
function scrollerScrollToX(refid,valTo){
if (valTo>0)
{
var $dragger=$(“#”+refid+” .dragger”);
var $customScrollBox=$(“#”+refid+” .customScrollBox”);
var $customScrollBox_container=$(“#”+refid+” .customScrollBox .container”);
var $dragger_container=$(“#”+refid+” .dragger_container”);
container_width=$customScrollBox.width(); content_width=$customScrollBox_container.width(); drag_width=$dragger_container.width();
dragger_width=$dragger.width();
if (valTo>(content_width-container_width)) valTo=content_width-container_width;
var scrollAmount=(content_width-container_width)/(drag_width-dragger_width);
var btnsScrollTo=parseInt(valTo/scrollAmount);
var scrollSpeed=Math.abs($dragger.position().left-btnsScrollTo)*(100/150);
$dragger.stop().animate({left: btnsScrollTo}, scrollSpeed,”linear”);
$customScrollBox_container.stop().animate({left: “-=”+valTo}, 300, “easeOutCirc”);
}}
function scrollerScrollToY(refid,valTo){
if (valTo>0)
{
var $dragger=$(“#”+refid+” .dragger”);
var $customScrollBox=$(“#”+refid+” .customScrollBox”);
var $customScrollBox_container=$(“#”+refid+” .customScrollBox .container”);
var $dragger_container=$(“#”+refid+” .dragger_container”);
container_height=$customScrollBox.height(); content_height=$customScrollBox_container.height(); drag_height=$dragger_container.height();
dragger_height=$dragger.height();
if (valTo>(content_height-container_height)) valTo=content_height-container_height;
var scrollAmount=(content_height-container_height)/(drag_height-dragger_height);
var btnsScrollToY=parseInt(valTo/scrollAmount);
var scrollSpeed=Math.abs($dragger.position().left-btnsScrollToY)*(100/150);
$dragger.stop().animate({top: btnsScrollToY}, scrollSpeed,”linear”);
$customScrollBox_container.stop().animate({top: “-=”+valTo}, 300, “easeOutCirc”);
}}
Great! Thanks
Hi all! I’m using the horizontal scroll with images linked to a html, but I have a little problem: when I click an image the scroll moves some steps to the right before loading the other html, any ideas why is this happening?
Thanks to all in advance.
Hi to all!
i’m new here.
I’ve a problem. This plugin doesn’t work correctly in IE9, because the content inside the div, goes overflow. I can’t see the jquery scrollbar
I’m trying to use your script but am having some problems… I have a container that holds some dynamic content. However, when I use the mouse wheel to scroll through the content, the only time it works is if I’m hovering directly over the data. So, if the content happens to scroll off the screen, it’s very difficult to get it to come back down using the scroll wheel. I have to use the scroll button next to the container. What I think should happen is that it should scroll as long as I’m hovering anywhere over the container.
To see this, you can go to http://berlin.medialayer.net/~echofly/html/rods.php
Can you please tell me what I’m doing wrong here? Thanks a lot! And love the scroller.
I have the same problem. Especially in ie8/ie9. Scrolling only works when the mouse is hovering directly over the text and not on the space between text and text-lines…
I hope someone can provide a solution to this.
Thanks in advance!
I found a solution in adding a background color to the surrounding div…
hey, i love your plug-in! thanks, you are a life saver.
Quick Question: Is it possible to use both vertical and horizontal scrollbars on the same container?
Not at the moment…
hi there, thank you for the tutorial on how to create a custom scrollbar using jquery, very impressive result.
i’ve tried to include your script into a tab menu for each tab/div. But only the 1st tab (which is the default tab when i enter the page) works. the rest of the tabs the scroll bar doesn’t work at all. i couldn’t find a solution for it.
by the way, i realised that within the .content it doesn’t allow floating elements in it. Or else the scrollbar will not work accordingly. i tried to put an empty div with clear:both css but still doesn’t resolve the matter.
Thank You
really nice thank you for this great plugin
Anchors navigation # not work in this plugin… ?
I was searching so long for very good custom scrollbar until I found yours
I had some trouble with the installation caused of my browser, but it works now
but now I have a new Problem: I installed the nivo plugin. and now the nivo plugin is working but the custom scroller wont work
how can I fix it?
now I see that the scrollbar seems to have a conflict with nextgen too
I have one problem!
I have to use scroll in scroll, but when I do get the scroll is crazy!=S
what can i do for help my problem?
Apparently we cannot use the latest version of jQuery (1.7) with this [excellent] scollbar solution? 1.6.4 works, but 1.7 does not respond to the scrollwheel.
Indeed! Please download the updated version (3.0.6 works correctly with jquery 1.7) of the jquery-mousewheel plugin here:
https://github.com/brandonaaron/jquery-mousewheel/downloads
Direct link to version 3.0.6:
https://github.com/downloads/brandonaaron/jquery-mousewheel/jquery-mousewheel-3.0.6.zip
Thanks malihu! We were seeing this issue after upgrade to jQuery 1.7. Upgrading mousehweel to 3.0.6 fixed the issue (from 3.0.2 in our case)
Would be nice if this page had an alternative to the huge comment stream, but just a thought.
Thanks!
Hello,
I have a website with dynamically generated content so I can’t have a function call for each div ID, is there a way to make this work with a single class name so I can have a random number of scrollable divs on the same document?
Thnx!
Of course! Just insert your class name instead of an ID in the function selector. For example:
$(“.mcs_container”).mCustomScrollbar(“vertical”,400,”easeOutCirc”,1.05,”auto”,”yes”,”yes”,10);
Hello malihu,
This is really nice stuff! But unfortunately it doesnt seem to work on my dropdown box. How do i get this scrollbar to work within my dropdown. This dropdown box is also scripted with jQuery from devirtuoso.com
I really hope there’s a workaround. Really like the scrollbars.
Mike
Hi,
I plan to have a hidden div in the content, which may consist of several text fields. By clicking an “Add more” button, this hidden div will be display. However, after clicking the button to show the hidden div, the height of the content doesn’t expand automatically, so a portion of the content will be cropped. What can I do to “refresh” the height after the hidden div is shown?
Thanks.
Hi,
You need to re-call mCustomScrollbar function each time you update the content. Check section “Dynamically loaded content” of the post.
Hello,
first of all, thank you for this great plugin. I searched around the web a lot for a stylish scrollbar, and this definitely is the best one.
I’d like to confirm two of the previous posters:
@rareseeds: I had Jquery 1.7.2 loaded and the mousewheel didnt work, changing it back to 1.6.4 really helped out.
@Fred: i also use use several divs inside the mcs_container_content and ran into the problem of malfunctioning scolling, therefore i replaced line 195:
var totalContent=$customScrollBox_content.height();with a function to determine the height of the longest div inside the content_container.
Now it works perfect!
Chris
hi there
i think i have the same broblem
again what did you do to solv it ?
really great stuff for developers this script for custom content scroller will really helpful also we can suggest this thing to our developers too. great article.
Can you have an adjustable scroller width in horizontal orientation? If the dragger container is set to 100% it will scale to the width of the horizontal wrapper (ie the width of the content) not to the width of the screen …
Would be very grateful for any advice. Thanks!
Hi!
I wonder which will be the easiest way to have an initial variable scroll. I’ve seen in the comments above some snippets to set an initial scroll but it was a fixed amount.
I need this to keep the scroll in a vertical menu after clicking on a link (which opens a new page and obviously clears the scroll).
Thanks in advance!
hi,
great work! just found a little bug only showing up in ie(tested on ie8), that’s easy to resolve:
in the horizontal slider example, the images are dropping out of the container.
with #mcs_container .content image{float:left} this can be fixed
First of all thank you for this great plug in! I’m trying to implement with a joomla site but I’m facing a problem with the mouse wheel. Doesn’t want to fire up.
Has anybody get it to work in joomla environment?
http://www.css-teske.de/portal
Hello. If you’re using jquery 1.7, you need the latest version of mousewheel plugin (3.0.6): https://github.com/brandonaaron/jquery-mousewheel/downloads
Hi!
I’m trying to load this scroller inside fancybox, but javascript is probably not loaded when I open fancybox popup. I’m too weak in jQuery to find out, which part of the code must I change to make it work, I tried with .ready events but no success.
Any help would be greatly appreciated!
Hey,
Absolutely love this scrollbar! I’ve been looking for a good one for some time and found this and have been nothing but impressed – great job! I am running into one problem, and I read through a lot of the posts and didn’t see this, so I’m asking for some help. I am using this scroll on a page that has tabbed content. On the first tab, the scroll bar works perfectly. Now, I tried adding multiple scrolls as suggested (unique id – even some of the classes where I could get away with it) and when I nav. off the first tab, the bar either doesn’t appear, or if I change the scroll time in the function call to “a” (any letter) instead of a number, it will show, but not work. I have tirelessly looked over every letter of all associated code and I think at this point I have done what I can to figure this out. Any ideas? Sorry for the book, I really hope to get this to work. Your time is greatly appreciated!
Link to demo page for you to view:
http://www.dqrm.com/demo/TFD2.htm
~J
Hi,
You need to re-call mCustomScrollbar function each time new content is loaded (in your case each time a new tab is clicked). Please check section Dynamically loaded content on this post to get an idea on how to apply it to your page.
Hi, excellent work. There is a possibility to slide the content by dragging the content lije touch sceen? And 2nd: there is a possibility to add touch support? Thanks.
very nice plugin!
I’ve seem to run into a minor problem though. When i scroll down, my content gets pushed down instead of up. It’s scrolling the wrong way basically. If that makes any sense.
Any idea why? Been trying to figure it out for hours.
I’m having the same problem. Did you ever get this resolved?
Ok, I figured this out for my scenario. I had to change the name of the .content class to .msContent because I was already using that class name for another part of my code and my CSS declarations were conflicting.
I had to change line 7:
var $customScrollBox_content=$("#"+id+" .customScrollBox .content");To:
var $customScrollBox_content=$("#"+id+" .customScrollBox .mcsContent");Now it works perfectly.
Great script!!
That’s line 7 in the jquery.mCustomScrollbar.js script.
Hey, I have a little problem. Everything works like it should but I have it so the mcs5_container div doesnt show right away. It is initially “display: none.” I make it so when the user clicks on a tab it will fade in but when that happens, it does not fade in correctly. Everything is vertical with no scroll or anything. It looks completely different. Can you help?
I just found out it works correctly within Dreamweaver when I click on “live view” but it does not work when I preview it in any browser.
Hi,
Thank you for sharing this cool script.
I have one question though:
Is there a way of adding a fixed space (top and bottom), so when you scroll the content has some ‘air’ ?
For example, if you have a header and then a long list of elements, I can have a padding for the first element, but when I scroll down, the list would be too close to the header.
I would really appreciate if you could help on this… I tried several things but can’t find a proper solution.
Thanks!
Greetings!
Hi I made a kind of scrollToBottom() function, can be useful for chatwindows:
$(“#mcs_container”).mCustomScrollbar(“vertical”,400,”easeOutCirc”,1.05,”auto”,”yes”,”yes”,10);
var topD=$(“#mcs_container .dragger_container”).height()-$(“#mcs_container .dragger”).height();
$(“#mcs_container .dragger”).css(‘top’, topD+’px’);
var topC=$(“#mcs_container .customScrollBox”).height()-$(“#mcs_container .container”).height();
$(“#mcs_container .container”).css(‘top’, topC+’px’);
Hello malihu,
i am using your custom scrollbar and Quicksand.
after filtering items in each content area and resizeing my Window
scrollbar height/width adjustment (values: “auto” or “fixed”) not helps!
please helpe!
TOUCH SUPPORT FOR IPAD/MOBILE DEVICES?
your plugin is awesome!!
i’ve already deployed it onto my website!!
thanks a lot!!
Hi!
First of all thanks for this amazing plugin. I have been implementing with a joomla site. Everything is working fine but with opera and internet explorer I’m facing probems. Internet explorer 9 dies on page load and sometimes opera is not calling the scroller. Has anybody had the same behaviour? Is there a workaround for this issue?
Hi. Thank you for this plugin
Is there any way to adjust the number of pixels moved by the content when clicking the arrow button? Thanks a lot
Hello, firstly my thanks to Malihu for his beautiful script, it helped me some times.
But this time I had to employ that scrollTo function, and searched everywhere for a replacement script, but not found
The closest i found was this one: MopSlider 2.5 Demo, with beautiful draggable content (a feature that i wanted to my project), synched with scrollbar, but.. well, its documentation is a little hard to follow and seems not support content refreshing.
So i came to this solution, it’s nothing genial but works, considering my absolute lack of intimacy with mathematics:
(It’s to be used with horizontal scrolling):
function jscrollHor(jqel){
//jqel is the jquery element to be tracked
//(ex: $(“#mcs_container .content #myanchor”);
var trgt = jqel;
var margin = 30; // offset in pixels to give a little breath before content
var c_totalWt = $(“#mcs_container”).find(‘.container’).width(); //total width of content
var c_obj_pos_abs = $(trgt).position().left – margin; // the abs position of anchor inside the content
var c_obj_pos_rel = c_obj_pos_abs * 100 / c_totalWt; // the relative position of anchor to content
var d_totalWt = $(“#mcs_container”).find(‘.dragger_container’).width(); //the total width of scrollbar
var d_pos_rel = (d_totalWt * c_obj_pos_rel) / 100; // the new position of dragger relative to scrollbar
//and then, we apply these values
$(“#mcs_container”).find(‘.container’).animate({left:’-'+c_obj_pos_abs + ‘px’},’fast’,'expoEaseOut’);
$(“#mcs_container”).find(‘.dragger’).animate({left:d_pos_rel + ‘px’},’fast’,'expoEaseOut’);
}
Hope it helps someone
Note:
The easing function I used in animation was taken from this library:
http://www.lemonsanver.com/jQuery/easingAnimationPlugin.html
Amazing scrollbar!!
I’ll use on a website for one of my client. It works fine on all browser but i’ve got one little problem on chrome. The fact is when I click the dragger and drag it down or up and the cursor hover the scrollable content, then the browser select the content. So I juste add one little event to prevent this side effect.
$('.dragger').bind('mousedown', function(event) {event.preventDefault();
});
This is exactly what I’ve been looking for but I can’t seem to get it to work correctly- I placed it in as you suggested, the only change I made was that I linked the CSS and JS files and I changed the container color to #333 because the type was white with a white background and couldn’t see it.
here is a link to the test page I created to see if I could get it working, there’s not much in there so I’m not sure what the issue is.
http://mangonyc.com/scrolltest/scrolltest2.html
Any help would be appreciated
Thanks
Chris,
I’m new at this but I’ve been messing with it today and have it working. I think you’re missing the bit that includes the custom scrollbar plugin (jquery.mCustomScrollbar.js). Insert this at the end of your document, just before the closing body tag.
$(window).load(function() {
$("#mcs_container").mCustomScrollbar("vertical",400,"easeOutCirc",1.05,"auto","yes","yes",10);
});
And big thanks to Malihu! I’m replacing some old flash code that had a nice little scroll bar. This is just what I needed.
Whoops. There should be more to that but the script tags got stripped out. Do a search on this page for:
The final step is to include the actual custom scrollbar plugin (jquery.mCustomScrollbar.js) and the function that calls and configures the scrollbar(s) at the end of your document, just before the closing body tag.
That’s where he gives the instruction.
is there any formula for the buttons if you click them up/down and the scroll amount of the content is fixed?
Example:
If you click on the top and down arrow buttons the content moves 300px up and down?
Any help would be greatly appreciated. Thanks
Thank you for the examples. Really nice and very useful content. I was trying to implement to my website. Everything seems fine except the scroll bar is not moving. I couldn’t scroll it down to see the content. Do you have any idea what may cause that happen? I couldn’t figure it out.
Any help would be appreciated
Thank You.
I forgot to mention i am using MAC computer. Is that why the scroll bar is not moving at all? I read the previous posts and did the changes like below but it’s still not working.
Inside jquery.mCustomScrollbar.js find the line var vel = Math.abs(delta*10); and change 10 to a lower number (e.g. 1).
Any helps?
Shouldn’t be a Mac related issue but I’d need to check the actual link. Can you send it via e-mail?
i tried to update jquery from 1.6.2 to 1.7.1
the mousewheel broke doesn’t work anymore…
Hi, please get the latest version of mousewheel plugin (3.0.6 or later):
https://github.com/brandonaaron/jquery-mousewheel/downloads
i updated mousewheel to 3.0.6 it still break with 1.7.1… using 1.6.2 for now
the website by the way, it breaks in the press section
Hello,
thanks for this awesome plug-in!
I’ve just installed and adjusted the horizontal scroll, but not every time is working actually. For example on refresh – there is no working – the content div displaying the images in one long column and there is no scroll controls and scrolling actually.
No errors in the console..
visiting the page from other document reference the scroll is working on Safari, but on Firefox the last picture is always on a new row.
Will be really thankful of somebody share opinion..
hi there.
Just wanted to let you know I have published an article about your custom scroller over in kartogram’s blog. This time some mobile functionality was added to extend usability of this brilliant pllugin.
Simon
I like your JQuery scroller but there is a problem with IE9 that causes the last element in a Horizontal scroller to wrap round onto a second line.
Same think happens in your Demo.
Is this a known bug?
Thanks
Hi Robert,
I’ve just checked the demo (http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html) on IE version 9.0.8.112 on windows 7 and I don’t see any issues. Can you provide IE9 version and OS?
Thanks
The error is using IE version 9.0.8.112 on Windows Vista Home Premium.
If you let me have an address, I can email you a screen image.
The problem is ‘fixed’ if I add a space + nbsp to the end of the contents – which implies that the div width is not being calculated correctly.
R
manos AT malihu DOT gr
HI! i used your script in my new project and have a problem. i use the scriller to display content wich appears after clicking a search button and the scroller isnt there,but if i zoom the page,scroller appears. can help?
Hi, please check the section “Dynamically loaded content”. You need to recall mCustomScrollbar each time you load new content and after content is actually loaded.
instead of text i have this: when you enter the page the content and the scroller isnt there but if you click the search button the content appears without scroller.i tried to use the section you told me and wrote .Results instead of “new.html” the scroller appeard without content and after clicking search it appeard but scroller is unmovable.If you can tell me right way i added my testing website in this comment
Hi,
I have a problem whereby I am embedding youtube / vimeo clips (iframes) within the scroller, which works fine, except that when the mouse is over the iframe the mouse-wheel scroll won’t work (i suppose it’s trying to scroll within the iframe? Any way around this?
Hm… If I’m not mistaken, the only way to “fix” this is adding some extra code to the script itself (e.g. checking if mouse is over an iframe, object etc. while inside the scroller boundaries). Got to test it though…
Well judging by this: http://stackoverflow.com/questions/4836966/jscrollpane-mousewheel-event-firing-only-for-scrolltrack-area-in-ie-ff it seems the only way is to have a transparent element over top of it so it can scroll. I’m thinking a ‘click to view video’ button which will then slide down to expose the video. Annoying huh?
Hi,
I have noticed weird behavior of scrollbar in Chrome (version 16.0.912.75) under Ubuntu 10.04 and win7. I use your scrollbar in hide/show divs so I call mCustomScrollbar() after hidden div is shown. And what it does? Dragger is moving fine but content not. And I found the code with comment “function to fix the -10000 pixel limit of jquery.animate”, so I deleted it and voala problem in Chrome was solved. Without this “fix” I haven’t noticed any weird behavior. So maybe someone can use this help or find a better solution.
Hey, thanks for posting this
Maybe the newer version of jquery doesn’t need this “hack” to animate 9999 pixels blocks.
Yeah maybe. I was using jQuery v1.7.1
Sorry for my bad english.
I had the same problem. After removing the -10.000 bug fix everything works fine!
Can anyone find out if they’ve removed the -10.000 bug in the current version of jquery?
I’m trying to use this to scroll the text on this
http://www.csslab.cl/2011/08/18/jquery-timelinr/comment-page-6/#comment-46104
Demo: http://www.csslab.cl/ejemplos/timelinr/latest/horizontal.html
and it’s just not working, at all. I have placed all the code inside where the content is, the scroll finally appeared but its funy, doesn’t actually scroll, and when I hit the arrows on the timeline the content of the previous section doesn’t go away. Please help, sort of new with jquery
Hi, I keep getting this error on IE
jquery.Custom Scrollbar $dragger.position()top not specified or null?
Site: http://nagomedia.pl/index.php?id=8
Any idea what might be the problem?
Very great job!…compliments!
i was very satisfied but i tried it with my mobile and it doesnt work at all…arrows and scroll as well…
why?
Thanks for such a great plugin!
I have a question about a weird thing happening for me.
The scroller loads OK, but after using it, the javascript computed margin-top css never resets to “0″.
Example: ( on load )
<div class="container" margin-top:0px;="
(on usage )
http://wilshirerestaurant.com/press/
Any ideas?
Hi there,
Very good plugin! Compliments!
If you don’t object, I’d like to use it in my new site.
One question though…
I use a later jquery version and it appears that the scroll only works in Firefox…
In all other browsers, the scrollbar moves alright, but the content doesn’t…
When I use your link to the Google api jquery 1.4.4 it works fine.
Any idea why this is?
Thanks!
Ward
I’ve found that the scrollbar unload process is incomplete.
At the current date (2012-01-31) I’ve downloaded the script from this page, and notice that, if the content is shorter then the container, the mouse wheel is still binded, thus causing a misbehavior.
To solve it:
where it is commented “//disable scrollbar if content is short”, add the unbind method for the mousewheel:
$customScrollBox.unbind("mousewheel");
Hope it helps some of you with the same problem!
Hi,
Why is that the scrollbar buttons doesn’t work if I resize the browser and the buttons reached each other? The dragger and mousewheel works perfectly, it’s just that the buttons.
Thanks!
I am trying to change the height of the content box but when I do the dragger grows in height with the height of the container box. Am I missing something in the JS or css file that controls the size of the dragger?
thanks for any advice. Great script and nice scrolling feature.
Hi Malihu! I just stumbled across this scrollbar, and it looks absolutely perfect for my website. However, I’m having a devil of a time getting my page to load jquery.mCustomScrollbar.js. As far as I can tell the directory structure is set up correctly, and the include is in the right place and formatted correctly. When I attempt it locally, the script does not even register as being loaded. Now that I’ve hosted my protosite, it loads but does not function. Maybe someone could take a look and tell me where I messed up? I’ve been over the guide and comments several times and didn’t find any solutions, though I may simply be too tired right now ><
Here's my code, apologies for the color scheme : http://lookingforgroup.net/ScrollTest/DockingTest3.htm
Thanks in advance for your help!
After hours searching… it was an extra bracket. Seems to be fixed now, though I need to rework my dynamic content. Thanks anyway!
Thank you for you custom scrollbar plugin
First of all, I’m using Chrome 16.0.912.77 m
I’m having a problem with resizing the outer container. It seems like your script assumes that the outer container always has a constant size. When I (for instance) fill the screen with a box (
position: absolute; top: 0px, right: 0px; bottom: 0px; left: 0px;) and apply your script to it, it get very odd behaviour when resizing the window.If I increase the height of the window beyond the bottom of the content of the box, the content doesn’t follow the bottom of the window. The dragger then indicates that I’m still at the bottom of the box, even though I’m far, far below it. If at any point I scroll or touch the dragger, the content snaps back into place and everything works again.
If I decrease the height of the window while the dragger is at “top: 0″ then the dragger leaves it’s container and floats too far up. Again, the second I scroll or move the dragger, everything snaps into place and works again. This leads me to think that there’s a simple fix to this issue.
To summarize, any resizing of the window like maximizing, restoring or just plain edge-pulling, makes your scrollbar script explode, and scrolling in the box instantly fixes the issue. If I could somehow emit a “scroll event” every time the window has been resized. Any ideas?
Also I think your script has a memory leak. Just for fun I set
$('#mycontainer').mCustomScrollbar(...);to run every second. After a short lunch break my page was running extremely sluggish and it took a few attempts to close the window.Also, I’ve tried to call
mCustomScrollbaron window resize, but not only does it not work, it makes the page go sluggish in just a few seconds of resizing. I’m currently trying to hack the script to scroll to top on window resize as a temporary solutionI didn’t have the errors and erratic behavior you are experiencing, but I did make a little script to resize on window resize. Not sure if it will help you but here it is if it does:
$(window).resize(function(){var totalHeight = $('#main').height() - ($('#top').height() + $('#bottom').height());
$('#mcs_container .dragger_container').css('height', totalHeight-70);
$('#mcs_container').css('height', totalHeight);
}
Does anybody know how to do anchor points to the sections in the scrollbar. I tried adding them as a regular HTML anchor point and it didn’t work. Any help would be greatly appreciated.
Will
Will, check the http://www.blog.kartogram.co.uk/post.cfm/custom-functionality-for-custom-scrollbar
I think that’s what you’re looking for.
Hi!
great plugin, works awesome!
However, is there any way to utilize css-tranformations for the animation instead of javascript? I’ve tried briefly whith https://github.com/benbarnett/jQuery-Animate-Enhanced but the animation gets jerky and erratic. Any ideas?
Hello!
I’m very stuck on this.. please excuse my newbieness;
I have merged parts of blogger with my website, however i’m unhappy with the scroll bar; I’m guessing I would have to add this script that is mentioned here to blogger but i’m quite confused about the steps of doing so..
here is the page http://fatcatgigs.com/uploads/3.0/home.html
any help would be wonderful! (starting at step1!)
Hi Malihu,
I have updated the mobile plugin extension to add some custom parameters. Now you can choose between vertical/horizontal scrolling as well as scrolling distance.
http://www.blog.kartogram.co.uk/post.cfm/jquery-custom-scroller-mobile-ext
Simon
Really Very Nice Blog. Its very useful stuff. Thanks for sharing it. Keep sharing more such useful stuff.
Thanks Malihu for the great script.But i have one problem, i can’t find a way to put all of my content inside the scrollable area.It always chops the last few sentences.
One person above also had the same issue, but no one responded.
So i have put the files online, just click on Biography tab, and you will see what i mean.There should be one more sentence, but it is cut off.
I think it is Css related, but i have tried everything, and i just can’t get it to work.
Link: http://www.madebym.net/test/index.html
Thanks!
A little edit to my post, i managed to get it to work, but only with the non-adjustable version.
Still can’t get the others to accomodate all of my content.
Hej, Malihu!
Thanks for the great tool!
I also got a problem with a horizontal scroll.
The scroller itself moving just fine, but the images are not.
If I test the page I try your scroll at in the offline browser (running the content from my hard drive) the scroll works just fine!
But when I upload it to my hosting and running on WEB the problem appears.
Do you have any idea about how to fix it?
Here is the link: http://zaklep.spb.ru/lenztest/index.html
I read the comments through but didn’t find anything that would work for me.
Thank you.
I’m having issues making #mcs3_container work without absolute positioning. Is this possible? I have a fluid layout and want the horizontal positioning, and width and height of the content to change, and the scrollbar be used when required.
Is this possible?
Thanks
I’m having a strange problem. When I scroll down the content instead of going up is going down. Anyone knows why?? Thanks
OK. My are float:left; if they are floar:none the scroll as it is suppose. Bu t I realy nead to specify the float, bacause I have side-by-side . Any ideas?? Thanks
this plugin is not working within a table :/ but works without a table
please help me up with this
Can someone resolve my problem?
i need to use this plugin within a table but its not working within a table
Would be nice if you could pass the function which you could call when scroll bar reaches the end. In this way we can call load function for new content. Is it possible?
Thanks
balboa
Hi again,
I modified your code in function Scroll in following way:
function Scroll() {
var draggerY = $dragger.position().top;
var targY = -draggerY * scrollAmount;
var thePos = $customScrollBox_container.position().top – targY;
$customScrollBox_container.stop().animate({ top: “-=” + thePos }, animSpeed, easeType);
if (draggerY == $dragger_container.height() – $dragger.height())
bottomReachedFunction();
}
and the function declaration:
$.fn.mCustomScrollbar = function (scrollType, animSpeed, easeType, bottomSpace, draggerDimType, mouseWheelSupport, scrollBtnsSupport, scrollBtnsSpeed, bottomReachedFunction) {
so now i am using your plugin in way:
$(window).load(function () {
$(“#mcs_container”).mCustomScrollbar(“vertical”, 400, “easeOutCirc”, 1.05, 20, “yes”, “yes”, 10, bottomReached);
});
function bottomReached() {
alert(‘bottom reached’);
}
I don’t know if it is best way to do it but now I can pass the function for loading new content or hiding arrows or so. Of course it should be done for horizontal scroll. I f you find it useful you can update your plugin
cheers
balboa
Is there a good way to hide the buttons when the contents are scrolled to their maximum? So initially the Up/Left button would be invisible, it would then change to visible once the content is scrolled, until the left value = 0 again. Likewise the Down/Right button would get hidden when the content is scrolled to the end.
I’m willing to extend the existing plugin, but I’m hoping at least for a little direction.
Is there a good way to check the scroll bounds when scrolling so I can implement this?
Hi,
I’m trying to use this plugin with WordPress but I can’t get the mouse scrolling to work. The scroll works only when I drag it.. Any ideas?
Hi,
I’m using you plug-in and it’s great. But I’ve problems with elements that does not have the “id” attribute
So I’ve changed the way it looks for components and now it works also with elements without the “id”:
$.fn.mCustomScrollbar = function (scrollType, animSpeed, easeType, bottomSpace, draggerDimType, mouseWheelSupport, scrollBtnsSupport, scrollBtnsSpeed)
{
var $this = $(this);
var $customScrollBox = $(".customScrollBox", $this);
var $customScrollBox_container = $(".customScrollBox .container", $this);
var $customScrollBox_content = $(".customScrollBox .content", $this);
var $dragger_container = $(".dragger_container", $this);
var $dragger = $(".dragger", $this);
var $scrollUpBtn = $(".scrollUpBtn", $this);
var $scrollDownBtn = $(".scrollDownBtn", $this);
var $customScrollBox_horWrapper = $(".customScrollBox .horWrapper", $this);
.....
I hope it helps.
Thanks.
Just wanted to do the same, you saved me a few minutes. Thanks.
Thank you for creating this jquery scroller!
Used your scroller on a project I am currently working on..will let you know once launched!
Great plugin! I’m having an issue though:
I can’t get it to work with JQuery UI Tabs. It seems that whatever tab is shown when the slider loads will display it properly, but it’s broken on every other tab.
Example here
Click between Bourbon and Tennessee to see the problem. If I load the page then quickly switch to Tennessee, that slider with work fine but Bourbon will be broken.
Any help would be greatly appreciated!
Great plugin though I had the problem using it on two columns floated left content. after some investigation occured that scrollAmount seemed to be calculated incorrectly (became negative), so I’ve added Math.abs to it and it’s working fine now:
var scrollAmount=Math.abs(totalContent-(visibleHeight/bottomSpace))/(draggerContainerHeight-draggerHeight);
line 316
actually Math.abs didn’t fix that (although initially ie appeared fixed.
it was just .content lost his height – clearfix helped
hello how are you, scrolls bar excellent, I have relieved much of work for my site, I’m using the right model I modified the style sheet but do not remove or increase the shadow that has the content box, I thought it was a png, so a remote file has to be coding but not where your configuration, you can helpme? thanks
Hi, I’m using your plugin jquery-thumbnail-scroller for a project on college and
I have some issues with.
I have images with links – 26 at total – in a scroller and a drop-down menu at
the top of the page and I need that the scroller focus on the webpage open – for example
I have the video 12 opened and the scroller was on the firs video, what I need is
the scroller starts in the video 12 – I already try to deslocate the start of the
scroller tih the “-X px” and it works for thr start bu I can’t return to the video 1
– the scroller, in fact, starts at the position -300 (for example) and became inaccessible
for the beginning and explode the end (I have, for example, 300px after the suposed
and of the scroller) – and changing the numbers at the JS file I can’t do this also (
focus the start of the scroller on the active video).
So, is there any solution for that?
The code I changed was on that part:
$scrollerPrevButton.click(function(e){ //previous button
e.preventDefault();
var posX=$scroller.position().left;
var diffX=totalWidth+(posX-$this.width());
var posY=$scroller.position().top;
var diffY=totalHeight+(posY-$this.height());
$scrollerNextButton.stop().show(“fast”);
if(options.scrollerOrientation==”horizontal”){
if(posX+$this.width() >= 0) {
$scroller.stop().animate({left:”+=”+$this.width()},options.scrollSpeed,options.scrollEasing,function(){
if(posX+$this.width() == 0){
$scrollerPrevButton.stop().hide(“fast”);
}
});
Here a exemple for the problema that I have now:
http://octopuz.com.br/producao/playlist/playlist.php
Hi. I’m using this content scroll in a page. This page has 4 containers that will need the scroller.
All the 4 section are positioned in the same place. When the page is loaded all the section are fadeOut and the first one is fadeIn. To view all the the others the user just click on each the menu tabs and its content fadesIn
I renamed the sections to mcs_container_1….mcs_container_4 and call 4 time the scroller: $(“#mcs_container_1″).mCustomScrollbar(…);… scroller: $(“#mcs_container_4″).mCustomScrollbar(…); Also I have this
#mcs_container_1 .customScrollBox{overflow:auto;}
#mcs_container_1 .dragger_container{display:none;}
……
Its not working. Could it be because the fade behaviour??
Thanks all. Nice work
Is it possible to use this scrollbar in an iframe?
Shall I use it in the html that appear in the iframe OR shal I use it in the iframe directly (and how?) ?
Thanks
Hello,
It seems to be a great plugin, however i tried to use it and for me there are some points that say to me that it could be more efficient :
So, why i will not use this plugin :
- We need to add manually some html tags into the page : this tags could be added by script at the loading ;
- ClassName are to much “usuals” and can be already used in the page : this className should be unique by using a prefix (mcsb-class for example)
- Css use a defined ID selector (#ms-container) instead of a generic main className : it should be more generic
- Css defined are to much strict to be used in different cases
So i hope this point help you to make your plugin perfect ^^
The script looks good but have major problem that have to be fixed. when zooming in at the browser, and then scrolling, all the content is getting messed. can you please help solving this issue ?
This happens only at chrome
Its a great plugin . Thanks!
Thanks, graet work. Used on:
Strong & Unique
An internal “scrollToItem” function would be great, but why would I be rapacious?
Hi, excellent work. I really love these kind of 50′s style images, where are they from, who created them?
Thanks
great great script. i am finding though that if I load it half way down the page, that the browser goes immediately to it on page load – as though it has focus added – has anyone else come across this>?
Hi Malihu!
great, great work!
my question is: is it posible to have two scrollbars (draggers) for one scroller like this:
http://dev.ljube.com/Screenshot2012-03-13at01.56.01.png
left him to move, but I can not get him to move content
the right working fine.
thanks in advance and have a nice time
Hi Malihu!
Thanks for an awesome plugin, the more I go into the whole jQuery/Ajax thing the cooler it seems to get.
I’m using this plug-in in a project and will send you a link once im done.
I have a question though:
With regards to my dynamic content I am only loading a section of my external page. My href code looks like so:
As you can see in this example, im loading the “.content” contents from the about.html.
Now for the big question:
I have a flash image viewer im my main html (index.html) which contains links to for example “about.html”.
Is it possible to load content through flash using the dynamic loading fuction you have included in your custom scroller script?
Just to refresh your memory – the load custom content javascript:
function LoadNewContent(id, file) {$("#" + id + " .customScrollBox .content").load(file, function () {
mCustomScrollbars();
});
}
Just my href code again (somehow does not show on my previous post):
a onclick=”LoadNewContent(‘mcs_container’,'about.html .content’);return false” href=”#” class=”infos”
Hi Malihu!
congratulations for your work!
I have a problem with the plugin, often dont show all the content and cut off the last few lines. This always happen when i load the page with Chrome and its cache is empty. When a recharge the page, it show the content right, although this not always happen.
Any idea? Thanks a lot!
I show the value of “scrollAmount” variable in the first load of the page.
When i resize the window, the “scrollAmount” variable changes to the correct value.
Why this variable dont take the correct value in the first load?
I’ve solved the problem.
I used $(document).ready(), instead of $(window).load().
So many hours wasted…
Hi,
I tried using this scroller to mobile page, the up and down button doesn’t work
can this compatible to mobile?
Hope to hear from you soon, Thank in advance
Hello Malihu,
Thanks for the great tool!
I also got a problem with vertical scroll bar.
when i try to scroll the content down by using scroll or button the content scroll’s in opposite direction.
Any advice how to track down the issue
below is the css I used:
#mcs7_container{position:relative; top:10px; margin:0; width:100%; height:100%; padding:0 1px; }
#mcs7_container .customScrollBox{position:relative; height:100%; overflow:hidden; width:100%}
#mcs7_container .customScrollBox .container{position:relative; width:95%; top:0; float:left;}
#mcs7_container .customScrollBox .content{clear:both;}
#mcs7_container .customScrollBox .content p{padding:0 5px; margin:10px 0; color:#000000; font-family:Verdana, Geneva, sans-serif; font-size:13px; line-height:20px;}
#mcs7_container .customScrollBox .content p.alt{padding:10px 5px; margin:10px 0; color:#000000; font-family:Georgia, “Times New Roman”, Times, serif; font-size:17px; line-height:19px; color:#999;}
#mcs7_container .customScrollBox img{border:0px solid #fff;}
#mcs7_container .dragger_container{position:relative; width:9px; height:80%; float:left; margin:18px 0px 10px 0px; background:transparent; cursor:pointer -moz-border-radius:2px; -khtml-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; cursor:s-resize;}
#mcs7_container .dragger{position:absolute; width:6px; height:30px; background:white; text-align:center; line-height:30px; color:#999999; overflow:hidden; cursor:pointer; -moz-border-radius:2px; -khtml-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; border-width: 1px; border-style: solid;}
#mcs7_container .dragger_pressed{position:absolute; width:6px; margin-left:0px; height:60px; background:white; text-align:center; line-height:30px; color:#999999; overflow:hidden; -moz-border-radius:2px; -khtml-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; cursor:s-resize; border-width: 1px; border-style: solid;}
#mcs7_container .scrollUpBtn,#mcs7_container .scrollDownBtn{position:absolute; display:inline-block; width:14px; height:15px; margin-right:-1px; text-decoration:none; right:0; filter:alpha(opacity=20); -moz-opacity:0.20; -khtml-opacity:0.20; opacity:0.20;}
#mcs7_container .scrollUpBtn{top:2px; background:url(mcs_btnUp.png) center center no-repeat;}
#mcs7_container .scrollDownBtn{bottom:1px; background:url(mcs_btnDown.png) center center no-repeat;}
#mcs7_container .scrollUpBtn:hover,#mcs7_container .scrollDownBtn:hover{filter:alpha(opacity=60); -moz-opacity:0.60; -khtml-opacity:0.60; opacity:0.60;}
is there a way to have a ‘load more’ incorporated into this. I have your scroll script up and running and I have a ‘load more’ button in place. The button does indeed load the content BUT the scroll bar will not adjust to the newly loaded content. Any help/direction would be great. Thank you!
Hi. I have a problem with script, because on Chrome, when I start scrolling with dragger (mousewheel is ok and clicking on dragger_container is well) my dragger escape ok 292px to top and all page is scrolling down. Everything happens very fast. I tried many different ways, but none of them helped. Please help.
In FF scroller is excelent.
Regards.
Hi,
I am also interesed ina magnetic kind of scroller.
For example it would be awesome if we could scroll a list wich automatically snaps to its rows so that the visual presentation is always cosistent.
Any idea how this could be done ?
We have updated the mobile extension plugin for Malihu’s scroller. The new update brings full touch support + already existing scrolling using buttons on mobile devices. You can find the plugin on our blog: http://www.blog.kartogram.co.uk/post.cfm/jquery-custom-scroller-mobile-ext
Regards,
Simon
I am setting up a website using your scroller and it works great so I would first like to say thanks. My question is how do I load dynamic content into the div on the first pageload, I am sure it is possible but I am not all that familiar with jquerry scripting so some help would be greatly appreciated. Thanks.
Hello.
First of all, congratulations on the scroller. I am using it on all of my trip reports just fine. However, I am having an issue with scrolling when I try to set it up on my main page. I am lost as to what may be the reason for it. My only thought is it somehow conflicts with another jquery script I am using for jumping to different page areas. I would appreciate any suggestions from anyone on this issue. Thank you! The website url is http://dzikizachod.com
For anyone else looking for a solution to solve the ‘reverse scrolling problem’:
Never forget to finish floating elements by inserting a ‘clear:both’ div after these.
Example:
laskdjlaskdjflsd
laskdjlaskdjflsd
Without the ‘clearfix’, scrolling seems to be upside-down.
I am new to JQuery so pardon my ignorance. I would like to use the sliders but they are too wide for the place where I want them to be. I tried to adjust the width on CSS file but after I do that the slider gets lost. What am I doing wrong?
I’m confused on how to theme these… there doesn’t seem to be any writeup, and a basic test including _only_ what is necessary to implement the scrollbar yields.. less than desireable results! The CSS file included with the plugin is too specific to your demo page. Any guidance would be great!
it is not working in my case, i have tried everything, but none of the custom scrollbars is working.. I’ll be very thankful to you if you can tell me what’s the bug in my case!
thanking you in anticipation!
same here, i see the bar, but it wont move:(
how do i use this program in Drupal 6….. when i do the custom scroll bar does not appear and instead the default scroll bar appears…. do help me out…. Thanx
There is litle bug:
if you dynamically change scroller container content and it height < scroller container height, than scroller disapeared, but mousewheel events continue to work.
I love this plugin but can’t seem to make it work for my Joomla-based site (http://ourphilippines.tv/news). The custom scrollbox works fine, but the scrollbar customizations don’t work. I’m pretty new at this, so please forgive me if I’m just missing something obvious here.
Great custom scroll JQuery script, Malihu! Awesome work!
In regards to the issue with dynamic contents, one quick work around has done the trick for me, so I thought I’d share it with you.
So as loong as the content div is loaded and the scroll bars displayed (otherwise it doesn’t work) I found it works resizing the dragger.
Here is a quick line that did the trick for me:
$(“.dragger”).height( ( ($(“#mcs_container”).height() / $(“.content”).height() ) * 100) + “%” );
It’s not that elegant and I haven’t tested it on different browsers and OS’s, but it gets the job done.
Thank you !
Easy setup and works great.
http://www.soslignes-ecrivain-public.fr/Nivo-Slider-change-caption-position-for-each-slide.html
Thanks for your valuable work Malihu!
Hello,
Thank you for sharing this scrollbar for free!
I already read in the comments about making anchors in the content and that the scrollbar disappears. You mentioned it is difficult to program, is there any chance you will make this adjustment in near future though?
Thanks for your reply
laurens
Very nice work.
I have a problem with your plugin regarding an special requirement in my website and I tried to solve it without success due to my lack of expertise.
I have a page with 3 elements using vertical scrollers and they work fine. I would like to merge these elements in an way I could scroll then horizontally. I float the three elements in order to have them in the horizontal position and build in the horizontal scroller to move then all. The problem is that the plugin verify that the class names inside each scroller could be in the horizontal controller and change all scroller horizontally together. I changed your source in order to have two separated plugins changing the name of all classes to avoid having the same classes names inside the main scroll controller without sucess. Can you thing in a solution for this, I mean having scroller inside scroller and having them working each without interfering in the other?
I will continue to find out why my ‘unusual’ solution did not work until them.
My temporary solution worked.
This is a wonderfull plugin, exactly what i was looking for.
I customized it a little and used in . Works great!
Ευχαριστώ!
what a great plugins..! it’s really nice.
I have one problem with this plugins in chrome browser . when i zoom the page and scroll the content then it take more space in bottom and scrolling not getting fine…. can u fix in demo version…
Thanks
Its cool, but when scroll border is goes top of container frame
how can I set to have some space, because I use to show photo gallery. Please help.
Hi,
Can someone please help me determine why the bottom of my copy is cut off within the scroller? As you scroll down I am missing the last couple of paragraphs of my copy. I’m on Firefox 11.0
Here is an example.
http://inlineinteractive.com/riverhouse/GuestHouse.aspx
I cant seem to get it to work within a jQuery tools .overlay()
any insight?
Got it. Had to specify the container height in pixels rather than percentage.
Hi malihu, this is the best “custom scroller” plugin I’ve seen around so far.
Great job dude
Pirolab
How can you add a vertical scroll pane or bar that you have created in flash cs5 to a site that has been coded purely in notepad?
Thank you so much for the plug in. So nice of you to supply this to everyone! Will use it on a client’s project!
Hi
I’ve used your script and it works great. I just have the problem that the footer of the site is going in beneath the div. I’ve fixed it by adding padding to the footer. But I’d rather change the div styling to prevent this, would that be possible?
Hi
I’m trying to implement this amazing plugin. In my case it’s a page with several areas with a vertical scroll.
The content from each area came from a database, and the number areas can vary. So I I must created a loop:
$j=0;
while(there’s results){
echo”
<div id='mcs_container_".$j."'
….other divs and content here….
at the bottom of the file I have the code
.customScrollBox{overflow:auto;}
.dragger_container{display:none;}
function mCustomScrollbars(){
$(‘.newsScrollContainer’).each(function(k) { // newsScrollContainer is a parent element
$(“#mcs_container_”+k).mCustomScrollbar(“vertical”,300,”easeOutCirc”,1.05,”auto”,”yes”,”yes”,15);
});
}
All the areas are positioned in the same position. When the page loads just the first one is visible an all the others are hidden. When I click in a title, the corresponding area becomes visible (fadeIn and fadeOut)
Problem: in this situation the scroll bar is display: none;
In a second situation I removed the count variables($j and var k). In this case the scroll bar appears. But when I click to show other area his corresponding scroll bar isn’t updated, just when I make a second click.
I this my first approach its the correct one, but What it’s missing or what I’m making wrong??
Thanks
no matter what i do, i cant get this to work. I see the bars, they wont do anything.
What’s the deal with the inverse scrolling? I’ve seen it mentioned a number of times but seemingly no knowledge or resolution.
I do like this script, but can’t get past this barrier.
Also, I will try and custom implement but this methodology of calling each div by name for the onload is a bit of a pain. I’m working with multiple scrollers called ‘on-the-fly’ and constructed when needed, so I’m having to do that and then call them from an array of build ids at the end. Headache.
But, none-the-less… well done on a beautifully executed bit of kit. Just love to get past that first niggle.
For those who experience this, I’ve just solved it for myself by doing a clear: both after each element in my content div.
The elements within it were, for me, float: left; and that created I guess a collapsed div as far as this script was concerned. Something like that anyway.
Hi malihu!
Thank you very much for your great work! Everything works fine!
But if I use your great work into the bxsider (http://bxslider.com/) it needs much time to bring the down button to work. it depends on how long ist the hidden content. But if I click one time the up button the down works fine.
Have you any idea how I can solve the problem
Many thanks to you
Werner
You may find the Problem here:
http://www.tcm-konrad.at/alpha/therapie_slide.php?sub=2
(for demonstration just use short clicks)
Very nice pulign…my ASSS! Your mother fucker IDIOT!
Great plugin! I encountered a bug of sorts (at least in my usage) and I think others could potentially run into the same problem. I have lots of dynamic content that may or may not need the scroll bar. When I load new content && if the old content needed scrolling && if new content doesn’t need it, then the mousewheel is still active and gets a little crazy. Even when I defined parameter 6) to “no” this issue persisted. The solution for me was to add (on line 323 of jquery.mCustomerScrollbar.js) the line $customScrollBoc.unbind(“mousewheel”);
Now- when “no” is defined in the parameters, the mousewheel is truly turned off and the bug is no-more. Hope that helps. Thanks very much for developing. ~ pj
*typo correction… new code on line 323 should be: $customScrollBox.unbind(“mousewheel”);
it is not working, I did as you recommend and I have the code to prove it, so far, it only shows the bars it is not moving at all. I’m using safari for leopard G5 mac. here is my scrpt from your site, maybe I’m doing something wrong but so far looks like your but is not working.
$(document).ready( function () {
$.ajax({
type: “GET”,
url:”http://vimeo.com/api/v2/iglesiafls/videos.xml”,
dataType: “xml”,
success: function(xml){
$(xml).find(‘video’).each(function(){
var thumb= $(this).find(‘thumbnail_medium’).text();
var id= $(this).find(‘id’).text();
var title = $(this).find(‘title’).text();
var url= $(this).find(‘url’).text();
$(”).html(”+title+’‘).appendTo(‘.content’);
});
}
});
});
$(window).load(function() {
$(“#page-wrap”).mCustomScrollbar(“vertical”,400,”easeOutCirc”,1.05,”auto”,”yes”,”yes”,10);
});
$.fx.prototype.cur = function(){
if ( this.elem[this.prop] != null && (!this.elem.style || this.elem.style[this.prop] == null) ) {
return this.elem[ this.prop ];
}
var r = parseFloat( jQuery.css( this.elem, this.prop ) );
return typeof r == ‘undefined’ ? 0 : r;
}
HELP!!!!
Thank you
Great job !
Fuck you too hard
Hello Malihu,
That was the best scroll bar plug-in I’ve found, so thanks for all.
But can you help me, with some extra thing.
I put in a menu, so when I click on something in the menu it dynamically load new content to the container. But how can I change the page’s background without opening a whole new page. Basically I want to load dynamically the background image with the content. I don’t know anything about jQuery so I would be pleased if you could help me.
Many thanks to you,
Edvard.
PS.: Sorry for my English. It’s not my native language.
Hi,
is there a way that the horizontal list snaps to its items so that only FULL items are displayed after scrolling ?
Noone ?
seems like this worked for everyone but me
It is an awesome plugin, but can you add another function, which used to get the specific location of the content page, when it is used.
which means, another parameter determine, the location of the scroll bar, 0 means the content page at the top, and 100 means the content at the bottom.
I used this plugin in a dynamically adding page, like this:
$(“#somebutton”).click(function(e){
var newBoxContent= contents I need.
$(“#a_div table tr:last”).after(newBoxContent);
$(“#a_div”).mCustomScrollbar(“vertical”,100,”easeOutCirc”,1.05,”auto”,”yes”,”yes”,15);
});
But when this function has been executed, the scroll bar is back to the top, so is the content. If I want to press that button again, I have to drag the scroll bar to the bottom.
So can you do something for that?
If you have a new version of this plugin, please inform me through my email.
And wish to hear from you!
THX
Hi, I try to add my code to it , and I think I’ve achieved the function I just mentioned above:
//get the bottom
if(scrollBtnsFinalPosition==”bottom”){
$dragger.css(“top”,$dragger_container.height()-$dragger.height());
var CYK_draggerY=$dragger.position().top;
var CYK_targY=-CYK_draggerY*scrollAmount;
var CYK_thePos=$customScrollBox_container.position().top-CYK_targY;
$customScrollBox_container.css(“top”,”-=”+CYK_thePos);
}
which is attached to the back of the function Scroll(){}
Having an issue where the scroll right button for horizontal scroller won’t work until either the left scroll button or scrub bar is activated. Any thoughts?
Thanks!
hi,
there is one bug in this plugins ; when window resize then whitespace is coming in the bottom of scrollbox in google chrome… can you please fix it…
i am trying to resolve it from since one week but not getting well please please……
give me idea to fix it
thanks bro,
realy nice plugin
Please forgive me if this is a question that is answered elsewhere – I’m new to utilizing jquery elements. I am attempting to create a page that utilizes two jquery elements – one of your custom content scrollbars and a slideshow viewer (http://www.slideshowbox.com/). I have your scrollbar working properly on a page, but when I add the slideshow viewer element onto the page, it breaks the scrollbar. Might you be able to point me toward where the conflict lies and how I might resolve it?
Thank you in advance. I am VERY impressed by the appearance, customizability, and functionality of your scrollbar… hoping I can get it working!
Hi, Great plug in but need help please.
I hope to use the scroller inside spry tabbed panels. The trouble is when I click on a new panel , the scroller disappears. It re-appears as soon as i resize the browser window. I understand from the section on dynamically loading content that I need to re-call the mCustomScrollbar function but I’m not sure how to do this or where the call need to be placed as I’ve tried several things but had no joy. Any advice would be great.
Many thanks.
Hello everybody
this plugin work fine in fire fox but in google chrome it need two clicks to work
http://map-concepts.com/
it work now i have put vertical horizental of vertical
Sorry this the corrected link
http://map-concepts.com/?p=ref
Hello,
I have error:
jquery.mCustomScrollbar.js:352
Uncaught TypeError: Cannot read property ‘top’ of null
How fix this?
Thanx!
109 Trackbacks
[...] Direct Link [...]
[...] Text in WebKit/CSS3Subtle CSS3 Typography that you’d Swear was Made in PhotoshopjQuery MobilejQuery Custom Content ScrollerFormation jQuery Plugin20 Beautiful Websites Designed With WixHow Your Brand Chooses Your ClientsHow [...]
[...] jQuery Custom Content Scroller [...]
[...] jQuery Custom Content Scroller [...]
[...] jQuery Custom Content Scroller [...]
[...] jQuery Custom Content Scroller [...]
[...] jQuery Custom Content Scroller [...]
[...] jQuery Custom Content Scroller [...]
[...] http://manos.malihu.gr/jquery-custom-content-scroller [...]
[...] http://manos.malihu.gr/jquery-custom-content-scroller [...]
[...] http://manos.malihu.gr/jquery-custom-content-scroller [...]
[...] http://manos.malihu.gr/jquery-custom-content-scroller [...]
jquery custom scrollbar plugin…
Custom scrollbar plugin utilizing jquery UI that’s fully customizable with CSS. It features vertical/horizontal scrolling, mouse-wheel support (via Brandon Aaron jquery mouse-wheel plugin), scroll easing and adjustable scrollbar height/width….
jquery custom scrollbar plugin…
Custom scrollbar plugin utilizing jquery UI that’s fully customizable with CSS. It features vertical/horizontal scrolling, mouse-wheel support (via Brandon Aaron jquery mouse-wheel plugin), scroll easing and adjustable scrollbar height/width….
[...] var dzone_title = 'Custom Scrollbar Plugin For jQuery'; var dzone_blurb = 'Custom scrollbar is plugin for jquery that utilizing jquery UI that’s fully customizable with CSS. It features [...]
[...] jquery custom content scrollermanos.malihu.gr [...]
[...] posted here: jquery custom content scroller 12 August 2010 | Uncategorized | Trackback | del.icio.us | Stumble it! | View Count : 0 Next [...]
[...] プロジェクトサイト：http://manos.malihu.gr/jquery-custom-content-scroller [...]
[...] here, you might want to subscribe to the RSS feed for updates on this topic.Powered by WP Greet BoxjQuery Custom scrollbar creates fully customizable scrollbars utilizing jquery UI. It creates mouse-wheel supported, [...]
[...] Custom scrollbar plugin utilizing jquery UI that’s fully customizable with CSS. Brought to you via http://manos.malihu.gr [...]
[...] jQuery Custom Content Scroller-PlugIn basiert auf jQuery UI und erlaubt es ein DIV-Element mit einem Scrollbar [...]
[...] Custom scrollbar plugin utilizing jquery UI that’s fully customizable with CSS. It features vertical/horizontal scrolling, mouse-wheel support (via Brandon Aaron jquery mouse-wheel plugin), scroll easing and adjustable scrollbar height/width. [...]
[...] Custom scrollbar plugin utilizing jquery UI that’s fully customizable with CSS. It features vertical/horizontal scrolling, mouse-wheel support (via Brandon Aaron jquery mouse-wheel plugin), scroll easing and adjustable scrollbar height/width. [...]
[...] Custom scrollbar plugin utilizing jquery UI that’s fully customizable with CSS. It features vertical/horizontal scrolling, mouse-wheel support (via Brandon Aaron jquery mouse-wheel plugin), scroll easing and adjustable scrollbar height/width. [...]
[...] jquery custom content scroller. LikeBe the first to like this post. [...]
[...] web resources 29 Dec 2010 Powered by Max Banner Ads Custom scrollbar plugin utilizing jquery UI that’s fully customizable with CSS. It features vertical/horizontal [...]
[...] Link: http://manos.malihu.gr/jquery-custom-content-scroller [...]
[...] Customizable Content Scrollbar jQuery Plugin Custom scrollbar plugin utilizing jquery UI that’s fully customizable with CSS. It features vertical/horizontal [...]
[...] Link: http://manos.malihu.gr/jquery-custom-content-scroller [...]
[...] Link: http://manos.malihu.gr/jquery-custom-content-scroller [...]
[...] jquery custom content scroller [...]
[...] Custom scrollbar plugin utilizing jquery UI that’s fully customizable with CSS. It features vertical/horizontal scrolling, mouse-wheel support (via Brandon Aaron jquery mouse-wheel plugin), scroll easing and adjustable scrollbar height/width. [...]
[...] plugin), scroll easing and adjustable scrollbar height/width. Demo, Details & Download: http://manos.malihu.gr/jquery-custom-content-scroller Tags: Featured, Javascript, Jquery, [...]
[...] Custom scrollbar plugin utilizing jquery UI that’s fully customizable with CSS. It features vertical/horizontal scrolling, mouse-wheel support (via Brandon Aaron jquery mouse-wheel plugin), scroll easing and adjustable scrollbar height/width. [...]
[...] Custom scrollbar plugin utilizing jquery UI that’s fully customizable with CSS. It features vertical/horizontal scrolling, mouse-wheel support (via Brandon Aaron jquery mouse-wheel plugin), scroll easing and adjustable scrollbar height/width. [...]
[...] o Contained Sticky Scroll, a już natknąłem się na kolejny plugin, który ułatwi nam pracę. Jquery Custom Content Scroller, bo o nim mowa, wprowadza funkcjonalność scrollbara, którą można dodać do dowolnego elementu [...]
[...] Custom scrollbar plugin utilizing jquery UI that’s fully customizable with CSS. It features vertical/horizontal scrolling, mouse-wheel support (via Brandon Aaron jquery mouse-wheel plugin), scroll easing and adjustable scrollbar height/width. [...]
[...] A jQuery plugin by Manos Malihutsakis which allows you do to create custom scrollbars for content areas that do some neat things like move their position and size, style them differently, and use easing. [...]
[...] A jQuery plugin by Manos Malihutsakis which allows you do to create custom scrollbars for content areas that do some neat things like move their position and size, style them differently, and use easing. [...]
[...] A jQuery plugin by Manos Malihutsakis which allows you do to create custom scrollbars for content areas that do some neat things like move their position and size, style them differently, and use easing. [...]
[...] A jQuery plugin by Manos Malihutsakis which allows you do to create custom scrollbars for content areas that do some neat things like move their position and size, style them differently, and use easing. [...]
[...] A jQuery plugin by Manos Malihutsakis which allows you do to create custom scrollbars for content areas that do some neat things like move their position and size, style them differently, and use easing. [...]
[...] A jQuery plugin by Manos Malihutsakis which allows you do to create custom scrollbars for content areas that do some neat things like move their position and size, style them differently, and use easing. [...]
[...] A jQuery plugin by Manos Malihutsakis which allows you do to create custom scrollbars for content areas that do some neat things like move their position and size, style them differently, and use easing. [...]
[...] Custom scrollbar plugin是一款自定义滚动条的UI JQuery 插件,它完全使用CSS定制.特点在于可以水平与垂直滚动并支持鼠标滚轮,可随意调节滚动条的高度和宽度. [...]
[...] A jQuery plugin by Manos Malihutsakis which allows you do to create custom scrollbars for content areas that do some neat things like move their position and size, style them differently, and use easing. [...]
[...] A jQuery plugin by Manos Malihutsakis which allows you do to create custom scrollbars for content areas that do some neat things like move their position and size, style them differently, and use easing. [...]
[...] A jQuery plugin by Manos Malihutsakis which allows you do to create custom scrollbars for content areas that do some neat things like move their position and size, style them differently, and use easing. [...]
[...] Demo | Descarga [...]
[...] Cross-Training in Silverlight & Flex–MVVM vs Presentation Model « Brian Genisio's House of Bilz jquery custom content scroller Deaxon's CSS playground Exploring JavaScript for-in loops | JavaScript, JavaScript Introducing… [...]
[...] A jQuery plugin by Manos Malihutsakis which allows you do to create custom scrollbars for content areas that do some neat things like move their position and size, style them differently, and use easing. [...]
[...] Custom Scrollbar [...]
[...] A jQuery plugin by Manos Malihutsakis which allows you do to create custom scrollbars for content areas that do some neat things like move their position and size, style them differently, and use easing. [...]
[...] Custom scrollbar plugin utilizing jquery UI that’s fully customizable with CSS. It features vertical/horizontal scrolling, mouse-wheel support (via Brandon Aaron jquery mouse-wheel plugin), scroll easing and adjustable scrollbar height/width. [...]
[...] jQuery Custom Content Scroller [...]
[...] Check this tutorial, its great. All you need to do a custom Scrollbar . [...]
[...] 4. jquery custom content scroller [...]
[...] Custom content scroller [...]
[...] Oggi in particolare voglio segnalarti questa risorsa jQuery per ottenere delle scrollbar personalizzate. [...]
jquery custom content scroller…
Custom scrollbar plugin utilizing jquery UI that’s fully customizable with CSS. It features vertical/horizontal scrolling, mouse-wheel support (via Brandon Aaron jquery mouse-wheel plugin), scroll easing and adjustable scrollbar height/width….
[...] jQueryのプラグイン33+1選 -2011年1月[コリス] custom content scroller(コンテンツにオリジナルスクロールバー設置)が使いやすそうでいいな。 [...]
[...] content columns use the Custom Content Scroller plugin for jQuery. I generally don’t like iframes&emdash;they actually create extra [...]
[...] Costum Content Scroller [...]
[...] Malihu's was promising, but as far as coding goes, it wasn't written to be a proper plugin and needed a lot of cleanup. [...]
[...] validation errors. Also a custom scrollbar was integrated in the modal windows – thanks to malihu. Here are the today’s [...]
[...] Custom content scroller Custom scrollbar plugin utilizing jquery UI that’s fully customizable with CSS. It features vertical/horizontal scrolling, mouse-wheel support (via Brandon Aaron jquery mouse-wheel plugin), scroll easing and adjustable scrollbar height/width. [...]
[...] Custom scrollbar plugin utilizing jquery UI that’s fully customizable with CSS. It features vertical/horizontal scrolling, mouse-wheel support (via Brandon Aaron jquery mouse-wheel plugin), scroll easing and adjustable scrollbar height/width. [...]
[...] Сайт проекта. [...]
[...] 39. Custom Content Scrollbar with jQuery and CSS [...]
[...] jQuery Framework Via: jQuery Custom Content Scroller Demo: jQuery Custom Content Scroller Link to original [...]
[...] Sample | [...]
[...] JQuery Custom Content Scroller [...]
[...] 39. Custom Content Scrollbar with jQuery and CSS [...]
[...] In order to implement the plugin, you first need to insert inside the head tag of your document the jquery.min.js and jquery-ui.min.js (both loaded from Google), the jquery.easing.1.3.js (the plugin that handles animation easing), jquery.mousewheel.min.js (to support mouse-wheel functionality) and the jquery.mCustomScrollbar.css which is the file where you can style your content and scrollbars. view sourceprint? [...]
[...] JQUERY CUSTOM CONTENT SCROLLER – This plug in is amazing for creating custom scrollable regions. It is very easy to use [...]
[...] 4. jquery custom content scroller [...]
[...] A custom content scroller created with jquery and css that supports mousewheel, scroll easing and has a fully customizable scrollbar. The script utilizes jQuery UI and Brandon Aaron jquery mousewheel plugin. Very easy to configure and style with CSS. Source [...]
[...] jquery custom content scroller [...]
[...] using a script Custom Content Scroller to create a sliding div with a customisable scrollbar. It’s almost perfect for my needs and [...]
[...] http://manos.malihu.gr/jquery-custom-content-scroller [...]
[...] jquery custom content scroller [...]
[...] 2. JQUERY CUSTOM CONTENT SCROLLER [...]
[...] Here’s the source of the plugin: http://manos.malihu.gr/jquery-custom-content-scroller [...]
[...] Here’s the source of the plugin: http://manos.malihu.gr/jquery-custom-content-scroller [...]
[...] على كلٍ، نبدأ الشرح، علمًا أنه للمُلمّين بلغة Html+CSS وليس شرحًا خاصًا للمبتدئين، وأعتذر منهم هنا. إضافة الجيكويري من عمل Manos. [...]
[...] More Information on jQuery custom content scroller [...]
[...] Plugin http://manos.malihu.gr/jquery-custom-content-scroller [...]
[...] The first one can be found at : manos.malihu.gr/jquery-custom-content-scroller [...]
[...] A jQuery plugin by Manos Malihutsakis which allows you do to create custom scrollbars for content areas that do some neat things like move their position and size, style them differently, and use easing. [...]
[...] jQuery Custom Content Scroller [...]
[...] Je plugin permet de personnaliser plutôt bien ses scrollbar, en définissant des effets de défilement, une vitesse, positionner ses boutons, etc. Plus plugin se base sur l’id des éléments, ce qui nous permet de personnaliser le squelette de nos boîtes. Il est disponible à l’adresse suivante : http://manos.malihu.gr/jquery-custom-content-scroller [...]
[...] reading: http://manos.malihu.gr/jquery-custom-content-scroller http://jscrollpane.kelvinluck.com/arrows.html #dd_ajax_float{ background:none repeat scroll 0 0 [...]
[...] Got a couple of slightly-oldie-but-goodies for you:A jQuery plugin by Manos Malihutsakis which allows you do to create custom scrollbars for content areas that do [...]
[...] 7. jQuery custom content scroller [...]
[...] jquery custom content scroller [...]
[...] s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(li,s);})(); Share jQuery custom scrollbar is plugin for jquery that utilizing jquery UI that’s fully customizable with CSS. jquery custom [...]
[...] jquery custom content scroller #dd_ajax_float{ background:none repeat scroll 0 0 #FFFFFF; border:1px solid #DDDDDD; float:left; margin-left:-120px; margin-right:10px; margin-top:10px; position:absolute; z-index:9999; }jQuery(document).ready(function($){ //put content div class, when scroll beyond this y, float it var $postShare = $('#dd_ajax_float'); if($('.dd_content_wrap').length > 0){ var descripY = parseInt($('.dd_content_wrap').offset().top) – 20; var pullX = $postShare.css('margin-left'); $(window).scroll(function () { var scrollY = $(window).scrollTop(); var fixedShare = $postShare.css('position') == 'fixed'; //make sure .post_share exists if($('#dd_ajax_float').length > 0){ if ( scrollY > descripY && !fixedShare ) { $postShare.stop().css({ position: 'fixed', top: 16 }); } else if ( scrollY < descripY && fixedShare ) { $postShare.css({ position: 'absolute', top: descripY, marginLeft: pullX }); } } }); } }); jQuery(document).ready(function($) { window.setTimeout('loadFBShare_27832()',1000); }); function loadFBShare_27832(){ jQuery(document).ready(function($) { $('.dd-fbshare-27832').remove(); $.getScript('http://static.ak.fbcdn.net/connect.php/js/FB.Share'
; }); } jQuery(document).ready(function($) { if($(window).width()> 790){ $('#dd_ajax_float').show() }else{ $('#dd_ajax_float').hide() } $(window).resize(function() { if($(window).width()> 790){ $('#dd_ajax_float').show() }else{ $('#dd_ajax_float').hide() } }); }); ; __spr_config = { pid: '4ec6bfc0396cef366300005a', title: 'Custom scrollbars Jquery Plugin (full of features)', ckw: '', chan: '', no_slide: '', slide_logo: false, pub: '2012-03-07 19:00:00', url: 'http%3A%2F%2Fwww.webdesignshock.com%2Fcustom-scrollbars-jquery-plugin-full-of-features%2F', header: 'THIS MIGHT BE USEFUL TOO' }; var content = document.getElementById('simplereach-slide-tag').parentNode, loc; if (content.className){ loc = '.' + content.className; } if (content.id){ loc = '#' + content.id; } __spr_config.loc = loc || content; (function(){ var s = document.createElement('script'); s.async = true; s.type = 'text/javascript'; s.src = document.location.protocol + '//d8rk54i4mohrb.cloudfront.net/js/slide.js'; __spr_config.css = document.location.protocol + '//d8rk54i4mohrb.cloudfront.net/css/p/4ec6bfc0396cef366300005a.css'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(s); })(); [...]
[...] example of the custom scroller and dynamic conten loader can be seen on the Malihu wbsite with a [...]
[...] jquery custom content scroller Automatically setting content width for horizontal scrollers is no longer calculated via javascript. Instead of using jQuery .each() or for statements, the width is now set by adding an additional div (.horWrapper) that wraps content and by setting the display of .container div to inline, thus expanding its width automatically (check the updated css file for details). How to use it 23/02/2011 In order to implement the plugin, you first need to insert inside the head tag of your document the jquery.min.js and jquery-ui.min.js (both loaded from Google), the jquery.easing.1.3.js (the plugin that handles animation easing), jquery.mousewheel.min.js (to support mouse-wheel functionality) and the jquery.mCustomScrollbar.css which is the file where you can style your content and scrollbars. Fixed a bug regarding pressing-dragging-releasing scroll buttons. [...]
[...] JQuery Scrollbar – Custom Content Scroller Plugin 連結在此 Share this:StumbleUponDiggRedditLike this:LikeBe the first to like this post. Leave a [...]
[...] JQUERY CUSTOM CONTENT SCROLLER [...]
[...] 테스트 화면 ; http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html 다운로드 : http://manos.malihu.gr/jquery-custom-content-scroller 부드럽게 스크롤 해줍니다 압축푸시고 jquery_custorm_scrollbar.html 여시면 [...]
[...] Page-Flip Plugins For Book-Like Interfaces The scroll bars on the verbage pages are from here: jquery custom content scroller Some other Jquery was used for the menu etc… Pretty much she's a cousin of Frankenstein. [...]
[...] jQuery Custom Scrollbar [...]
[...] jQuery Custom Scrollbar [...]
[...] jQuery Custom Scrollbar [...]
[...] jQuery Custom Scrollbar [...]
[...] jQuery Custom Scrollbar [...]
[...] Here is the source article of this [...]