Javascript Window size detector

**fileserverdirect** · 08-16-2007, 03:12 PM

Hi,
I have a site that is basicly "fixed" as in that the content will not move if you resize the window. I made the total width 800, so that most 800*600 browsers can read it without having to scroll(that much, I mean scrollbars won't take up that much room

) Ok, every thing works. I recently got my document valid Strict, and decided to add a browser-stactic menu, that floats(NOTE: this is NOT the same script as on DD) in a div or table, displaying the W3's Valid document icon. This adds more width to the document. I decided that if the browser size (not resoultion) was more than (about) 830 px, then I would add the extra table around the outside so that the menu could float. if it was less than 830, It would display static below the copyright. Here is the nummed-down version of the script:

HTML Code:

<html>
<body>

<script language="JavaScript"><!--
function window_r()
{
w = 640;
h = 480;
NS4Plus = (document.layers) ? 1 : 0;
IE4Plus = (document.all) ? 1 : 0;

if (NS4Plus) {
   w = window.innerWidth;
   h  = window.innerHeight;
}
if (IE4Plus) {
/* The script must be inside the body tags - there is no body in the head of the document */
   w = document.body.clientWidth;
   h = document.body.clientHeight;
}
}
//--></script>
<script language="JavaScript"><!--
window_r();
if(w>830)
{
document.write('<table bgcolor=red><tr><td>This was imported by javascript, and is in a red table');
}
</script>
<table bgcolor=green><tr><td>
This Text Is Green, and is not affected when a red table surounds it.
</td></tr></table>
<script language="JavaScript"><!--
window_r();
if(w>830)
{
document.write('</td></tr></table>This was imported by javascript, but is not in a table.<br>');
}
</script>
This Text should not be affected whatever the size of the window.
</body>
</html>

NOTE: I made the document so it was easy to tell which was inputed by what.
When I added the above script into my document, only half the page showed up the top part dissappeared. I think beacause that is was not calling the function window_r(); in the seaperate <script> tags. I have no Idea what is going on, it works flaulessly on my local machine. HELP!

**jscheuer1** · 08-16-2007, 03:48 PM

That's not valid strict.

**fileserverdirect** · 08-16-2007, 03:51 PM

I told you, that was the example, my real site is valid 4.01 Strict .

**jscheuer1** · 08-16-2007, 04:28 PM

Then link us to the real site so we can see what the problem is.

**fileserverdirect** · 08-16-2007, 07:23 PM

Ok... here is the site link:
http://www.klein-onlineblog.com/test.../ohp/index.php
and here is what it looked liked BEFORE I added the extra table:
http://www.klein-onlineblog.com/test...ohp/index2.php
----READ BEFORE YOU VISIT:-----
It is written in php, but it is not the problem, I did "Save As" and it still comes up localy, so it is a javascript problem. If you wish to see the php source, just ask, I will only disply parts for copyright reasons. The site is still in devopmental stages, none of the links work on the side bar or anyware. ONLY FOCUS ON THE PROBLEM I will report you, so don't say that I spelled some stuff worng(which I know I did) or tell me that you saw that same picture on google. All of the prices\plans are not finished. PLUS all images\Ideas\Slogans are copyrighted by Onion House productions (my company).

**jc_gmk** · 08-17-2007, 02:29 PM

Just a quick note, your HTML validates with W3C but your CSS doesn't.
If you submit your page here http://jigsaw.w3.org/css-validator/ it has numerous errors.

**jscheuer1** · 08-17-2007, 04:45 PM

The page needs to be loaded before IE and other browsers that can use them can tell the clientWidth and clientHeight. This test for NS4Plus:

Code:

NS4Plus = (document.layers) ? 1 : 0;

will be false for all modern browsers, so this:

Code:

if (NS4Plus) {
   w = window.innerWidth;
   h  = window.innerHeight;
}

will never get used, and this:

Code:

if (IE4Plus) {
   w = document.body.clientWidth;
   h = document.body.clientHeight;
}

will be meaningless until after the page has loaded, at which point it will be too late to do all your document.write thingers. My advice is to just scrap the entire idea and add the extra content in the normal flow of the page, somewhere that it will look OK regardless of window size.

**fileserverdirect** · 08-18-2007, 08:08 PM

I thought of 3 possable work-arounds:

1)I will add the main part of the script right before the </BODY> tag, so the page pretty much loaded. Then add it into a variable within a function, then call the function in another script. Is there any way for it to change the document after it loaded? shouldn't document.write do it, because it is client-side?

2)This ones more of a question: What if I add an include function in the php to add the script to the document, even before the page loads. this way it will have an answer to "w" before the page is displayed.

3a)Have an "entry" page that calulates the width of the document, then passes it along to the next page throgh a "get" method and then it will decide to show the table or not.

3b) The same as above but except throwing the width variable over, it would be a simple index.php?s_valid=0 or 1 for showing it. and I could write it in php this time, even before the page loads, it would decide to print the table tags.
----
I personaly like option 3b the most, due to that it could be universal throghout the site, and would only have to add 3-4 lines of $_GET and if commands (in php).

**jscheuer1** · 08-18-2007, 10:57 PM

I can think of a number of workarounds, and some of what you have listed might work out too. However, it is rather pointless to go to so much trouble just to show a single image. I'd just put it in the normal flow of the page, or better still, redesign the page so it can flow into whatever size window the user has open for it.

**fileserverdirect** · 08-20-2007, 04:55 PM

Ok, I think 3b is the easiest (for me). But it would be kina hard to redesign the site because of the images set to exact pixles, but I will test it out with the entry page. Instead of having a newpage, I will just add an if command over the whole page to tell if the variable is set or not.

Thread: Javascript Window size detector

Thread Tools

Search Thread

Javascript Window size detector

Bookmarks

Bookmarks

Posting Permissions