Question : Vertical scaling with Jquery

I have a page and it has a div, the div is vertically expandable, so what I want is, when adding content rather than adding single pixel I want to add 15px blocks, for example lets say right now its height is 510px, and when adding content the next height should be 525px if content keep filling next height should be 540px. like that 15px blocks. Any idea ?

Answer : Vertical scaling with Jquery

You can use the Animate effect and get the current height, add the number of pizels you want.

Try the example below
It starts off with a 200px height, I've created addItem() function in which it'd add 15 pixels to the current height everytime it's called.

I've also created another function removeItem() which practically does the same thing but subtracts the 15 pixels instead of adding them.

They can of course be modified to whatever you like

Cheers

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">

function addItem() {
 var xheight = ($("#test").height() + 15 + "px");
  $("#test").animate({
      height: xheight
});
}
function removeItem() {
 var xheight = ($("#test").height() - 15 + "px");
 $("#test").animate({
      height: xheight
});
}

</script>
<style type="text/css">
    #test {height:200px;border:solid 1px red;}
</style>
</head>
<body>
<div id="test"> 
    <a href="#" onclick="addItem();">Expand 1 item</a>
    <br />
    <a href="#" onclick="removeItem();">Collapse 1 item</a>
</div>
</body>
</html>