Showing and hiding with z-index

[sheferd]

Hi, hopefully someone can help,

I have a card at the bottom of my page that when a user clicks, will appear to come out from under the page and move back on top of it.

The first bit seems to work ok, but I cant get it go back under the page.

this is what I have.

	$('.card').css({"margin-top":"-150px",}, 1000);
	$('.card').click(function(){	
		$(this).animate({"margin-top":"15px",}, 700, function() {// Animation complete.
			$(this).addClass('ontop');	
			$(this).animate({"margin-top":"-130px",}, 700);
			$(this).append('<span class="close-card">Close</span>');	
		});
		
	});
	$('.close-card').click(function(){	
		$('.card').animate({"margin-top":"15px",}, 700, function() {// Animation complete.
			$(this).removeClass('ontop');					
		});
		$('.card').animate({"margin-top":"-150px",}, 700);
	});

Any ideas?

I know it is quite basic right now, as I am still learning this, but any help is welcome. Also I understand I'd need to build in some 'fail safes' like if it is already ontop dont do the animation, etc, so help here would really be appreciated too, thanks for looking.

[Raffles]

I'm not sure but it might have something to do with how the browser works out stacking contexts. When you want it to go back under, all you're doing is removing a class. You might have to explicitly set the z-index for when the ontop class is absent. You probably are only setting z-index for the .ontop state.

Then when the .ontop is removed, the browser can figure out where to put the element once it has a specific z-index value to use.

[sheferd]

Thanks for the reply, unfortunatly specifying z-index does the same thing (not send the object back under)

[Raffles]

You're sure you're specifying a z-index lower than what you want it to be? Also check that it also has position:relative or absolute in both cases.

It's hard to tell without being able to see it though. If you had a link it would be easier to troubleshoot.

[sheferd]

I've firgured out the problem but am not able to fully resolve it.

Because I am appending the close button to the div I am trying to modify, I am still technically clicking the div, so it runs what the close button should do, but also the original action of what should happen when I click the div.

The thing is I want the close button on the corner of the div but not sure how to put it there without absolutly positioning it. any ideas?

Basically it works fine if it put the button outside of the div.

my code now:

.card-wallet{position:absolute; top:0; left:0; background:#eee; width:650px; height:230px;}
.card{padding:20px 0 0 20px; width:310px; height:185px; position:relative;}
.close-card{display:none; position:absolute; top:2px; right:-56px; background:url(img/hide-close.png) no-repeat top left; width:85px; height:26px; cursor:pointer; text-indent:-98765px; line-height:0; font-size:0;}
.close-card:hover{background-position:bottom left;}

<div class="card-wallet">
<div class="card">
card content
</div><!-- /.card -->
<span class="close-card">Close</span>
</div><!-- /.card-wallet -->

	$('.card').css({"margin-top":"-150px",}, 1000);
	$('.card').click(function(){	
		$(this).animate({"margin-top":"15px",}, 700, function() {// Animation complete.
			$(this).css({"z-index":"400"});
			$(this).animate({"margin-top":"-130px",}, 700, function() {
				$('.close-card').show();
			});
		});
		
	});
	$('.close-card').click(function(){	
		$('.card').stop().animate({"margin-top":"15px",}, 700, function() {// Animation complete.
			$('.card').css({"z-index":"1"});
			$('.close-card').hide();
			});
		$('.card').animate({"margin-top":"-150px",}, 700);
		
	});

[Raffles]

If you don't want the parent object to respond to the click event, you should use stopPropagation:

	$('.card').css({"margin-top":"-150px",}, 1000);
	$('.card').click(function(){	
		$(this).animate({"margin-top":"15px",}, 700, function() {// Animation complete.
			$(this).css({"z-index":"400"});
			$(this).animate({"margin-top":"-130px",}, 700, function() {
				$('.close-card').show();
			});
		});
 
	});
	$('.close-card').click(function(e){
		e.stopPropagation();
		$('.card').stop().animate({"margin-top":"15px",}, 700, function() {// Animation complete.
			$('.card').css({"z-index":"1"});
			$('.close-card').hide();
			});
		$('.card').animate({"margin-top":"-150px",}, 700);
 
	});

[sheferd]

Thanks so much, this worked

[sheferd]

Any ideas on how I could tell it not to do the action if it is already on show?

[paul_wilkins]

Any ideas on how I could tell it not to do the action if it is already on show?

Try checking for the reverse situation.
Typically, the display setting is set to 'none' when it's not shown.

So, you could try something like:

if ($('.close-card').css('display') !== 'none') {
    $('.close-card').show();
}

[sheferd]

Thanks paul, I should have been more clear sorry, my problem was that within the 'card' was some inputs so clicking them was technically clicking the card again so it was running the animation for when I click the card (this is what I was trying to prevent if it was on show). I've solved my problem now with an invisible overlay 'open' button that hides once it's clicked and 'shows' again if the card is re-hidden.

This can now be marked solved.

Thanks for all the help.