Deepzign: HoverScroll jQuery Plugin

To be able to use the HoverScroll plugin you must first include the script and css in the head section of your page along with the jquery library.

>
<head>

link type="text/css" rel="stylesheet" href="jquery.hoverscroll-0.1.0.css" />

script type="text/javascript" src="jquery.js">script>
script type="text/javascript" src="jquery.hoverscroll-0.1.0.js">script>

head>

Then, you will need some html markup:

<ul id="my-list">
   <li style="width:67px; height:50px;"><img src="images/maja1_th.jpg" />li>
   <li style="width:67px; height:50px;"><img src="images/maja2_th.JPG" />li>
   <li style="width:67px; height:50px;"><img src="images/maja3_th.JPG" />li>
   <li style="width:67px; height:50px;"><img src="images/maja4_th.JPG" />li>
ul>

Note for horizontal HoverScrolls:
The width and height is specified on each list item because if the images are not loaded as fast as the code (which happens often) the script cannot reliably determine the width of the content.
When this happens only one item is shown from the list. Generating HoverScrolls upon the window.onload event within a 10ms setTimeout call and specifying the width and height of each item (in the html or in a separate css file) can resolve this problem. The sample above was generated by a php script which determines each images width and height and prints it out in the html, but it is abit useless in this example as all the images have the same size.

Finally, in the head again (after including the scripts) add the following block of code to generate the HoverScroll and you're all good to go!
This creates a horizontal hover scroll list (see further down for default parameters control).

<script type="text/javascript">
$(document).ready(function() {
   $('#my-list').hoverscroll();
});
script>

View the complete source of this example

Plugin reference

$('selector').hoverscroll ( [ params {Object} ] );

params {Object}
List of parameters that define the shape and behaviour of the list

{
   vertical: false,    // Display the list vertically or horizontally
    
   width:    400,      // Width of the list container
   height:   50,       // Height of the list container
    
   arrows:   true      // Display direction indicator arrows or not
   arrowsOpacity: 0.7  // Max possible opacity of the arrows
    
   debug: false        // Debug output in the firebug console
}

$.fn.hoverscroll.params

These are the HoverScroll default parameters. It can be very useful to override these so you don't have to specify parameters for each HoverScroll call.

For example:

// Override default parameters onload
$.fn.hoverscroll.params = $.extend($.fn.hoverscroll.params, {
   vertical : true,
   width: 67,
   height: 300,
   arrows: false
});

// Generate hoverscroll with overridden default parameters
$('#my-list').hoverscroll();

Generated markup

Here is a sample of markup generated by hoverscroll (note: you must not use this markup in your code else HoverScroll will not work properly) :

<div class="ui-widget-content hoverscroll horizontal">
   <div class="listcontainer">
       <ul id="my-list" class="list ui-helper-clearfix">
           <li class="item"><img src="images/maja1_th.jpg" />li>
           <li class="item"><img src="images/maja2_th.JPG" />li>
           <li class="item"><img src="images/maja3_th.JPG" />li>
           <li class="item"><img src="images/maja4_th.JPG" />li>
           <li class="item"><img src="images/maja5_th.JPG" />li>
           <li class="item"><img src="images/maja6_th.JPG" />li>
           <li class="item"><img src="images/maja7_th.JPG" />li>
           <li class="item"><img src="images/maja8_th.JPG" />li>
           <li class="item"><img src="images/maja9_th.JPG" />li>
           <li class="item"><img src="images/maja10_th.JPG" />li>
       ul>
       <div class="arrow left">div>
       <div class="arrow right">div>
   div>
div>

As you can see, HoverScroll integrates with the jQuery UI by implementing one of its CSS classes.

8/31/2010

HoverScroll jQuery Plugin

Plugin reference

Generated markup

Download the HoverScroll jQuery plugin

No comments: