Can I change ul > li in the html of TinyFader?

Question

I am trying to change the element which contains the slides from:

<ul id="slides">
                <li id="content"></li>

</ul>

to:

<div id="slides">

<div class="each-slide"></div>

</div>

I want to select each slide by the class "each-slide" instead of li.

Is this possible?

Thanks!

Answer 1

Is there a specific reason you need to use divs instead of li? Using CSS you are able to style them the same way.

But if you absolutely have to, then on line 9 of tinyfader.js change...

 u=this.u=T$$('li',s) to  u=this.u=T$$('div',s)

This will grab all div elements inside the 'slides' main element

Comments

Yes - I needed to do this because of the content management system I was working in for a client. For adding images and text it was inserting extra li and throwing off the slider.

Is there a way to use this javascript and also add classes or IDs to these div's?

Much Thanks for your response!

---

The solution I posted above will grab all the 'div' elements inside the slide element. If you wish to call the slides by a class name, then add the following function under,' function T$$(e,p){...}'

function classT$$(c,el){
    if(!el) el = document.getElementsByTagName("body")[0];
    var a = [];
    var re = new RegExp('\\b' + c + '\\b');
    var els = el.getElementsByTagName("*");
    for(var i=0,j=els.length; i<j; i++)
        if(re.test(els[i].className))a.push(els[i]);
    return a;
    }

Then,

replace the FIRST call to T$$(e,p), it will be in the same spot as my solution above, with classT$$('classname',s), where classname is the class you are looking for.

Now instead of looking for any 'div' it will only look for elements that have match your classname.

If your application supports jquery, a more elegent solution would be to change 'u=this.u=T$$('li',s)' to 'u=this.u=$('.classname')', where classname is the class you are looking for.