| DISCUSS |  |
32 |
Following a little discovery of my own and that being confirmed by the creator himself it turns out that jQuery custom content scroller by malihu is not functioning as intended if loaded using mobile browser. That clearly sounded like an issue since nowadays millions are browsing using mobile phones and tablets. And as resolutions on those devices are allowing websites to render in their normal state rather than the mobile, stripped off of all the goodies one, it was obvious something had to be done to enjoy such a great plugin in all environments.
This time, as opposed to the previous enhancement to custom scroller that was published few month ago on this very same blog, I have written the plugin making the implementation much easier.
To start with, If you haven't set up the scroller yet, follow the tutorial from the original plugin site. Please note to be able to scroll in the mobile browsers you will be required to add up & down buttons [optional as full touch functionality has been added in the latest version].
The jQuery custom content scroller plugin and implementation tutorial can be found here:
http://manos.malihu.gr/jquery-custom-content-scroller
Now that you are done with it let's add the mobile functionality in these few easy steps:
1. Firstly download the script using the download box at the bottom of this post.
2. Add the script right after original custom scroller.
3. Add the following extra right after you load custom scroller so it looks something like this:
"vertical",200,"easeOutCirc",1.05,"auto","yes","yes",10
);
if (jQuery.browser.mobile == true) {
$("#container_name").mCustomScrollbarMobile("vertical",200,5);
}
Bear in mind the first bit of the above code is what you meant to have already before starting with the step 1.
What the script does is first of all a quick check on the type of browser you are using (big thanks for this goes to the detectmobilebrowsers.com). Then should the mobile browser be detected, a little mobile enhancement is being applied to allow users scrolling of the content using up & down buttons on their mobile devices.
Please note it is a so called version 1 of the script, hence you will have to tap on the button to achieve scrolling. Holding down your finger will most likely cause execution of the browser's own built in functionality such as nearby text selection etc. Also script so far only works for the vertical scrolling.
After few requests I have updated this plug-in to so called version 1.1 which now includes two parameters - choise of scrolling direction (vertical/horizontal) and scrolling distance.
The latest update brings the full touch functionality. Now you can scroll the content div not only by using the extra buttons, but the touch gestures too. Plug-in supports up/down and left/right movements.
Please note an extra variable has been added to the call of the plugin - the distance of scrolling when scrolling the main div using touch gestures. Therefore the call to the plugin now should contain three variables: direction, distance of scrolling when using buttons and distance of scrolling when using gestures.
Also, it is worth mentioning that scrolling using the dragger is not supported. As styling allows it to slim down significantly, in most cases it is hard to touch the right element in the first place. Therefore at this very time there are no plans in place for implementation of such functionality.
The script has been tested using few mobile browsers, such as Android for tablets, safari for iPhone and Symbian. Newest NokiaBrowser was not recognising scrolling gestures. However the fallback scrolling using buttons is working as it should.
If you discover the browser that fails to load the script, the suggestion would be to double check the first lines of code in the downloadable file to see whether your mobile browser is in the list. Also please share such discovery in the comment section below so the script could be updated.
Thanks to Ashlee for the discovery the script was not working on iPads. Problem is fixed now.
Also if you found this article helpful, you might be interested in adding further custom functionality to this jQuery content scroller. Take a look at our previous post:
Custom Functionality For jQuery Custom Scrollbar
So get coding and as usual, should you need any further information feel more than welcome to use the comments section below or contact us directly at blog@kartogram.co.uk
Regards,
SD
http://detectmobilebrowsers.com/
| DOWNLOAD: | |
 |
customScrollBarMobile.js |
| DEMO: | |
 |
see the demo here |
32 responses so far //
@joe, I'll try to extend it for horizontal scrolling as soon as I'll have some free time.
No mobile browser detected.
Mozilla/5.0 (iPad; CPU OS 5_0_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A405 Safari/7534.48.3
Any ideas?
http://jsfiddle.net/ashleigh8/Xdt76/
it works great now
@Simon Dau, great initiative! Is it hard to get this to work on horizontal scrolls?
I have a problem.
With txt work great but with dinamic content in php no work.
Can you elp me?
tks
<script>
$(window).load(function() {
mCustomScrollbars();
});
function mCustomScrollbars(){
$("#mcs_container").mCustomScrollbar("vertical",400,"easeOutCirc",1.05,"auto","yes","yes",10);
}
if (jQuery.browser.mobile == true) {
$("#mcs_container").mCustomScrollbarMobile("vertical",400);
}
/* function to load new content dynamically */
function LoadNewContent(id,file){
$("#"+id+" .customScrollBox .content").load(file,function(){
mCustomScrollbars();
});
}
</script>
<div id="mcs_container">
<div class="customScrollBox">
<div class="container">
<div class="content">
<?php $mytest = new nuggetz("tariffe");?>
</div> <!--class content -->
</div> <!--class container -->
<div class="dragger_container">
<div class="dragger"></div> <!--class dragger -->
</div> <!--class dragger_container -->
</div> <!--class customScrollBox -->
<a href="#" class="scrollUpBtn"></a> <a href="#" class="scrollDownBtn"></a>
</div> <!--id mcs_container -->
BTW your if (jQuery.browser.mobile == true) { bit is outside of the function brackets. That might be the problem.
I used nokia 5700 express music with obera browser.
In the normal browser on Pc e mac work great.
You can find it here: http://dev.kartogram.co.uk/index.html
BTW please re-download the plugin as a small amendment was made to it so it doesn't struggle on Android native browser. Though iOS browsers where not affected by it so even with your current code it should work. Hope the page will be of any help to you and will work as a good starting point.
Thank you for your hard work on this plugin. If you have some time, please, could you tell me how to make the dragger drag content on mobile. I wont impleted this for the slider in this site: http://acm.test.wildsea.nl/ (slider is on the right side)
I tried many different ways, but I could not adjust your plugin to do this.
My knowledge of jQuery are not very strong and perhaps it proved insufficient.
Thank you very much and have a nice day,
Ljube
thank you for replay.
I found some kind of solution. I used this: http://acm.test.wildsea.nl/wp-content/themes/acm/js/jquery.touch.js for make drag draggable in mobile (ios & android). The solution is not perfect, but work.
Kind regards,
Ljube
I implemented the custom scrollbar from malihu. And now I was interessed in make some compatibility with mobile browsers for the scroll bar.
I tryed your code and for iPad it didn't work and in my mobile phone (android) it scroll down, just while I'm touchin the screen. If I stop touch the content automatically scroll too the top as you can test.
Any tips ???
Thanks all for the good work
I've tested it on the android tablet and it works perfectly fine (although your original page didn't). Have a study on the source code of it to see what's changed and you'll be good to go. Cheers, Simon.
I found the 'tmbt' variable but adjusting that didn't seem to have much result, so I presumed this was something that was going to be worked into the script at some point but wasn't yet working?
Leave a Comment //