Edit Question - KnowledgeHub

Title Body

I'm working on a fluid layout project. I have some fixed height DIVs in my document, and the heights are different for all of them. I need to proportionally change these DIVs height on browser resize. 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> Sounds easy! The main condition is that i don't know the precize amount of target DIVs and their IDs , that's why i'm using .each(function()). Here is 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 perfectly works when user reload the page. How can i get the same results dinamically, when user resizes browser without reloading? I know i should apply $(window).resize event listener. But the problem is that DIV's initial height will be calculated inside the event and the result will be almoust

Tags (comma-separated) Cancel