...

View Full Version : fade in & out one div at a time????



mufiozo
02-01-2012, 01:36 AM
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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum