Home › Forums › JavaScript › jQuery Sliding Panel
- This topic is empty.
-
AuthorPosts
-
November 14, 2011 at 9:25 pm #35166elnecoParticipant
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:
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,
-JNovember 15, 2011 at 11:50 am #90678TheDocMemberI 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 16, 2011 at 8:13 am #90722dyrvarMemberHi,
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 #90732MottieMemberI 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);
});
}); -
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.