This plugin allows you to easily animate any series of elements, by sequentially scrolling them. It uses jQuery.ScrollTo to achieve the scrolling animation. It is a very unrestricted plugin, that lets you customize pretty much everything from outside. You can use horizontal or vertical scroll, also combined.
What’s it for ?
jQuery.SerialScroll doesn’t have one definite purpose. It’s generic and adaptable. You can certainly use it as a screen slider. That is, to sequentially navigate a group of screens. This plugin can also animate a text scroller in no time. It can definitely handle slideshows, the high customizability of the scrolling effect lets you create beautiful animations. You can even build an automatic news ticker! Three of these uses are exemplified in the demo. Remember, it’s not restricted to these situations. It will take care of any collection of html elements that you want to scroll consecutively.
Settings and customization
jQuery.SerialScroll gives you access to a lot of options. These are:
target
The element to scroll, it’s relative to the matched element. If you don’t specify this option, the scrolled element is the one you called serialScroll on.
event
on which event to react (click by default).
start
first element of the series (zero-based index, 0 by default).
step
how many elements to scroll each time. Use a negative number to go on the other way.
lock
if true(default), the plugin will ignore events if already animating. Then animations can’t be queued.
cycle
if true, the first element will be shown after going over the last, and the other way around.
stop
if true, the plugin will stop any previous animations of the element, to avoid queuing.
force
if true, an initial scroll will be forced on start.
jump
if true, the specified event can be triggered on the items, and the container will scroll to them.
items
selector to the items(relative to the scrolled element).
prev
(optional)selector to the ‘previous’ button.
next
(optional)selector to the ‘next’ button.
lazy
if true, the items are collected each time, allowing dynamic content(AJAX, AHAH, jQuery manipulation, etc).
interval
If you specify a number, the plugin will add auto scrolling with that interval.
constant
Should the speed remain constant, no matter how many items we scroll at once ? (true by default).
navigation
Optionally, a selector to a group of elements, that allow scrolling to specific elements by index. Can be less than the amount of items.
excludenew
If you want the plugin, to stop scrolling before the actual last element, set this to a number, and that amount of items is ignored counting from the end. This is useful if you show many items simultaneously, in that case, you probably want to set this option to the amount of visible items – 1.
onBefore
A function to be called before each scrolling. It receives the following arguments: event object, targeted element, element to be scrolled, collection of items and position of the targeted element in the collection. The scope(this) will point to the element that got the event. If the function returns false, the event is ignored.
Also, you can use jQuery.ScrollTo’s settings!
The option ‘target’
This option is a new addition, included since 1.2.0. Before, you needed to call the plugin once for each scrolled element. When this option is specified, the matched elements are no longer the scrolled elements, but a container. In this case, the selectors of prev, next, navigation and target will be relative to this container, allowing you to call SerialScroll on many elements at once.
External manipulation, event triggering
jQuery.SerialScroll automatically binds 3 events to the containers. These are:
prev.serialScroll
Scrolls to the previous element.
next.serialScroll
Scrolls to the next element.
goto.serialScroll
Scrolls to the specified index, starts with 0.
start.serialScroll
(Re)starts autoscrolling.
stop.serialScroll
Stops the autoscrolling.
notify.serialScroll
Updates the active item.
This looks confusing, but it’s not. You use it like this:
Some lines of JavaScript code can help you to add nice effects to improve some features of your websites.
This tutorial explains how to implement a simple tabbed search bar using CSS and a javascript function which set “active” the selected tab and changes the value of an hidden element to set search options and execute your search only for all items related to the selected topic (for example: web, images, videos…).
HTML code for tabs I used a < ul > list with < li > element to implement tabs
elements using a progressive number for ID attribute (tab4, tab5, teab6...). Each tab call a javascript function setSearchOption() which set "active" the selected tab and set the value of the following hidden field to enable search options:
When you submit the form (using PHP or another server side language), if is set the post variable related to this hidden field ($_POST['searchop'] for example) and this variable is equal to some value (an integer or a string), then you can execute a query instead of another one. For example if you select image tab, your query will execute the search only for images.
Javascript setSearchOptions() function This is the function which set the active tab and change the value of the hidden input element:
Javascript |
copy code |
?
01
function setSearchOptions(idElement){
02
/* Total Tabs above the input field (in this case there are 3 tabs: web, images, videos) */
Do you like Digg.com webdesign? I like much its menu, simple and clean.
This tutorial explains how to implement a simple vertical menu digg-like using CSS and javascript to show/hide sub-menu. The result is like this: Step 1: HTML code HTML structure is very simple and contains two
tags (menu and sub-menu):
Copy and paste the following code in a new html page:
Step 3: Javascript to show/hide submenu Now, add this simple Javascript code to show/hide the sub-menu when an user clicks on a link contained into the menu.
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.