Display size of a page?

P

PapaGeek

New Member
I'm trying to figure out why this code does not work until I refresh the screen!

I copied the code below to an htm file on my disk. When I double clicked the file the first line is 1920 x 1200. The second line is 0 x 0. When I then hit F5 to refresh the screen the second line changes to 562 x 435 which is the proper size of my small browser window.

Why does it come up 0 x 0 when I load the page from disk?

This is also true when IE is already open and it has to create a new tab for the file from disk.



Code: 
<!-- saved from url=(0014)about:internet -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>

  <HEAD>
    <TITLE>Display window size</TITLE>
  </HEAD>
  <BODY>
<SCRIPT language="JavaScript"> 
<!--
height = screen.height;
width = screen.width;
document.write( width + " x " + height + "<br>");
    if (document.layers) {
        width = window.innerWidth;
        depth = window.innerDepth;
    }
    // Explorer 6 Strict Mode 
    else if (document.documentElement && document.documentElement.clientHeight) {
        width = document.documentElement.clientWidth;
        depth = document.documentElement.clientHeight;
    }
    else if (document.all) {
        width = document.body.clientWidth;
        depth = document.body.clientHeight;
    }
document.write( width + " x " + depth + "<br>");
//-->
</SCRIPT>
  </BODY>
</HTML>
 
Last edited:
P

PapaGeek

New Member
bcee said:
Try waiting for the window to completely load before you try dimension reads.
Click to expand...
How do I do that when I want the page to display its width when it is loaded?

Is there a way to tell the script to delay running?


I tried placing the code in it's own function then using a timeout to run it.

setTimeout("showWid()",3000);
function showWid()
{
...
}

It does indeed display the correct width when loaded, but it replaces the entire page with just the script output instead of displaying it in line.

It also sort of locks in the dimensions: When I change the browser window size and hit F5, the size display doesn't change.
 
Last edited:
B

bcee

New Member
Are you using that exact syntax? It should look like

setTimeout(showWid, 3000). Notice how function does not have the () at the end.

window.onload = showWid
 
P

PapaGeek

New Member
bcee said:
Are you using that exact syntax? It should look like

setTimeout(showWid, 3000). Notice how function does not have the () at the end.

window.onload = showWid
Click to expand...


Where does the window.onload line go?

I've change the script as follows:


Code: 
<!-- saved from url=(0014)about:internet -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>

  <HEAD>
    <TITLE>Display window size</TITLE>
  </HEAD>
  <BODY>
<p>Displayed with timeout</p>
<SCRIPT language="JavaScript">
<!--
setTimeout(showWid,3000);
function showWid()
{
  height = screen.height;
  width = screen.width;
  document.write( width + " x " + height + "<br>");
      if (document.layers) {
	  width = window.innerWidth;
	  depth = window.innerDepth;
      }
      // Explorer 6 Strict Mode 
      else if (document.documentElement && document.documentElement.clientHeight) {
	  width = document.documentElement.clientWidth;
	  depth = document.documentElement.clientHeight;
      }
      else if (document.all) {
	  width = document.body.clientWidth;
	  depth = document.body.clientHeight;
      }
  document.write( width + " x " + depth + "<br>");
}
//-->
</SCRIPT>

<p> Done Direct</p>
<SCRIPT language="JavaScript">
<!--
  height = screen.height;
  width = screen.width;
  document.write( width + " x " + height + "<br>");
      if (document.layers) {
	  width = window.innerWidth;
	  depth = window.innerDepth;
      }
      // Explorer 6 Strict Mode 
      else if (document.documentElement && document.documentElement.clientHeight) {
	  width = document.documentElement.clientWidth;
	  depth = document.documentElement.clientHeight;
      }
      else if (document.all) {
	  width = document.body.clientWidth;
	  depth = document.body.clientHeight;
      }
  document.write( width + " x " + depth + "<br>");

//-->
</SCRIPT>
  </BODY>
</HTML>

The page now displays like this when it first loads:

Displayed with timeout

Done Direct

1920 x 1200
0 x 0

The everything disapears 3 seconds later and the entire display changes to:

1920 x 1200
1108 x 644

It still seems to run 3 seconds later and re-write the entire screen.

I just want to display a line like:

Your current screen width is currently <script>...</script> pixels wide.
 
PixelPusher

PixelPusher

Super Moderator
Staff member
at the start of your js, "height" and "width" should have "var" written in front of them as they are variables.

and typically is goes "if, else if, else".
 
P

PapaGeek

New Member
OK, I made those changes and still the same result:

Code: 
<!-- saved from url=(0014)about:internet -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>

  <HEAD>
    <TITLE>Display window size</TITLE>
  </HEAD>
  <BODY>
<p>Displayed with timeout</p>
<SCRIPT language="JavaScript">
<!--
setTimeout(showWid,3000);
function showWid()
{
  var height = screen.height;
  var width = screen.width;
  document.write( width + " x " + height + "<br>");
  var depth = -1;
  width = -1;
      if (document.layers) {
	  width = window.innerWidth;
	  depth = window.innerDepth;
      }
      // Explorer 6 Strict Mode 
      else if (document.documentElement && document.documentElement.clientHeight) {
	  width = document.documentElement.clientWidth;
	  depth = document.documentElement.clientHeight;
      }
      else if (document.all) {
	  width = document.body.clientWidth;
	  depth = document.body.clientHeight;
      }
      else {
	  width = -2;
	  depth = -2;
      }
  document.write( width + " x " + depth + "<br>");
}
//-->
</SCRIPT>

<p> Done Direct</p>
<SCRIPT language="JavaScript">
<!--
  var height = screen.height;
  var width = screen.width;
  document.write( width + " x " + height + "<br>");
  var depth = -1;
  width = -1;
      if (document.layers) {
	  width = window.innerWidth;
	  depth = window.innerDepth;
      }
      // Explorer 6 Strict Mode 
      else if (document.documentElement && document.documentElement.clientHeight) {
	  width = document.documentElement.clientWidth;
	  depth = document.documentElement.clientHeight;
      }
      else if (document.all) {
	  width = document.body.clientWidth;
	  depth = document.body.clientHeight;
      }
      else {
	  width = -2;
	  depth = -2;
      }

  document.write( width + " x " + depth + "<br>");

//-->
</SCRIPT>
  </BODY>
</HTML>

The final page should look like this:
Code: 
Displayed with timeout

1920 x 1200
1192 x 945

Done Direct

1920 x 1200
0 x 0

It comes up initialy as
Code: 
Displayed with timeout

Done Direct

1920 x 1200
0 x 0

Then after 3 seconds the initial text disapears and is replaced by only the result of the script.
Code: 
1920 x 1200
1192 x 945

I'm trying to write this script so I can display the size of a visitor's screen. Something like:

Your browser window is currently <script> pixels wide!

It seems as if the browser has the dimensions of the screen populated when the page is being displayed, but does not have the pixel width of the actual browser window populated. Hence the initial display of 0 x 0. With the script in my first post, hitting F5 would update the display with the proper size information. It just didn't know that information at the start.

My next thought is to enclose the output area in <span> tags and give it an ID. Then I could run the script after some time, maybe 1/10 second, and update the content of that ID.

Is this a good idea. How do I reference that ID in a way that will work on all browsers.
 
B

bcee

New Member
PapaGeek said:
OK, I made those changes and still the same result:

Code: 
<!-- saved from url=(0014)about:internet -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>

  <HEAD>
    <TITLE>Display window size</TITLE>
  </HEAD>
  <BODY>
<p>Displayed with timeout</p>
<SCRIPT language="JavaScript">
<!--
setTimeout(showWid,3000);
function showWid()
{
  var height = screen.height;
  var width = screen.width;
  document.write( width + " x " + height + "<br>");
  var depth = -1;
  width = -1;
      if (document.layers) {
	  width = window.innerWidth;
	  depth = window.innerDepth;
      }
      // Explorer 6 Strict Mode 
      else if (document.documentElement && document.documentElement.clientHeight) {
	  width = document.documentElement.clientWidth;
	  depth = document.documentElement.clientHeight;
      }
      else if (document.all) {
	  width = document.body.clientWidth;
	  depth = document.body.clientHeight;
      }
      else {
	  width = -2;
	  depth = -2;
      }
  document.write( width + " x " + depth + "<br>");
}
//-->
</SCRIPT>

<p> Done Direct</p>
<SCRIPT language="JavaScript">
<!--
  var height = screen.height;
  var width = screen.width;
  document.write( width + " x " + height + "<br>");
  var depth = -1;
  width = -1;
      if (document.layers) {
	  width = window.innerWidth;
	  depth = window.innerDepth;
      }
      // Explorer 6 Strict Mode 
      else if (document.documentElement && document.documentElement.clientHeight) {
	  width = document.documentElement.clientWidth;
	  depth = document.documentElement.clientHeight;
      }
      else if (document.all) {
	  width = document.body.clientWidth;
	  depth = document.body.clientHeight;
      }
      else {
	  width = -2;
	  depth = -2;
      }

  document.write( width + " x " + depth + "<br>");

//-->
</SCRIPT>
  </BODY>
</HTML>

The final page should look like this:
Code: 
Displayed with timeout

1920 x 1200
1192 x 945

Done Direct

1920 x 1200
0 x 0

It comes up initialy as
Code: 
Displayed with timeout

Done Direct

1920 x 1200
0 x 0

Then after 3 seconds the initial text disapears and is replaced by only the result of the script.
Code: 
1920 x 1200
1192 x 945

I'm trying to write this script so I can display the size of a visitor's screen. Something like:

Your browser window is currently <script> pixels wide!

It seems as if the browser has the dimensions of the screen populated when the page is being displayed, but does not have the pixel width of the actual browser window populated. Hence the initial display of 0 x 0. With the script in my first post, hitting F5 would update the display with the proper size information. It just didn't know that information at the start.

My next thought is to enclose the output area in <span> tags and give it an ID. Then I could run the script after some time, maybe 1/10 second, and update the content of that ID.

Is this a good idea. How do I reference that ID in a way that will work on all browsers.
Click to expand...

Not a bad idea. To reference and write to an element in the DOM that has an ID (say 'status') you would use:

document.getElementById('status').innerHTML = 'hello world'
 
P

PapaGeek

New Member
My thanks to everyone, the code now works. Not sure why, but it will not display properly "in line". I had to create the area for the width and give it an ID, then update the content of the ID after it was created.

Code: 
<!-- saved from url=(0014)about:internet -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
  <HEAD>
    <TITLE>Display window size</TITLE>
  </HEAD>
  <BODY>
    <p>This page is <b id=showWidthHere>No Jave Script</b> pixels wide.</p>
<SCRIPT language="JavaScript">
<!--
  var width = screen.width;
      if (document.layers) {
	  width= window.innerWidth;
      }
      // Explorer 6 Strict Mode 
      else if (document.documentElement && document.documentElement.clientWidth) {
	  width = document.documentElement.clientWidth;
      }
      else if (document.all) {
	  width = document.body.clientWidth;
      }
      else {
          width = "Unknown DOM";
      }
  document.getElementById("showWidthHere").innerHTML = width;
//-->
</SCRIPT>
  </BODY>
</HTML>
 
Last edited:
P

PapaGeek

New Member
OK, I'm a little lost again today! I tried running the script again this morning and it didn't work. It displayed the width as 0.

I changed the code to delay 100 ms before updated the width and it ran fine. I lowered the Timeout to 10 ms and the width changed back to 0. It does work at 50 ms, and here is the new code.

Code: 
<!-- saved from url=(0014)about:internet -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
  <HEAD>
    <TITLE>Display window size</TITLE>
  </HEAD>
  <BODY>
    <p>This page is <b id=showWid1>????</b> pixels Wide.</p>
    <SCRIPT language="JavaScript">
<!--
setTimeout(showTheWidth,50);
function showTheWidth()
{
  var width = screen.width;
  if (document.layers) {
    width = window.innerWidth; }
  else if (document.documentElement && document.documentElement.clientHeight) {
    width = document.documentElement.clientWidth; }
  else if (document.all) {
    width = document.body.clientWidth; }
  else {
    width = "Unknown DOM"; }
  document.getElementById("showWid1").innerHTML = width;
}
//-->
</SCRIPT>
  </BODY>
</HTML>

My guess is that the code has to be at the end of the html file and wait for everything to display on the browser before it will give the correct answer. This might mean that it will work of some visitor's browsers and fail on others.

The DOM probably does not know the dimensions of the display area until after the entire page is displayed. This does make some sense because the depth of the display area might not be known until after the width of the page is known. A wide page will require a horizontal scroll bar and that will probably change the depth of the display window when the scroll bar is added.

Does anyone know if there is a DOM value that knows the "initial size" of the display area?

So, back to my original question. How can I display the width "RELIABLY"?
 
Last edited:
B

bcee

New Member
PapaGeek said:
My guess is that the code has to be at the end of the html file and wait for everything to display on the browser before it will give the correct answer. This might mean that it will work of some visitor's browsers and fail on others.
Click to expand...

window.onload will fix this or use jquery document ready.

PapaGeek said:
The DOM probably does not know the dimensions of the display area until after the entire page is displayed.
Click to expand...

Exactly, and with my experience in IE it still doesn't know until a few milliseconds after complete load.
 
P

PapaGeek

New Member
I just tried it again. I removed the "setTimeout(showTheWidth,50);" line from before the function, and added the line "window.onload = showTheWidth;" after the function.

The display width appears as 0. It does make it run, with both lines missing it displays as ???? as coded in the HTML.

This is an interesting result. The script that I am writing that needs a demo page that will display the width does this exact calculation with an onload call from the body tag, and it works fine. It seems as if the onload call within the body of the page occurs "during load", not "after load".
 
P

PapaGeek

New Member
This thing gets better every time I mess around with it.

I commented out the setTimeout line and change the <body> tag to:

<BODY onload=showTheWidth()>

sure enough, the display is 0, not the width of the page. Obviously the DOM has not been loaded when the onload event occurs!

I changed it again to:

<BODY onresize=showTheWidth()>

and everything works perfectly. In fact, the display changes automatically every time I resize my browser window.

So, is there a good way to -- wait -- for the DOM to load before running your onload function. It is hard to believe that the onload function runs before the page is truely loaded and the DOM is up to date.

What use is the onload function anyway!!!!!
 
P

PapaGeek

New Member
WOW!

This is a far bigger issue that I first thought. If you search the web for "onload DOM" you will get 360,000 results. The first page is full of pages that talk about relying on the DOM being there when you run onload functions. The conclusion is simple, you can't rely on it. To make things worse, the workarounds are all browser dependent.

It looks like, for this case anyway, waiting for the resize event is best. In my case I plan to kick off the script at both onload and onresize.

I want to thank everyone who made a comment on this thread. Everything put together was a big help in guiding me to what I hope will be a working solution.
 
You must log in or register to reply here.
Top