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

vdanias
vdanias used Ask the Experts™
on
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
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Commented:
http://jqueryui.com/demos/tabs/

Is this what you want?

Author

Commented:
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.

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

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

Commented:
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

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

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial