I am trying to build a Menu Fader menu bar with the jquery.js script from
http://css-tricks.com/examples/MenuFader/ . After I started making modifications (new home, about, contact .pngs) and edited the associated css so that there was no line displayed under each "link", I decided to start adding the rest of my "links" (services, portfolio, praise, etc.) to the menu bar.
I created two new styles for each "link" so the additional links would fade-in/fade-out and display the content. However, the link does not fade in/out and does not display the associated content. Let me know if anyone could be of any help.
Any help is greatly appreciated. I am fairly new to javascript, but I seem to have hit a dead end. Current site under construction: www.ryanalexanderevents.com
Code is below:
<link href="../public_html/css/RAE_bottom-info.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="JavaScript/MenuFader/style.css" />
<script type="text/javascript" src="JavaScript/MenuFader/js/jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#about-button").css({
opacity: 0.3
});
$("#services-button").css({
opacity: 0.3
});
$("#contact-button").css({
opacity: 0.3
});
$("#page-wrap div.button").click(function(){
$clicked = $(this);
// if the button is not already "transformed" AND is not animated
if ($clicked.css("opacity") != "1" && $clicked.is(":not(animated)")) {
$clicked.animate({
opacity: 1,
borderWidth: 5
}, 600 );
// each button div MUST have a "xx-button" and the target div must have an id "xx"
var idToLoad = $clicked.attr("id").split('-');
//we search trough the content for the visible div and we fade it out
$("#content").find("div:visible").fadeOut("fast", function(){
//once the fade out is completed, we start to fade in the right div
$(this).parent().find("#"+idToLoad[0]).fadeIn();
})
}
//we reset the other buttons to default style
$clicked.siblings(".button").animate({
opacity: 0.5,
borderWidth: 1
}, 600 );
});
});
</script>
<style type="text/css">
</style>
<link href="JavaScript/MenuFader/style.css" rel="stylesheet" type="text/css" />
</head>
<body background="imgs/rae_background.jpg">
<table width="1070" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="125" height="80" align="center" valign="middle"> </td>
<td width="907" height="80" align="left" valign="middle"><img src="imgs/rae_logo_small.png" width="318" height="50" /></td>
<td width="113" height="80" align="center" valign="middle"> </td>
</tr>
<tr>
<td width="125" height="14" align="center" valign="top" bgcolor="#FFFFFF"><img src="imgs/shadow_top_left.gif" width="82" height="14" /></td>
<td height="14" align="left" valign="top" bgcolor="#FFFFFF"><img src="imgs/shadow_top_center.gif" width="907" height="14" /></td>
<td width="113" height="14" align="center" valign="top" bgcolor="#FFFFFF"><img src="imgs/shadow_top_right.gif" width="82" height="14" /></td>
</tr>
<tr>
<td height="40" align="center" valign="middle" bgcolor="#FFFFFF"> </td>
<td height="40" align="left" valign="middle" bgcolor="#FFFFFF">
<div id="page-wrap">
<div id="home-button" class="button">
<img src="imgs/menu-home.png" alt="home" class="button"></div>
<div id="about-button" class="button">
<img src="imgs/menu-about.png" alt="about" class="button"></div>
<div id="services-button" class="services">
<img src="imgs/menu-services.png" alt="services" class="button"></div>
<div id="contact-button" class="button">
<img src="imgs/menu-contact.png" alt="contact" class="button">
</div>
<div class="clear"></div></td>
<td height="40" align="center" valign="middle" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td width="125" height="100" align="center" valign="middle" bgcolor="#FFFFFF"> </td>
<td align="center" valign="middle" bgcolor="#FFFFFF"><img src="imgs/Services_img_header.jpg" width="907" height="318" /></td>
<td width="113" align="center" valign="middle" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td height="251" rowspan="2" align="center" valign="middle" bgcolor="#FFFFFF"> </td>
<td height="559" align="left" valign="top" bgcolor="#151010">
<div id="content">
<div id="home">
<p>This content is for home.</p>
</div>
<div id="about">
<p>This content is for about.</p>
</div>
<div id="services">
<p>This content is for services.</p>
</div>
<div id="contact">
<p>This content is for contact.</p>
</div>
</div>
</div>
</div>
</td>