Forums

elneco

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

kgscott284

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

TheDoc

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!

elneco

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

dyrvar

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.

Mottie

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

elneco

Nice. Thanks dudes.

treehouse : what would you like to learn today?

Forums

jQuery Sliding Panel