JQuery - the function of scaling several sections in proportion to the height of the window

Question

Please help noob.

I am trying to create a jQuery function that will scale and move several absolute positioned divs in proportion to the height of the window.

I have included the following code to illustrate the result that I am trying to achieve. The number 960 represents the maximum height in pixels that any div on the page will have. Therefore, when resizing 960 should be equal to 100% of the height of the window.

For variables: divHeight, divLeft and divTop, I entered my values ​​manually because I don’t know how to get their values ​​from css and then restore these original values ​​when the window size changes, so the function does not calculate the height and position of the div based on new values.

function scaleDivs() { var winHeight = $(window).height(); var divHeight = 348; var divLeft = 40; var divTop = 100; var percentDif = (winHeight / 960) * 100; var newHeight = (percentDif / 100) * divHeight; newHeight = parseInt(newHeight) + "px"; var newLeft = (percentDif / 100) * divLeft; newLeft = parseInt(newLeft) + "px"; var newTop = (percentDif / 100) * divTop; newTop = parseInt(newTop) + "px"; $("#panel_0").css({"height": newHeight, "left": newLeft, "top": newTop}); } $(document).ready(function() { scaleDivs(); $(window).bind('resize', scaleDivs); }); 

What I would like to have is one function to control multiple divs - automatically get the required css values.

If someone knows about a plugin that does what I ask, or if you could specify what I need to change in my code to do what I ask, I would really appreciate it.

---

... Change ...

This solution uses .data strong> to get the initial height and position of the divs.

JQuery

 function scalePanels() { var winHeight = $(window).height(); var ratio960 = winHeight / 960; $(".panelCont").each(function(){ var panelHeight = $(this).data("initial-height"); var newHeight = panelHeight * ratio960; newHeight = parseInt(newHeight) + "px"; var panelTop = $(this).data("initial-top"); var newTop = panelTop * ratio960; newTop = parseInt(newTop) + "px"; var panelLeft = $(this).data("initial-left"); var newLeft = panelLeft * ratio960; newLeft = parseInt(newLeft) + "px"; $(this).css({"height": newHeight, "top": newTop, "left": newLeft}); }); }; $(document).ready(function() { scalePanels(); $(window).bind('resize', scalePanels); }); 

HTML

 <div class="group_1"> <div class="panelCont" id="pnl_0a" data-initial-height= "960" data-initial-left= "0" data-initial-top= "0"> <img src="images/pnl_0a.jpg" /> </div> <div class="panelCont" id="pnl_0_title" data-initial-height= "97" data-initial-left= "186" data-initial-top= "26"> <img src="images/pnl_0_title.svg" /> </div> <div class="panelCont" id="pnl_0b" data-initial-height= "960" data-initial-left= "0" data-initial-top= "0"> <img src="images/pnl_0b.jpg" /> </div> </div> 

CSS

 body { margin: 0 auto; background-color: #000; overflow-y: hidden; } #pnl_0a { margin: 0px; width: auto; position: absolute; z-index: 2; } #pnl_0_title { margin: 0px; width: auto; position: absolute; z-index: 4; } #pnl_0b { margin: 0px; width: auto; position: absolute; z-index: 3; } img { margin: 0px; width: auto; height: 100%; } object { margin: 0px; height: 100%; } 

Answer 1

One possible solution involves using percent instead of px to set both position and height. This way you only use JavaScript without javascript.

 #panel_0 { height: 36%; left: 7%; top: 11%; } 

This solution can be problematic if you do not use only percentages for the location (see also this article on flexible positioning)

if you want javascript anyway you can try something like this (untested, so be careful):

 function adjust(wrapper){ var wrapperHeight = $(wrapper).height(); var wrapperWidth = $(wrapper).width(); var elementArr = []; // create location index for all the elements inside the wrapper $.each($(wrapper).children('.adjustable'),function(key,value){ var percLeft = $(value).css('left')/wrapperWidth; var percTop = $(value).css('top')/wrapperHeight; var percHeight = $(value).height()/wrapperHeight; var elem = [value,percLeft,percTop,percHeight]; elementArr.push(elem); }); $(document).resize(function(){ $.each(elementArr, function(key,value){ $(value[0]) .css('left', $(value[0]).css('left') * value[1]) .css('top',$(value[0]).css('top') * value[2]) .height($(value[0]).height() * value[3]); }); }); };