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
Please note the default demo over in Malihu’s blog is using jQuery 1.4. In order for this plugin to run correctly you are required to use version 1.5 and above.
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:
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/
http://manos.malihu.gr/jquery-custom-content-scroller