Viewport width

[agibsonsw]

Hello.

I found a JavaScript function to determine the viewport width and height. That is, the height and width of the viewable area within the browser window. It was supposed to be cross-browser but failed with IE8. Sometimes it produced a width of zero but other times worked okay.

I placed it within my onload function so the page should have loaded fully?

What might cause this behaviour and how can I check if the page has 'fully' loaded, please? (I'll track down the code if it helps, but I abandoned it for the moment.)

It also seems strange that the width was wrong but the height was okay. Andy.

[MalcolmWalker]

Andy, The best way to assess a problem with a Website is to allow contributors to visit your site by providing its URL and to view the code, HTML and CSS as well as the scripting, that is used. Sometimes it’s the interaction between the parts that affects the whole. However, although I am unable to offer any comment on a JavaScript function I would like to comment on the principle involved.

As I understand your post you are using a script to set my viewport size when I visit your Website; something with which I would not be impressed particularly if the width was set to zero! Nor would I be impressed that you were interfering with the way I had my display configured. So I would quickly move on and be unlikely to visit your site again.

So the principle seems wrong to me when the Web developer has no idea of the configuration of the computer system that the viewer is using to display the developer's Website. There are scripts to do many things in a site one example being to disable the right-click context menu; the idea being to protect intellectual content in the site from being plagiarised. But this can be got round readily and is rather pointless when the site's contents have already been downloaded onto the viewer's computer.

Therefore, I think it is incumbent on a conscientious Web developer to ensure that the site as it is being developed is, as far as possible, cross-browser compliant by frequent testing in all the mainstream browsers currently in use. And that thought doesn't include the mobile device user’s displays; yet another headache!

Malcolm

[agibsonsw]

Malcolm. I certainly agree with all the points you raise. But at the moment I am just exploring JavaScript, so don't have a URL to supply you with.

I've been working hard to make my samples cross-browser, although at the moment I first get it working in Firefox and then 'coerce' it to work with Internet Explorer. Later I'll see what happens in Google Chrome. I believe this to be a sensible approach?
(I was able to clone a node (which included a paragraph, checkbox and span) so that I could just change it's id and text content each time. This worked perfectly in FF but in IE I had to re-instate numerous attributes each time, which kinda defeats the object of cloning )

I found a piece of code to measure the viewport height and width which the author claimed to be cross-browser - but I think it was cross-browser a few years ago.. My intention was to position an image (discreetly) at the bottom of the visible area of the browser's window. The problem is, if I place it at the bottom of the page it might not be visible on page load; but also, as the user adds and removes items from a list, the image moves up and down - which is distracting 'for the user'.

My main question is - is it possible to check that the page is fully loaded? Onload doesn't seem reliable with IE - but I'm not sure if it's images, form elements, or the Javascript itself which causes the concern. Thanks, Andy.

Here is the code for the viewport settings (out of interest):

Code: Select all

 var viewportwidth;
 var viewportheight;
 
 // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
 
 if (typeof window.innerWidth != 'undefined')
 {
      viewportwidth = window.innerWidth,
      viewportheight = window.innerHeight
 }
 
// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)

 else if (typeof document.documentElement != 'undefined'
     && typeof document.documentElement.clientWidth !=
     'undefined' && document.documentElement.clientWidth != 0)
 {
       viewportwidth = document.documentElement.clientWidth,
       viewportheight = document.documentElement.clientHeight
 }
 
 // older versions of IE
 
 else
 {
       viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
       viewportheight = document.getElementsByTagName('body')[0].clientHeight
 }

[jscher2000]

My intention was to position an image (discreetly) at the bottom of the visible area of the browser's window. The problem is, if I place it at the bottom of the page it might not be visible on page load; but also, as the user adds and removes items from a list, the image moves up and down - which is distracting 'for the user'.

Assuming you would use position:fixed in modern browsers, you might find some pages on how to simulate position:fixed in older browsers.

My main question is - is it possible to check that the page is fully loaded? Onload doesn't seem reliable with IE - but I'm not sure if it's images, form elements, or the Javascript itself which causes the concern. Thanks, Andy.

I think window.onload is reliable, but it fires after everything loads (css, scripts, images, etc.) so it may be a while.

[agibsonsw]

Hello.

I found sometimes IE 8 gave the correct viewport settings and sometimes not. I have abandoned the idea - it wasn't important. I knew beforehand that it is not a good idea to rely on this kind of information.

Basically, it was a bin that I was able to move and drop elements into and they would be removed from the page. This was kinda cool - for a little while - but I've moved on since then.

In terms of older browsers, I hope no one is still using IE6? Although, I do have it on another computer if I wanted to test with it - but that's not something that gets me excited.

Thanks, Andy.

[HansV]

I hope no one is still using IE6?

It's very popular with our spammers - over 90% of spammers who try to register at Eileen's Lounge use IE6...

[MalcolmWalker]

In terms of older browsers, I hope no one is still using IE6? Although, I do have it on another computer if I wanted to test with it - but that's not something that gets me excited. Thanks, Andy.

The following from Wikipedia:
Microsoft now considers IE6 to be an obsolete product and recommends that users upgrade to Internet Explorer 8. Many corporate IT users have not upgraded despite this, in part because some still use Windows 2000, which will not run Internet Explorer 7 or above.

From this and elsewhere, including personal experience, corporate bodies are very reluctant to upgrade not only because of cost but also disruption to their businesses. I was told `It works, why change?'.

[jscher2000]

From this and elsewhere, including personal experience, corporate bodies are very reluctant to upgrade not only because of cost but also disruption to their businesses. I was told `It works, why change?'.

Yes, for some reason, the fact that IE6 might not do well with the latest media players or social sites doesn't seem to bother them.