Using CSS rotation and displaying information one after another from left to right

Okay this is quite a weird question, but im creating a timeline showcasing films and there release dates and i have a lot of films that i want to display as text vertically. I want each film to appear next to each other, going from left to right.

here is what i have at the moment -

http://ignitethatdesign.com/CheckFilm/index1.php

It is a mix mash as the first film im displaying is displaying at the top.

Im calling in the data from a database and an image appears if there are days between each film release

Any help would be greatly appreciated im lost in a sea of css

Answers


This is something that could be pretty easily done in Flash, but given that the trends are moving away from flash, it makes sense to do it in html 5. An html 5 way to do this, which might be kind of fun is to do it in html 5 canvas.

Given none of those are of interest, taking what you currently have, it seems like it would be a good idea to start a sort of timer in javascript, that timer will call a function that iterates through the li's and moves them down...

For example

var t=setTimeout("moveListItems()", 500); // just adjust the time in milliseconds to make                                           
                                          // it faster or slower.

function moveListItems() {
    // place move list items code here
    //probably a call to update the css "top" 
    $('#horiz_container li').each(function() {
       alert(index + ': ' + $(this).text());
       var newtop = $(this).position().top + 250;
       $(this).css('top', newtop + 'px');
       //check if the top is too low then reset to top to the top of the container
    });

}

Beware: Not tested

You may need to tweak it a bit, make the li's absolute so they don't screw up the layout as they move, but that's how i'd go about it. If I did anymore then I'd be committing a crime against the spirit of hacking. Have fun!


Need Your Help

Get Page control in a Method triggered by AJAX call

c# findcontrol

I call a method in a separate Class file that needs to update a label.