div in div at" Learning jQuery: Fading Menu"

[spuncky]

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

https://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:

Hannes’ Portfolio 2009

saskdasjdkajsndkajklllklllllllll

askldjkladlkj

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

thanks for help

spuncky

[spuncky]

Hey jamy_za,

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

https://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:

Hannes’ Portfolio 2009

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:

Hannes’ Portfolio 2009

saskdasjdkajsndkajklllklllllllll

Heading

beschreibung…more link

Heading

beschreibung… more link

Heading

beschreibung… more link

Heading

beschreibung… more link

Heading

beschreibung…more link

Heading

beschreibung…more link

Heading

beschreibung… more link

Heading

beschreibung… more link

Heading

beschreibung… more link

buuuut it doesn’t work…merry christmas

[spuncky]

ah ok thanks, i will try it….

[kobylecki]

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

[spuncky]

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

[Author]

Posts