Introduction
After replying to a large amount of comments and emails about jQuery.SerialScroll , I decided to comment some more about this plugin, also to publish some snippets, to achieve commonly desired effects or behaviors.This should save you (and me :)) some time. It might also show you some additions, that you haven't considered.
I'll also try to show some more model calls to the plugin, so you can unattach yourself from those in the demo.
A little bit of theory
Before the snippets, I'll go through the basics, to refresh your mind.Calls to the plugin
It can be done on two different kind of elements- Element to be scrolled:
This is what you normally do when you want one single instance of SerialScroll in a page.
$ ('#pane' ).serialScroll({ //... });
- Container:
You might want to create many "SerialScrolls" in the page, you don't need to call it many times, just put the option 'target' to work.
$ ('div.container' ).serialScroll({ //... target:'div.pane' , //... });
This will allow you to have many divs with class container, which contain a scrollable div with class pane. They don't need to be divs .
When doing this, the selectos for the arrows also become relative to the container, instead of absolute. - Global call:
If by chance, you want to scroll the window, you'll need to use this approach.
$ .serialScroll({ //... });
If, for some reason, you need to retrieve this implicit element, call:$ .scrollTo.window();This will return you the element, don't use window or document.
onBefore
This setting, which is a callback, will empower some snippets, so you better learn about it.$ ('div.container' ).serialScroll({ //... onBefore:function ( e, elem, $pane, $items, pos ){ //... }, //... });Note that:
- The 'this' is the element that triggered the event.
- e is the event object.
- elem is the element we'll be scrolling to.
- $pane is the element being scrolled.
- $items is the items collection at this moment.
- pos is the position of elem in the collection.
- if it returns false, the event will be ignored.
- Those arguments with $ are jqueryfied.
The snippets
Now, what you really want, the code required to do all those fancy things, that the plugin doesn't do natively.One note, all the snippets are wrapped with a document ready and they use symbolic ids. Needless to say, you don't need to copy the ids, or even USE ids.
Only the relevant settings are specified, so you will see "..." reminding that it's incomplete code.
You configure the selectors and the rest of the settings, according to your needs.
- Use constant auto-scrolling. get new
- Hide the arrows when the limits are met. get
- Stop the auto scrolling on hover. get
- Scroll from right to left (or bottom to top). get
- Manipulate the widget using the keyboard. get
- Generate a pager based on the items. get
Concluding
I hope this helped and saved you some time, I also hope you learnt something new.I plan to add more snippets as they come up from requests.
If you have any doubt, don't hesitate to ask.
).
