Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jun 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Issue with div reveal and z-index

    Hey everyone,

    I am having trouble with showing and hiding content in divs using jquery.

    The basic effect I am looking for is to have 3 buttons each associated with a div and all the divs are positioned absolute in the same location.

    The when BtnA is clicked the div which is currently displayed should scrollup and reveal DivA behind. The same effect would happen for DivB and Div C when BtnB and BtnC are clicked respectively.

    I am achieving this by having 2 classed: readytoshow and showing. Ready to show has a z-index of 25 and showing has a z-index of 50. When BtnA is clicked, it should set DivA to class=ready toshow", then slide up div with class=showing, remove class=showing from div with class showing (the one scrolled up) and thenapply the class=showing to DivA.

    My code isnt working and I cannot figure out why. I am new to JS so please go easy on me.


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
      <title>title</title>
    <script src="js/jquery-1.4.2.js"></script>
    
      
      <style type='text/css'>
        #commenttype { background-color: silver; height: 410px; }
    	.readytoshow
    	{
    	z-index:25;
    	}
    	
    	.showing
    	{
    	z-index:50;
    	}
    
      </style>
    
      
      <script type='text/javascript'>
    
      $(window).load(function(){
      
      
      $('.view1').click(function() {
    							 
    							 
    							$('#layer1').addClass("readytoshow");
    							$('.showing').slideUp();
    							$('.showing').removeClass("showing");
    							$('#layer1').addClass("showing");
    
        });
    	
    	  $('.view2').click(function() {
    							 
    							 
    							$('#layer2').addClass("readytoshow");
    							$('.showing').slideUp();
    							$('.showing').removeClass("showing");
    							$('#layer2').addClass("showing");
    
        });
    	
    	  $('.view3').click(function() {
    							 
    							 
    							$('#layer3').addClass("readytoshow");
    							$('.showing').slideUp();
    							$('.showing').removeClass("showing");
    							$('#layer3').addClass("showing");
    
        });
    
    
    
      });
    
      </script>
      
    </head>
    <body style="background-image:url('images/bg.jpg'); background-repeat:repeat-x; background-position:top; margin:0; padding:0;">
    <center><table border="0" cellpadding="0" cellspacing="0">
    <tr><td style="width:980px; height:828px; background-image:url('images/bgmain.jpg'); background-repeat:no-repeat; ba3<kground-position:top; padding-top:75px; vertical-align:top;"><center>
      <span class="view1"> View 1</span><br/> <span class="view2" > View 2</span><br/> <span class="view3"> View 3</span><br/>
      
      
      
      <div style="position:relative; padding-top:50px; left:37px;">
      
      
    <div id="layer1" style="position:absolute; top:0; left:0;" class="showing" ><img src="images/1.jpg"></div>
    <div id="layer2" style="position:absolute; top:0; left:0;" ><img src="images/2.jpg"></div>
    <div id="layer3" style="position:absolute; top:0; left:0;" ><img src="images/3.jpg"></div>
    
    
    
    </div>
    <div id="someOtherStuff">
        <p........</p>
    </div></center></td></tr></table></center>
    
      
    </body>
    
    
    </html>

  • #2
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    946
    Thanks
    0
    Thanked 129 Times in 128 Posts
    $(window).load(function(){
    should be:
    Code:
    $(document).ready(function(){
    inside, each of the functions should be build up as:
    Code:
        $('.view1').click(function() {
          $('.showing').slideUp(function(){
            $('.showing').removeClass("showing");
            $('#layer1').addClass("showing");
            $('#layer1').slideDown();
          });
        });
    you can see that I have added function()
    inside slideUp()
    This tells the script to wait with the rest until the slideup is finished.

    and then I have added class="showing" to all the pictures.

    the first first click on any of the links will slide them all up, as they all have class showing.
    then remove the class from all of them.
    apply the class to the related image
    and then slide that image down.

    then there are only 1 image with class showing
    clicks will here after slide that on image up, then remove class -> ad class -> slidedown.

    and then i have moved #layer1 down as the last item.
    Code:
    <div id="layer2" style="position:absolute; top:0; left:0;" class="showing"><img src="images/2.jpg"></div>
    <div id="layer3" style="position:absolute; top:0; left:0;" class="showing"><img src="images/3.jpg"></div>
    <div id="layer1" style="position:absolute; top:0; left:0;" class="showing"><img src="images/1.jpg"></div>
    when the document is ready all picture are shown.
    but on top of each other, so the last picture is the only one that you wil see.


  •  

    Tags for this Thread

    Posting Permissions

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