Gettin window dimension problems with onresize

[danielpataki]

Hi Everyone!

I want to make a nice floating bar at the bottom of the screen, which hovers about 15px from the bottom. I am doing this to make a site look good in small and big resolutions. The minimum height for the bar to hover is 600px about, if the window is smaller, it is still there so it doesn't go into the content, if the window is bigger, it will follow the resize and be at the bottom still. It is obviously absolutely positioned, and also centered using some javascript (getting the width of the window).

I can make this work on page load without a problem, but I do run into something weird when resizing. I use the following code (note that I have modified it for testing, it now only returns the height)

function docHeight()
{
  var b=document.body, e=document.documentElement;
  var esw=0, eow=0, bsw=0, bow=0, esh=0, eoh=0, bsh=0, boh=0;
  if (e) {
    esw = e.scrollWidth;
    eow = e.offsetWidth;
    esh = e.scrollHeight;
    eoh = e.offsetHeight;
  }
  if (b) {
    bsw = b.scrollWidth;
    bow = b.offsetWidth;
    bsh = b.scrollHeight;
    boh = b.offsetHeight;
  }
//  alert('compatMode: ' + document.compatMode + '\n\ndocumentElement.scrollHeight: ' + esh + '\ndocumentElement.offsetHeight: ' + eoh + '\nbody.scrollHeight: ' + bsh + '\nbody.offsetHeight: ' + boh + '\n\ndocumentElement.scrollWidth: ' + esw + '\ndocumentElement.offsetWidth: ' + eow + '\nbody.scrollWidth: ' + bsw + '\nbody.offsetWidth: ' + bow);
  var height = Math.max(esh, eoh);
  return height;
}



function bottombar() {
 var height = docHeight()-30;
 var width = (docWidth()-800)/2;
 document.getElementById("footbar").style.top = height+"px";
 document.getElementById("footbar").style.left = width+"px";
 document.getElementById("footbar").innerHTML = height;
 document.getElementById("header").innerHTML = height;

The second function is called in the header and positions the bar. The last two document.get things are just for testing so I can see the height in px somewhere.

This works fine in IE. If I resize the window, making it shorter, everything goes as planned, and I can see the pixel count dropping in the header where it is displayed.

However, in FF it does not work. The weird thing is this. If I resize by a small amount, less than 10px, it works fine. However, I can not resize by more than 10px! If I do, the window height shown in the top still drops by only 10px.

So if my window is 1000px tall, and I close it to say 500px, the value of the height will still be 990px. If I then resize it to any where higher than the 500px, say 550px, the javascript still sees it as making it smaller, since it says the height is 990px, therefore, the window height goes down to 980px.

If I shrink the window to 500px and reload everything is fine, if I make it bigger, it works in both browsers. I am thinking that this could be a problem which is like "sampling rate" in music. When in IE I expand or shrink the window I can see the pixel count drop continuously and the bar floating down as I move the window, as if it was "sampled" every 0.05 seconds or something. In FF, shrinking is not working, but if I expand the window the pixel count doesn't change and the bar doesn't change place until I stop resizing (let go of the mouse button), as if it was sampled once, when I stop, so the problem maybe is related?

I would be very thankful if someone could help me out here,

Thanks a lot!

[essential]

Apply another statement that will trap different settings for different types of browsers! e.g

if ( document.all ) {
esw = e.scrollWidth;
esh = e.scrollHeight; // Which holds for IE Mode }
else if ( document.getElementById ) {
esw = e.scrollX
esh = e.scrollY } // Which is supported by FF1, Opera, and all modern browsers
else { // so...on 
}

If you need more information about this methods Click this link!