Liquidizing

What is liquidizing?

It's a technique used to make a webpage work with any screen resolution by moving the object to the correct coordinates depending on the client's screen resolution. This is not needed for the average site where you could use the <center>, tables etc to achieve this. However if you would like a bar at the right side or the bottom of the screen this might be useful. It could also be used to centralize absolute positioned objects or to stretch the an object over the entire window. 

ie4 = (document.all)?true:false;
ns4 = (document.layers)?true:false;

This is the browser detection code, I prefer using a function check instead of a agent check sine it's less code and works better.

window.onload = calcPos;
window.onresize = calcPos;

When the window is resized (and loaded) we want it to get the size and then position the objects.

function calcPos() {
  if (ie4 || ns4) {
    windowWidth  = (ie4)?document.body.clientWidth:window.innerWidth;
    windowHeight = (ie4)?document.body.clientHeight:window.innerHeight;
    logoLeft = windowWidth - 100;
    logoTop = windowHeight - 50;
    posObj('Logo',logoLeft,logoTop);
  }
}

Here's the cross browser code that detects the window size and the code in red calculates the new position for an object and update it's position. In this sample the object referred to as Logo will be positioned with it's left side 100 pixels from the right border and it's top 50 pixels from the bottom. Assuming that the objects size is 100*50 pixels it would be positioned in the lower right corner of the window.

function posObj(objName,objLeft,objTop) {
  if (ie4) { objMove = document.all[objName].style;}
  else if (ns4) { objMove = document.layers[objName]; }
  objMove.left = objLeft; objMove.top = objTop;
}

This function takes 3 arguments, object name, Left Position and Top Position and then moves the object to the given position.


Thats it, the code above has been tested and works in ie4+ and ns4+, if you got any questions feel free to e-mail me.

Author: Emil A Eklund