Replacing div(s) with jQuery

[buckycat7]

First let me say that I’m very, very new to jQuery so I’m trying to piece together a code for a gallery page. What I have is a 3 buttons across the top of the page and then 3 divs that have a unordered list with what will be the different thumbnails for the gallery. I want it to when a visitor clicks on one of the images is shows the div that is linked to that "button". I got the jQuery .toggle function to work pretty quickly. But I would like when one of the links is clicked the divs replace each other instead of showing up below each other in a stack. I would REALLY like the divs to fade out and fade in when they are replaced, but one step at a time here.

Here is the link to my development page: http://dev.erikakers.com

I did some digging around and found a remove code but it doesn’t work at all, in face it cause a big error because you click the first box none of the other div will show up. But if you click boxes two or three first you can see the .toggle function work. Here is my jQuery code:

Code:

$(document).ready(function(){

$(“li.one”).click(function(){
$(“div.one”).toggle();
$(“div”).remove();
});

$(“li.two”).click(function(){
$(“div.two”).toggle();
});

$(“li.three”).click(function(){
$(“div.three”).toggle();
});

});

If someone could give me come guidance on the way to good that would be great, also if anyone has any idea to make the divs fade in an out when they are replace that would be awesome as well.

Again, I’m pretty new to this so the more detail I can get the better. Thanks

[buckycat7]

That is very close to what I was going for. But I have a couple things I hope you could help me through…

From the looks of the tutorial and the files that can be downloaded it looks like you came up with a better way to handle it because there is a bit of difference between what the tutorial says and the code that is in the files. I really don’t want the buttons to fade in at out like there are step in here, I want to do something when they are selected but I have not decided on what yet. I have tried removing a couple different line from the jQuery so the buttons will not fade in and out with they are clicked but everything I seem to try breaks the code. Here is what was in the download files:

Code:

$(document).ready(function(){
//each click on a button will be intercepted
$(“#page-wrap div.button”).click(function(){

//we store the reference here to avoid doing $(this) each time we need and spare some processing
$clicked = $(this);

// if the button is not already “transformed” AND is not animated
if($clicked.css(“opacity”) != “1” && $clicked.is(“:not(animated)”))
{
//we animate it (remember the reference for optimisation ?)
$clicked.animate({
opacity: 1,
borderWidth: 5
}, 600 );

//we “calculate” the id to shown (each button div MUST have a “xx-button” and the target div must have an id “xx” )
//yet again the reference
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().animate({
opacity: 0.5,
borderWidth: 1
}, 600 );

});
});

I’m guess you redid it this way because it was better, is there no way to use the css sprites for over and current images for the buttons or would that have to be something that was set in jQuery?

[Ian Sterne]

I would like to have a <div> fade in on page load then fade out. After that I would like to have another <div> fade in and stay there waiting for user input.

Any help would be great.

[Author]

Posts