Menu Fader Problems... - CSS-Tricks

This topic is empty.

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

Author

Posts
February 20, 2010 at 8:46 pm #28082

RyanAlexanderEvents
Member

I am working on including the Menu Fader from: https://css-tricks.com/examples/MenuFader/ , but am running into problems when I try to add additional "links" (other than the home, about, contact) but the new "links" do not seem to respond (fade in/out or display "content") like the original three links do.

Thank you in advance for any help to a problem that currently stumps me…

I changed the .png "link" images[img]C:UsersChrisDesktop[/img], changed the css style to eliminate the display of the original underline below each link. Please see code below:

$(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>
</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>

Kindest Regards,
Chris
http://www.ryanalexanderevents.com

February 20, 2010 at 8:50 pm #71263

RyanAlexanderEvents
Member

Screenshot:

Home, About & Contact "links" work as edited, but added link "services" does not fade in/out or display content when clicked. Any help greatly appreciated.
Author

Posts

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

The forum ‘JavaScript’ is closed to new topics and replies.