Geek Answers Handbook

JQuery dynamically changes element height

I am working on a liquid layout project. I have some fixed DIV heights in my document, and the heights are the same for everyone. I need to proportionally change this DIV height to browser size. Here is the markup.

<body> <div id="a" class="target"></div> <div id="b" class="target"></div> <div id="c" class="target"></div> </body>

And css:

 <style> body { width: 90%; margin: 0 auto;} .target { width:30%; float:left; margin:1.6%; cursor:pointer; } #a { height: 200px; background-color: yellow;} #b { height: 400px; background-color: green;} #c { height: 600px; background-color: grey;} </style>

It sounds easy! The main condition is that I do not know the size of the target DIV and their identifiers , so I use .each (function ()). Here is the script I wrote:

 $(document).ready(function(){ //set the initial body width var originalWidth = 1000; /*I need to go through all target divs because i don't know how many divs are here and what are their initial height*/ $(".target").each(function() { //get the initial height of every div var originalHeight = $(this).height(); //get the new body width var bodyWidth = $("body").width(); //get the difference in width, needed for hight calculation var widthDiff = bodyWidth - originalWidth; //new hight based on initial div height var newHeight = originalHeight + (widthDiff / 10); //sets the different height for every needed div $(this).css("height", newHeight); });

});

This script works great when the user reloads the page. How can I get the same results dynamically when the user resizes the browser without rebooting? I know that I should use the $ (window) .resize event listener. But the problem is that the initial DIV height will be calculated inside the event, and the result will be the same as an infinite loop, i.e. the final height will increase or decrease in huge progression. I do not need it! How can I do each DIV initial height adjustment outside the event function, and then use these heights inside the event function? Or maybe there is another aproach to get the same result?

+8
jquery height window-resize
source share
4 answers

You need to keep the original height of each div. There are different ways to do this, here is one hack, save it in the DOM node itself (there are better ways, but it's quick and dirty).

 $(document).ready(function(){ //set the initial body width var originalWidth = 1000; /*I need to go through all target divs because i don't know how many divs are here and what are their initial height*/ function resize() { //This will only set this._originalHeight once this._originalHeight = this._originalHeight || $(this).height(); //get the new body width var bodyWidth = $("body").width(); //get the difference in width, needed for hight calculation var widthDiff = bodyWidth - originalWidth; //new hight based on initial div height var newHeight = this._originalHeight + (widthDiff / 10); //sets the different height for every needed div $(this).css("height", newHeight); } $(".target").each(resize); $(document).resize(function(){ $(".target").each(resize); }); });
+13
source share

Turn on the resize function and subscribe to the window resize event.

 $(document).ready(function(){ //set the initial body width var originalWidth = 1000; resizeTargets(); $(window).resize(resizeTargets); }); function resizeTargets() { $(".target").each(function() { //get the initial height of every div var originalHeight = $(this).height(); //get the new body width var bodyWidth = $("body").width(); //get the difference in width, needed for hight calculation var widthDiff = bodyWidth - originalWidth; //new hight based on initial div height var newHeight = originalHeight + (widthDiff / 10); //sets the different height for every needed div $(this).css("height", newHeight); }); }
+2
source share

take a look at the resize event that you can associate with jquery

http://api.jquery.com/resize/

0
source share

use .data to store the initial div size inside your $ .each function

 $(this).data('height', $(this).height()); $(this).data('width', $(this).width());

you can later get the old sizes in the resize callback

 var old_height = $(this).data('height'); var old_width = $(this).data('width');

Hope this helps

0
source share

More articles:


All Articles