This blog embraces totally the foundamentals of the Open Source Spirit and Soul. Hence all material founded here is free and the user may read, copy, manipulate, reproduce it all, without limitations of any kind, no copyright allowed here!
Nevertheless the author will appreciate if the user will cite him, when using his scripts, as a recognition of his work.
Knowledge is the prime right of umanity and has to be protected and shared with every possible means.
abidibo.

Thursday, April 1, 2010

Hi,
today I write about a nice javascript class that creates a typical horizontal scrollable list starting from an html unordered list. The final result is like many others in the web. The LI elements of a list are used to create the items of this scrollable list. The number of items visible at a time is a paramether, and if is greater than the maximum possible one, is reduced in order to get the items to stay in their space. The controller are two arrow buttons on the left and right of the slide. They have three states: ON, OFF and OVER controlled through javascript and personalizable by css. The width of the entire object and of the single item are needed, the height of the single item is not necessary because is calculated by javascript (through an iteration along all items), but clearly for a good result all items would rather have the same height.
Let's see the details now.

Imagine we have an unordered list where the LI elements are images set as css background of a DIV, for example:

Now, we want to transform it in a classical scrollable horizontal list, like the one represented in the image (the same one).
Well, here comes my mootools based javascript class which coupled with some css realizes it. First the code, then the usage

So simply we instanciate the class hScrollingList, passing the paramethers:

'hlistVideo': the id of the unordered list (we may pass even the DOM Object)

5: the number of items 'for page', that is the number of elements in the viewport for each scrolling action

600: the total width of the object

150: the width of a single item (a LI element)

Observe that the class is able to auto-reduce the number of items 'for page', because it tries to put them in the space allowed, and if thay can't stay correctly in the space their number is reduced by one untill they will.
So you only have to take this code, personalize the arrows images, the three states of the buttons through css and obtain your own personalized horizontal scrollable list.
For info or problems write at abidibo@gmail.com
Bye!