Mark James Net - Animated List

Home > Development > Javascript > Animated List

Animated List

Tuesday 2nd June, 2009

Inspired by the fantastic looking preview of the currently (I believe) in development new Dragon Interactive website, I decided to put together a little animated HTML list concept.

Take a look at the example on the right - as you can see, the idea is that when you click on any item in the list it is sent flying to the top of the list and grows in size as it goes.

All you need is the javascript below and a HTML list with the relevant class names / ids:

The Script

// initiate variables
var output = "";      // string used to update list
var looper = 1;       // simply records how many times the function has fired
var loops = 0;        // used to turn the 'num' sent to the function into a true variable so it can be sent back again

function toTop(num) {
    // convert 'num' into true variable (or it will not work in the setTimeout function below)
    loops = num;

    // if the function has fire less times than the specified amount, do it again
    if (looper < num) {

        // get array of elements with the 'ani_list' class
        list_array = getElementsByClassName('ani_list');

        // for each elements in the list create an output string, increase the font-size by a factor and set the position in the list in the 'toTop()' function
        for(var i=1; i<list_array.length; i++) {
            output += "<li><a class=\"ani_list\" style=\"font-size:"+ (11+(20-(i*2))) +"px;\" href=\"javascript:void(0)\" onclick=\"toTop("+(i)+")\">" + list_array[i].innerHTML + "</a></li>\n";
        }

        // complete the output string with the new bottom element, taking the previous top element
        output += "<li><a class=\"ani_list\" style=\"font-size:11px;\" href=\"javascript:void(0)\" onclick=\"toTop(10)\">" + list_array[0].innerHTML + "</a></li>\n";

        // out put the string to the relevant DIV
        document.getElementById('animated_list').innerHTML = "<ul>\n" + output + "</ul>\n";

        // reset output string, increase looper variable and set a timeout to fire the function again (change the value here to increase/decrease the speed of the animation)
        output = "";
        looper++;
        setTimeout("toTop(loops)",80);
    } else {
        // if the animation has stopped, reset the looper value
        looper = 1
    }
}

// very useful 'get element by class' function originally from http://snook.ca/archives/javascript/your_favourite_1
function getElementsByClassName(classname) {
    node = document.getElementsByTagName("body")[0];
    var a = [];
    var re = new RegExp('\\b' + classname + '\\b');
    var els = node.getElementsByTagName("*");
    for(var i=0,j=els.length; i<j; i++)
        if(re.test(els[i].className))a.push(els[i]);
    return a;
}

And the HTML code:

The HTML

Admittedly its not very pretty with inline styles etc, but it does the job and wouldn't take much work to polish up.

Comments

Please login to comment on this page

back