Grow your CSS skills. Land your dream job.

jQuery Sliding Panel

  • # November 14, 2011 at 9:25 pm

    Dear Forums,

    I ran into a problem with some panels I started working on.

    I uploaded the files on my site, The problem is explained on the page itself:

    http://elneco.biz/panels/

    Please let me know if you guys have any suggestions.

    I don’t have the brain power to try to figure this out right now,
    any help would be awesome.

    Thanks,
    -J

    # November 15, 2011 at 4:20 am

    When the click event occurs you can set the z-index of the panel container…You would need to make sure that each button would change the z-index for both panels so one does not always stay on top but that is accomplished like so:

    $('.theClassHere').css('z-index','1');
    # November 15, 2011 at 11:50 am

    I don’t have the answer for you (hopefully the post above does the job), but I just wanted to say how much I enjoyed reading “Dear Forums,” – a nice start to my day!

    # November 15, 2011 at 8:49 pm

    hey forums,

    i updated the z-index issue. but im still not really there yet…….
    http://elneco.biz/panels/

    i included a link to a site that kinda does what im looking for:
    http://nouvellevague.ultranoir.com/

    thanks to any1 looking into this with me

    # November 16, 2011 at 8:13 am

    Hi,

    I am working on something similar and has gotten it almost done. Here is the code:



    $(document).ready(function(){ // when the document finishes loading
    $('.yourFirstButton').click(function() { // when clicking your first tab button

    $('.slide_box').animate({ // animate the coming in box by
    'left':'0px'},500); // moving it to position left:0px; (which implies it being
    // position:absolute; left:big value to hide it; in your css)

    $('.initialDiv').hide('slow'); //at the same time start to hide the box that is class="initialDiv"

    });

    });

    //SLIDE BOX SLIDE
    $(document).ready(function(){ // when the document finishes loading
    $('.back_button').click(function() { // when the element with
    // class="back_button" is clicked

    $('.initialDiv').show('slow'); // show element with class="initialDiv"

    $('.slide_box').animate({ // at the same time move the top box to
    'left':'800px'},500); // position left:800px; with speed 0.5s.
    });
    });

    This works for me, but it does not slide out the lower div, but rather hides it. I tried animating it, but it doesn’t work. if you find a solution, please share.

    # November 16, 2011 at 10:08 am

    I messed around with this to make the panel come to the front when it was already open but the coding just got really messy – trying to take into account that other panels were open then making the active one come to the front.

    I ended up just closing all non-active panels. Oh and it is not recommended to start out an ID with a number, so I added a “p” in front. Here is a demo of what I got working, and the code I used:

    $(function() {

    var nav = $('ul#nav li a');
    nav.click(function() {
    var target = $($(this).attr('href') + '-page');
    target.addClass('active').toggle(500);
    $('.page:visible').not(target).removeClass('active').toggle(500);
    return false;
    });

    $(".page button").click(function() {
    $(".page").hide(1000);
    });
    });

    # November 16, 2011 at 4:53 pm

    Nice. Thanks dudes.

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