asked on

What is a very good way to show and move page content with transitions using javascript?

I have a single page and a menu.

Menu: Option 1 | Option 2 | Option 3

These 3 options correspond to HTML content in the page (divs or list).

I am trying to find a good JS library/script (preferably based on prototype but not a must) that will hide the content thats not selected and upon selection of the appropriate option it will show up using some kind of a transition (slide-in, fade-in, etc).

So this is something like a carousel but the content will have different heights and widths and should be able to be loaded dynamically, so no point manually setting up the dimensions in a css file.

I am sure I could make this but I am also sure there is something better out there that will take 5 mins to setup.

Any good ideas? I hope the above was clear enough :D

Thanks
Vasilis

ASKER CERTIFIED SOLUTION

Anibute

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

vdanias

ASKER

It's not exactly what i am looking for. I don t want it look like tabs and I def want transitions and flexibility on how the next option will be selected (through a custom made menu, a drop down list or even a timer). There are carousels that do this and accept any type of content in them but, I haven't found one that is flexible with the different sizes of the content.

Anibute

You can set visibility of div to 'visible' or 'hidden'.

See this: http://www.webmasterworld.com/forum91/441.htm

Anibute

You can call these simple functions (attached) with onclick event handler as given:

onclick="showstuff('id_to_show'); hidestuff('id_to_hide');"

function showstuff(boxid){
   document.getElementById(boxid).style.visibility="visible";
}

function hidestuff(boxid){
   document.getElementById(boxid).style.visibility="hidden";
}

Open in new window

Anibute

This also does similar trick with some transition effect.
http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm