PDA

View Full Version : 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>
<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/tests/PHP&#37;20TESTS/ohp/index.php
and here is what it looked liked BEFORE I added the extra table:
http://www.klein-onlineblog.com/tests/PHP%20TESTS/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:


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

will be false for all modern browsers, so this:


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

will never get used, and this:


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.

fileserverdirect
08-22-2007, 02:41 PM
I have done most of (3b) so far but this script isn't working:

<script type="text/javascript"><!--
w = 640;
h = 480;
NS4Plus = (document.layers) ? 1 : 0;
IE4Plus = (document.all) ? 1 : 0;

if (NS4Plus) {
w = window.innerWidth;
}
if (IE4Plus) {
w = document.body.clientWidth;
}
if(w>840)
{
document.location="index.php?w=y"
}
else
{
document.location="index.php?w=n"
}
//--></script>
Why doesn't it work?

jscheuer1
08-22-2007, 03:01 PM
There are no document.layers in any modern browser, and those that cannot use that will not use clientWidth until after the page has loaded. The location is an object of the window, not the document. So, you could try this:


<script type="text/javascript">
onload=function(){
var w = window.innerWidth? window.innerWidth : document.body.clientWidth? document.body.clientWidth : 640;
if(w>840)
window.location="index.php?w=y";
else
window.location="index.php?w=n";
}
</script>

But that had better not be on your index.php page. If it is, it will send it into an endless loop.

There could still be other problems.

fileserverdirect
08-22-2007, 03:21 PM
Thanks, it all works :) if you want to try it out,
http://www.klein-onlineblog.com/tests/PHP%20TESTS/ohp/index.php
The title bar will say "Please Wait..." That will then find the answer, re-direct you to the same page, but with a variable in the url bar. index.php?w=y which means the window is big enough or index.php?w=n which means it's not big enough. Try out both. NOTE That you have to press the Back Button to re-calculate the window size.

jscheuer1
08-22-2007, 03:44 PM
OK, I still think it would be better to just put it in the flow of the document. Also, you have a DD rules violation on your Rich HTML Balloon Tooltip script (perhaps others):

Your page is in violation of Dynamic Drive's usage terms (http://www.dynamicdrive.com/notice.htm), which, among other things, state that the script credit must appear in the source code of the page(s) using the script. Please reinstate the notice first.

fileserverdirect
08-22-2007, 04:02 PM
I use a php function that I made up:

function script($filename)
{
$type = substr(strrchr($filename, '.'), 1);
if($type=="js")
{
echo "<script type=\"text/javascript\" src=\"" . $filename . "\"></script>\n";
}
else if($type=="css")
{
echo "<link rel=\"stylesheet\" type=\"text/css\" href=\"" . $filename . "\">";
}
else
{
echo "<script type=\"text/javascript\">";
echo "alert('PROGRAMMER\'S ALERT:\\n function: script\\n error: type: not reconized\\n-----------\\nTell OHP About this problem, \\nGo to HELP > Report A... in the menu.\\n THANK YOU');";
echo "</script>";

}
}
Then I add this into the php page:

script('balloontip.js');
script('style.css');
script('ddmenu.css');
script('balloontip.css');

It would be too hard to modify its siplicity to display copyright notices.
Can I perhaps add in:

<!-- SOME SCRIPTS\STYLES ON THIS PAGE ARE COPYRIGHTED 2006-2007 DYNAMIC DRIVE AND OR THE USER WHO SUBMITTED THEM. VISIT THEM @ WWW.DYNAMICDRIVE.COM -->And put that code right below my copyright? NOTE: I have changed\added new features to all of DD's scripts and style sheets. Some for Validating reasons.

jscheuer1
08-22-2007, 06:50 PM
It really isn't up to me, but I am sure that it's better than the way it is now. Or put it this way, I won't tell if you don't.

fileserverdirect
08-22-2007, 08:18 PM
Well Thanks, but I put it in anyways, beacause I don't like:

And This Just in, a man by the username of fileserverdirect just got arrested by Dynamic Drive, a place where they give away free DHTML Scripts, for using all of there free scripts without giving an in-code link to the site. He says in reply "It would have been too hard too add it and jscheuer1 said he wouldn't tell!!!" fileserverdirect is going to the supream court on saturday. Dynamic Drive is preparing to sue 1 million dollars plus thow him in jail for up to 20 years. The entire Freeware Industry is going nuts, nobody is downloading anthing, Dynamic Drives Hosting company has just gone out of business, Today is the worst day in computer histoy since Bill Gates was born. And Now back to you Katie. >>Thank You Brain, and now to the story that shocked us all, Can Opener Re-call caused 10 deaths and 3 severly hurt.---(well ok I exaggerated a little)
----P.S.---
I started a new thread about this cookie problem, if you want to help:
http://www.dynamicdrive.com/forums/showthread.php?t=23973

tech_support
08-23-2007, 07:19 AM
You can remove all this screen detection crap if you put the valid icon on the footer, or just put a link. :p