Grow your CSS skills. Land your dream job.

Replacing div(s) with jQuery

  • # June 14, 2008 at 12:53 am

    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

    # June 14, 2008 at 2:08 am

    Here is an example of something I did up a while ago that does about the same thing:

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

    # June 16, 2008 at 11:55 am

    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?

    # June 17, 2008 at 9:17 am

    Yeah I think this was one example I did "update" There is a post called "Some Updated and Improved Examples" that talks about it a little bit. You should be able to copy the new jQuery right out of the new example though. Are you saying that you have already done that, pulled out the bits about opacity, and it’s now broken? What is it that you want it to do that it’s not doing?

    # August 20, 2010 at 4:11 pm

    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.

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

You must be logged in to reply to this topic.

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