Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    fade in & out one div at a time????

    hi all super web coders,

    I'm creating a personal website and having some coding issues. I'm almost complete but just need a bit of code to finish it off.

    I'm making an online portfolio with three links "About me, Portfolio and resume". So far when one of the links is clicked, its div fades in. Click again and it fades out. I have three divs stacked on top of eachother using z-index.

    What I'm trying to do is only display one div at a time.

    For example, when I click the 'About me' link, the 'About me' div fades in. Then when I click the 'Portfolio' link, the 'About me' div fades out and the 'Portfolio' div fades in.

    Ive used jQuery to fadeToggle the divs.

    Below is my code:

    <html>
    <head>
    <title>mainpage</title>

    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

    <link href="css/menulayout.css" rel="stylesheet" type="text/css">
    <link href="css/content.css" rel="stylesheet" type="text/css">
    <link href="css/portfoliolayout.css" rel="stylesheet" type="text/css">
    <link href="css/aboutmelayout.css" rel="stylesheet" type="text/css">
    <link href="css/resumelayout.css" rel="stylesheet" type="text/css">
    <link href="css/links.css" rel="stylesheet" type="text/css">

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript">
    function toggleDiv(divId) {
    $("#"+divId).fadeToggle();
    }
    </script>


    <body>

    <div id="content" table class="center">

    <div id="menulayout">

    <table width="531" height="651" border="0" cellpadding="0" cellspacing="0" id="Table_01">
    <tr>
    <img src="images/mainpage_08.jpg" width="125" height="91" alt=""></td>
    <td><a href="#" onClick="javascript:toggleDiv('aboutmelayout');"><img src="images/about.jpg" name="aboutme" width="78" height="13" border="0"></a></a></td>
    </tr>
    <tr>
    <td><a href="#" onClick="javascript:toggleDiv('portfoliolayout');"><img src="images/portfolio.jpg" name="portfolio" width="78" height="15" border="0"></a></td>
    </tr>
    <tr>
    <td><a href="#" onClick="javascript:toggleDiv('resumelayout');">
    <img src="images/resume.jpg" name="resume" width="78" height="14" border="0"></a></td>
    </tr>
    <tr>
    <img src="images/mainpage_14.jpg" width="104" height="248" alt=""></td>
    </tr>

    </table>

    </div>


    <div id="aboutmelayout" style="display:none;">
    </div>

    <div id="portfoliolayout" style="display:none;">
    </div>

    <div id="resumelayout" style="display:none">
    </div>
    </div>


    </body>

    </html>
    Last edited by mufiozo; 02-01-2012 at 01:44 AM.


 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •