JQuery: Getting current height of element and adding height

**llckll** · 05-08-2012 01:55 PM

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.

**llckll** · 05-08-2012 02:30 PM

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.

**Padonak** · 05-08-2012 03:26 PM

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>

**llckll** · 05-08-2012 03:49 PM

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: JQuery: Getting current height of element and adding height

Thread Tools

Display

Hybrid View

JQuery: Getting current height of element and adding height

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions