Storing width height and position values in javascript Not with jquery

0
votes

how can I store the height ,width and position values of a DIV box within javascript (not with JQuery!) in a variable?

more specifically:

I am designing my pages for a screen resolution of 1600 width. So I am writing a script in which all the div tags will be re-sized proportionally to the ratio of the current screen size that the client is accessing the page by the width of the page that was originally designed.

In other words I want to get dynamically all the height width and position values of all div tags and then multiply them with this ratio so that all of them will be re-sized and re-positioned proportionally.

But so far i cannot seem to be able to store this values correctly.

this is what i have written so far:

<script type=text/javascript>
availW = window.screen.availWidth;
availH = window.screen.availHeight;

perNum = availW/1600;

allDivs = document.getElementsByTagName("div");

allDivsLength = allDivs.length;

for (var i=0; i<allDivsLength; i++) {
    allDivsTop = [];
    allDivsBottom = [];
    allDivsLeft = [];
    allDivsRight = [];
    allDivsWidth = [];
    allDivsHeight = [];
    changeAllDivs(i);
}

function changeAllDivs(k) {
    var i=k;
    allDivsTop[i] = allDivs[i].currentStyle.getProperyValue("top");
    allDivsBottom[i] = allDivs[i].clientBottom;
    allDivsLeft[i] = allDivs[i].clientLeft;
    allDivsRight[i] = allDivs[i].clientRight;
    allDivsWidth[i] = allDivs[i].clientWidth;
    allDivsHeight[i] = allDivs[i].clientHeight;
    allDivs[i].style.width = perNum*allDivsWidth[i]+"px";
    allDivs[i].style.height = perNum*allDivsHeight[i]+"px";
    allDivs[i].style.top = perNum*allDivsTop[i]+"px";
    allDivs[i].style.bottom = perNum*allDivsBottom[i]+"px";
    allDivs[i].style.left = perNum*allDivsLeft[i]+"px";
    allDivs[i].style.right = perNum*allDivsRight[i]+"px"; 
}
<script/>
2
javascript
Why don't you write all CSS values in percents in the first place? - John Dvorak
... haven't thought about it.. thanks :) - cursez
but if I didn't want to do a linear transformation like the multiplication with a ratio is .. but it is a good idea to do it with css in the beginning , mostly I want to practice on javascript and the dom level methods. - cursez
The reason to not use jQuery is purely academical as well? :-) - John Dvorak
i am just new in javascript just one and a half month and i want to first understand how javascript core functions and then move to jQuery - cursez

2 Answers

1
votes

Why not use CSS percentage values? Because of aspect ratio?

You could consider having a container with a fixed aspect ratio, and just resizing the one container based on the size of the client window. Anything within the container could be placed using normal CSS percentage values... Should save you some headaches later on.

Now I've modified your code slightly, see if it works better

availW = window.screen.availWidth;
availH = window.screen.availHeight;

perNum = availW/1600;

allDivs = document.getElementsByTagName("div");

scaleProperties = ['clientTop', 'clientBottom'] //and so on

for (var i=0; var l = allDivs.length; i < l; i++) {
    var currDiv = allDivs[i];

    for(var p in scaleProperties)
         currDiv[p] = (currDiv[p] * perNum) + "px";
}
0
votes

Use this to get your body Width and Height in most browsers 

var availW ;
var availH ;
if(typeof(window.innerWidth == 'number')){
    availW = window.innerWidth;
    availH = window.innerHeight;
}
else if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)){
    availW = document.documentElement.clientWidth;
    availH = document.documentElement.clientHeight;
}
else if(document.body && (document.body.clientWidth || document.body.clientHeight)){
    availW = document.body.clientWidth;
    availH = document.body.clientHeight;
}