How to implement multiple tinyscrollbars from a class?

Question

I'm trying to implement multiple scrollbars with the plugin Tinyscrollabr.js http://baijs.nl/tinyscrollbar/

To implement the scrollbars, i use a function scrollify like in this article : http://www.eccesignum.org/blog/making-tinyscrollbarjs-easier-to-implement

HTML :

<ul id="myList">
<li id="scrollbar1" class="col">
  <h2>Title 01</h2>
  <div class="scrollBox"><!--Scrollable Content here--></div>
</li>

<li id="scrollbar2 class="col">
  <h2>Title 02</h2>
  <div class="scrollBox"><!--Scrollable Content here--></div>
</li>

<li id="scrollbar3 class="col">
  <h2>Title 03</h2>
  <div class="scrollBox"><!--Scrollable Content here--></div>
</li>
</ul>

Javascript :

function scrollify(element,options) {   //  '#element', {list:of,key:values}
 var opt = options || {}
     $(element).children().wrapAll('<div class="viewport"><div class="overview"></div></div>');
     $(element).prepend('<div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>');
     $(element).tinyscrollbar(options);}

$scrollbar1 = $('#scrollbar1 .scrollBox') ;
$scrollbar2 = $('#scrollbar2 .scrollBox');
$scrollbar3 = $('#scrollbar3 .scrollBox');
$scrollbar4 = $('#scrollbar4 .scrollBox');

$(function() {
scrollify($scrollbar1);    
scrollify($scrollbar2);   
scrollify($scrollbar3);   
scrollify($scrollbar4);

})

I would to make this more simple. For example, i would to be able to make this :

$(function() {
scrollify('.scrollBox');
})

But tinyscrollbar need an id. With a class, it's load the first scrollbar and not the others. Firebug return this error message "f.obj[0] is undefined"

Sorry if my question is stupid, but how can I do for applying tinyscrollbar to a list of elements with a class ?

And then, after some actions how to update all this scrollbars with the function $allScrollbars.tinyscrollbar_update();

Thanks for help, I'm just beginning with javascript and i'm trying to learn.

score 1 · Answer 1 · answered Aug 31 '12 at 19:44

I would count the number of elements with the class:

var scrollCount = $(".scrollbox").size();

Then use an iterating loop to call each of your IDs:

for (i=0; i<5; i++)  {
   scrollify($('#scrollbar' + i));
}

Also I would recommend using DIVs instead of the list setup you have, use the example from the link you shared as a starting point :)

score 1 · Accepted Answer · answered Sep 05 '12 at 09:23

Thanks KneeSkrap3r for your answer. It's a good solution to make this but i'm trying to do something in the case i' don't know the numbers of element to scroll. I think I've found with something like this (it's a part from the first jquery plugin i'm trying to do ) where $el is all elemnts with the class"scrollbox".

$el.each(function(index)
            {
                var $scrolls = $(this);


                function scrollify(element,options)
                {   //  '#element', {list:of,key:values}
                    var opt = options || {}
                    $(element).children().wrapAll('<div class="viewport"><div class="overview"></div></div>');
                    $(element).prepend('<div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>');
                    $(element).tinyscrollbar(options);
                }
                scrollify($scrolls);

                // Update heights
                $(window).resize(function()
                {   $scrolls.tinyscrollbar_update('relative');
                });
            })

Like this, it's seems to work but i don't know if i'm using good practice of javascript. For the Html markup, I told the li elements for div, it's better for the semantic. Thanks for tips ;-)

How to implement multiple tinyscrollbars from a class?

2 Answers2