Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript jQuery Sliding Panel

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #35166
    elneco
    Participant

    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

    #90678
    TheDoc
    Member

    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!

    #90722
    dyrvar
    Member

    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.

    #90732
    Mottie
    Member

    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);
    });
    });

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.