www.webdeveloper.com
Results 1 to 4 of 4

Thread: JQuery: Getting current height of element and adding height

Hybrid View

  1. #1
    Join Date
    Jul 2008
    Posts
    93

    JQuery: Getting current height of element and adding height

    Hi All,

    On this page: https://webform.bd.com/csdb/

    How do I get the current height of the Main div tag and add 1000 to it? Same goes true for subtracting 1000 if someone wants to remove a license.

    This is the JQuery that I am using to add/remove additional licenses:

    Code:
    <script type="text/javascript">
    
    $(document).ready(function()
    	{
      		$("#AddL2").click(function(){
       		$("#License2").slideDown("fast");
    	
    });
      
    
      $("#RemL2").click(function(){
        $("#License2").slideUp("fast");
    	
      });
      
        $("#AddL3").click(function(){
        $("#License3").slideDown("fast");
    	
      });
      
        $("#RemL3").click(function(){
        $("#License3").slideUp("fast");
    	
    });
      
    });
    </script>
    If you add a license and scroll all the way to the bottom, you can see the "Main" div tag doesn't adjust to the added license.

  2. #2
    Join Date
    Jul 2008
    Posts
    93
    Code:
    	{
      		$("#AddL2").click(function(){
       		$("#License2").slideDown("fast");
    	$("#main").height(function(currentHeight){
        return currentHeight + 1000;
    });
    });
    I tried this but it's not adding 1000 to the current height.

  3. #3
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,671
    the proper nesting of elements leads to the proper operation of the page:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>...</title>
    <head>
    <style type="text/css">
    #main{background-color:Lightsteelblue;padding-bottom:50px;padding-top:30px;}
    #License2,#License3{display:none;height:300px;width:800px;font-size:100px;text-align:center;margin-top:30px;}
    #License2{color:Yellow;background-color:#000;}
    #License3{color:Crimson;background-color:#555;}
    #bottom-content{color:Darkorange;background-color:#f8f8cc;border:1px outset #000;padding-top:100px;font-size:70px;height:300px;width:800px;margin-top:30px;}
    .inl{display:inline;margin-left:10px;margin-right:10px;cursor:pointer;}
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $("#AddL2").click(function(){$("#License2").slideDown("fast");});
    $("#RemL2").click(function(){$("#License2").slideUp("fast");});
    $("#AddL3").click(function(){$("#License3").slideDown("fast");});
    $("#RemL3").click(function(){$("#License3").slideUp("fast");});
    });
    </script>
    </head>
    <body>
    <center>
    <div id="main">
    <div class="inl" id="AddL2">add license 2</div>
    <div class="inl" id="AddL3">add license 3</div>
    <div class="inl" id="RemL2">remove license 2</div>
    <div class="inl" id="RemL3">remove license 3</div>
    <div id="License2">LICENSE 2</div>
    <div id="License3">LICENSE 3</div>
    <div id="bottom-content">bottom content</div>
    </div>
    </center>
    </body>
    </html>

  4. #4
    Join Date
    Jul 2008
    Posts
    93
    That's what I exactly need it to do but as you can see the source code on the page itself, it's very complicated to see the proper nesting.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles