All Posts by Email, Once a Week

Media Temple logo

CSS-Tricks is brought to you in part by Media Temple, the web hosting that we both use and recommend.

need help making one div fade out and another fade in in its place

  • # April 22, 2013 at 11:09 am

    Hello everyone. I am new to anything beyond HTML5 and CSS3. I am in school for IST and am the interim webmaster for our campus until they hire a replacement.

    I am trying to get the area below the menu bar to fade away when a tab is clicked and have the selected tab appear in its place. I have gotten the whole page to do it from searching the web, but when I try to apply it to just the divs it doesn’t work.

    http://www.angelfire.com/va/miura/restituo.html

    This page is where I try all my tricks before implementing them on live pages. If I can get help doing it here I can figure how to transfer it to others. Since I don’t know JS or jquery yet please try to explain it too me like I was a 5 year old trying to defuse a bomb. Thanks.

    # April 22, 2013 at 11:15 am

    >Since I don’t know JS or jquery yet please try to explain it too me like I was a 5 year old trying to defuse a bomb.

    Cut the **blue* wire. :)

    # April 22, 2013 at 11:46 am

    I imagine without AJAX it’ll be impossible

    Whether its faded out or the usual transition, the browser will need to make a request for the whole page, as each page is different according to the browser.

    To fade out only the content, AJAX will have to be used to send a request to a script without changing the page, but this will all be done under 1 URL rather than different URLs for each page.

    # April 22, 2013 at 11:49 am

    it can be done in a single page too where only one part is displayed and the others are hidden with position absolute.
    Jquery could handle the fading or even checkboxes and css transitions

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed