www.webdeveloper.com
Results 1 to 1 of 1

Thread: Need help with a JS fader menu

  1. #1
    Join Date
    Oct 2009
    Posts
    3

    Need help with a JS fader menu

    Hi there-
    Got this fading jquery menu/content code from here:

    http://css-tricks.com/learning-jquer...acing-content/

    Works great, but I can't get more than three to work (the demo had three) and even though I've renamed things and matched up with button name with the content div names, the content divs past the first three don't appear. Or if someone knows of an easier way to get this effect, that'd be awesome too. Thanks in advance!

    Code pasted here and if you want to see it in action:
    http://lizhoff.com/bpoint/services.html

    JAVASCRIPT:
    <script type="text/javascript">

    $(function(){

    $("#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,
    }, 400 );

    // 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.3,
    borderWidth: 1
    }, 400 );

    });
    });

    </script>

    HTML:
    <div id="page-wrap">
    <div style="float:left;">
    <div id="electrical-button" class="button">Electrical Inspections </div>
    <div id="pipe-button" class="button">Pipe Inspections </div>
    <div id="mechanical-button" class="button">Mechanical Inspections </div>
    <div id="roof-button" class="button">Roof Moisture Inspections </div>
    <div id="energy-button" class="button">Energy Conservation</div>
    <div id="boiler-button" class="button">Boiler Efficiency</div>
    <div id="steam-button" class="button">Steam trap Inspections</div>
    </div>
    <div style="float:left; margin-left:20px; width:400px;">
    <div id="content">
    <div id="electrical">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor, urna quis tincidunt consequat, dolor urna gravida sem, id malesuada risus tortor imperdiet quam. Integer ipsum ipsum, volutpat sed molestie non, pharetra vitae elit. Mauris tristique eleifend magna, accumsan consequat ante rhoncus sed. Sed pellentesque enim eu nibh congue vitae aliquam nisi sodales. Quisque eu lectus ac quam laoreet elementum sed et leo. Morbi tristique ante blandit nisl porta faucibus. </p></div>
    <div id="pipe">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor, urna quis tincidunt consequat, dolor urna gravida sem, id malesuada risus tortor imperdiet quam. Integer ipsum ipsum, volutpat sed molestie non, pharetra vitae elit. Mauris tristique eleifend magna, accumsan consequat ante rhoncus sed. Sed pellentesque enim eu nibh congue vitae aliquam nisi sodales. Quisque eu lectus ac quam laoreet elementum sed et leo. Morbi tristique ante blandit nisl porta faucibus. </p></div>
    <div id="mechanical">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor, urna quis tincidunt consequat, dolor urna gravida sem, id malesuada risus tortor imperdiet quam. Integer ipsum ipsum, volutpat sed molestie non, pharetra vitae elit. Mauris tristique eleifend magna, accumsan consequat ante rhoncus sed. Sed pellentesque enim eu nibh congue vitae aliquam nisi sodales. Quisque eu lectus ac quam laoreet elementum sed et leo. Morbi tristique ante blandit nisl porta faucibus. </p></div>
    <div id="roof" style="display:none;">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor, urna quis tincidunt consequat, dolor urna gravida sem, id malesuada risus tortor imperdiet quam. Integer ipsum ipsum, volutpat sed molestie non, pharetra vitae elit. Mauris tristique eleifend magna, accumsan consequat ante rhoncus sed. Sed pellentesque enim eu nibh congue vitae aliquam nisi sodales. Quisque eu lectus ac quam laoreet elementum sed et leo. Morbi tristique ante blandit nisl porta faucibus. </p></div>


    Many thanks!
    Liz
    Last edited by ehoffm03; 11-27-2009 at 08:36 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles