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 4 of 4
  1. #1
    New Coder
    Join Date
    Jun 2012
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Nested divs, showing one at a time

    Hello, I'm trying to have a container div, that fills its position 100% in height (its inside a table cell, after the page header and before the page footer).
    Inside that div, I'll have 3 divs, that fill up that container div, but one at a time. I don't want to switch the display (visible to none) because I want all of them there to later play (with jquery) with the transition between them...

    What I tried below, doesn't seem to work... (the top position idea is to later do a jquery onclick effect to transition from one div to another)

    What would the best approach for this be?
    Thanks!

    Code:
    <style type="text/css" media="screen"> 
    
    #div-1 {
     position:relative;
    }
    #div-1a {
     position:absolute;
     top:0;
     right:0;
     width:100%;
     height:100%;
    }
    #div-1b {
     position:absolute;
     top:100%;
     right:0;
     width:100%;
     height:100%;
    }
    #div-1c {
     position:absolute;
     top:200%;
     right:0;
     width:100%;
     height:100%;
    }
    </style>
    Code:
    <div id="div-1">
    	<p>id = div-1</p>
    	<div id="div-1a">
    		<p>id = div-1a</p>
    		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
    	</div>
    	<div id="div-1b">
    		<p>id = div-1b</p>
    		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
    	</div>	
    	<div id="div-1c">
    		<p>id = div-1c</p>
    		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
    	</div>	
    </div>

  • #2
    New Coder
    Join Date
    Jun 2012
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    closer

    Getting closer...

    Code:
    #div-1 {
    	 position:relative;
    	 height: 200px;
    	 overflow: auto;
    }
    #div-1a {
    	 position:absolute;
    	 top:0;
    	 height:200px;
    }
    #div-1b {
    	 position:absolute;
    	 top:200px;
    	 height:200px;
    }
    #div-1c {
    	 position:absolute;
    	 top:400px;
    	 height:200px;
    }
    but the show code, doesn't seemm to work... I think I'm using the wrong method with the top:0px....

    Code:
    <script> 
      $(document).ready(function () { 
    	$("#btn1").click(function() {
    	  $("#div-1a")).animate({ top : "0px" };
    	});
    	$("#btn2").click(function() {
    	  $("#div-1b")).animate({ top : "0px" };
    	});
    	$("#btn3").click(function() {
    	  $("#div-1c")).animate({ top : "0px" };
    	});
    }); 
      </script>

  • #3
    Regular Coder Mooseman's Avatar
    Join Date
    Sep 2010
    Posts
    123
    Thanks
    7
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by diegolaz View Post
    Code:
    <script> 
      $(document).ready(function () { 
    	$("#btn1").click(function() {
    	  $("#div-1a")).animate({ top : "0px" };
    	});
    	$("#btn2").click(function() {
    	  $("#div-1b")).animate({ top : "0px" };
    	});
    	$("#btn3").click(function() {
    	  $("#div-1c")).animate({ top : "0px" };
    	});
    }); 
      </script>
    Assuming you have the jQuery library on your page, your syntax is out of order. Fixed:
    Code:
      $(document).ready(function () { 
    	$("#btn1").click(function() {
    	  $("#div-1a").animate({top : "0px"}, 500); /* 500ms animation */
    	});
    	$("#btn2").click(function() {
    	  $("#div-1b").css(top : "0px"); /* no animation */
    	});
    	$("#btn3").click(function() {
    	  $("#div-1c").animate({top : "0px"}, 1000); /* 1000ms (1 second) animation */
    	});
    });

  • Users who have thanked Mooseman for this post:

    diegolaz (06-07-2012)

  • #4
    New Coder
    Join Date
    Jun 2012
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    thanks!

    Thanks! I'll try that!


  •  

    Posting Permissions

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