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

    askldjkladlkj

    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

    askldjkladlkj

    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

    picture

    Heading

    beschreibung…more link

    picture

    Heading

    beschreibung… more link

    picture

    Heading

    beschreibung… more link

    picture

    Heading

    beschreibung… more link

    picture

    Heading

    beschreibung…more link

    picture

    Heading

    beschreibung…more link

    picture

    Heading

    beschreibung… more link

    picture

    Heading

    beschreibung… more link

    picture

    Heading

    beschreibung… more link

    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".