Grow your CSS skills. Land your dream job.

div in div at" Learning jQuery: Fading Menu"

  • # December 21, 2009 at 5:24 pm

    Hi there-
    Using the fading jquery menu/content code from here:

    http://css-tricks.com/learning-jquery-f … g-content/

    it’s works great, but i have a problem with divs which are inside at "content"–> inside "photo" for instance. I want to try more divs inside the buttons.when i write some divs inside photo no fading is shown and the content is not shown,..why? I think the poblem is the javascript code but im not smart enough to find and write javascript code to solve the problem..can someone help me?

    the javascript code:

    Code:
    // JavaScript Document
    $(function(){

    $(“#about-button”).css({
    opacity: 0.3
    });
    $(“#contact-button”).css({
    opacity: 0.3
    });
    $(“#design-button”).css({
    opacity: 0.3
    });
    $(“#flashdesign-button”).css({
    opacity: 0.3
    });
    $(“#photo-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 );

    });
    });

    and here is something i tried to build… see at photo!

    Code:

    saskdasjdkajsndkajklllklllllllll

    the divs about , contact, design works but div in div not…

    thanks for help

    spuncky

    # December 23, 2009 at 3:52 am

    This is just a work around, but how necessary is it to have the div inside the div? What is it you are trying to do? I am fairly certain you don’t need an extra div to achieve that.

    # December 23, 2009 at 5:38 am

    Hey jamy_za,

    well, i want to add a sliding menu, also from this side: ;)

    http://css-tricks.com/examples/MovingBoxes/

    i tried to add this code inside my divs but the content is not fading out/in.

    here you can see it:

    http://mindmaze.de/hannes/Portfolio2009/design.html

    here i have tried to use more than one html side, and i put the content/the sliding menu directly inside from the div,but there is no fading and the menus are jumping.

    but i think this is not a good idea, i want to call the specials divs with content in one html side. like here:

    Code:

    saskdasjdkajsndkajklllklllllllll

    the div photo is called from javascript code, but the div inside is not recognized.

    and this is how i look like if i add the menu inside the div:

    Code:

    saskdasjdkajsndkajklllklllllllll

    buuuut it doesn’t work…merry christmas

    # December 23, 2009 at 9:06 am

    Why don’t you try making the div.#slider a span instead. and also try making the #slider a .slider. I’m not able to change the javascript with firebug :( or maybe I can, but I’m still a noob with firebug lol.

    Edit: Try this script: http://www.stunicholls.com/various/tabbed_pages.html
    You can add the jquery fade on click ontop of that. And there shouldn’t be any div restrictions or anything.

    # December 29, 2009 at 2:18 pm

    ah ok thanks, i will try it….

    # December 31, 2009 at 10:21 am
    "spuncky" wrote:
    the javascript code:

    Code:
    // JavaScript Document
    $(function(){

    $(“#about-button”).css({
    opacity: 0.3
    });
    $(“#contact-button”).css({
    opacity: 0.3
    });
    $(“#design-button”).css({
    opacity: 0.3
    });
    $(“#flashdesign-button”).css({
    opacity: 0.3
    });
    $(“#photo-button”).css({
    opacity: 0.3
    });

    I think instead of this ^ is better to write like this:

    Code:
    // JavaScript Document
    $(‘#id1, #id2, #id3, #id4′).css(…);

    Am I right? This question is for the specialists of jQuery.

    # January 3, 2010 at 12:48 pm

    jup you are right, it have the same functionality and less code, thanks ;)

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".