SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2011
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Showing and hiding with z-index

    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.

    Code:
    	$('.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.

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2011
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply, unfortunatly specifying z-index does the same thing (not send the object back under)

  4. #4
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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.

  5. #5
    SitePoint Enthusiast
    Join Date
    Feb 2011
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code:
    .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;}
    Code:
    <div class="card-wallet">
    <div class="card">
    card content
    </div><!-- /.card -->
    <span class="close-card">Close</span>
    </div><!-- /.card-wallet -->
    Code:
    	$('.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);
    		
    	});

  6. #6
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    If you don't want the parent object to respond to the click event, you should use stopPropagation:

    Code javascript:
    	$('.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);
     
    	});

  7. #7
    SitePoint Enthusiast
    Join Date
    Feb 2011
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much, this worked

  8. #8
    SitePoint Enthusiast
    Join Date
    Feb 2011
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Any ideas on how I could tell it not to do the action if it is already on show?

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,678
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by sheferd View Post
    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:

    Code javascript:
    if ($('.close-card').css('display') !== 'none') {
        $('.close-card').show();
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    SitePoint Enthusiast
    Join Date
    Feb 2011
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •