The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Menu Fader Problems…

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #28082

    I am working on including the Menu Fader from: , 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:


    opacity: 0.3
    opacity: 0.3
    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" && $":not(animated)")) {

    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

    //we reset the other buttons to default style
    opacity: 0.5,
    borderWidth: 1
    }, 600 );



    <body background="imgs/rae_background.jpg">
    <table width="1070" border="0" align="center" cellpadding="0" cellspacing="0">
    <td width="125" height="80" align="center" valign="middle">&nbsp; </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">&nbsp;</td>
    <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>
    <td height="40" align="center" valign="middle" bgcolor="#FFFFFF">&nbsp;</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">&nbsp;</td>
    <td width="125" height="100" align="center" valign="middle" bgcolor="#FFFFFF">&nbsp;</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">&nbsp;</td>
    <td height="251" rowspan="2" align="center" valign="middle" bgcolor="#FFFFFF">&nbsp;</td>
    <td height="559" align="left" valign="top" bgcolor="#151010">&nbsp;

    <div id="content">

    <div id="home">
    <p>This content is for home.</p>

    <div id="about">

    <p>This content is for about.</p>

    <div id="services">
    <p>This content is for services.</p>

    <div id="contact">
    <p>This content is for contact.</p>



    Kindest Regards,



    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.

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.