4
Instead of using the document.write() you should just change the element you want to work with. Here's how you can change it without breaking an html page for someone who's Javascript is turned off:
<script language="javascript1.2" type="text/javascript">
function setBackgroundImage() {
if (screen.height <= 600) {
document.body.style.background="images/background600.jpg";
} else if (screen.height > 600 && screen.height < 768) {
document.body.style.background="images/background768.jpg";
} else {
document.body.style.background="images/background1024.jpg";
}
}
script>
Note the compression in the JavaScript. Now you can use onLoad="setBackgroundImage()" in the body tag to call it. Doing this won't remove the body tag from the html. The only problem using this method is the image won't load with until the entire page has been loaded already; however, there is a workaround by using this method:
image600 = new Image();
image600.src = "images/background600.jpg";
However, this also has a problem. Using the preloading of images will load other useless images wasting download time. A way around that would be to only use the onLoad functionality.
Now then...
- DO NOT USE the screen height.
- DO NOT MAXIMIZE the window for the screen.
- DO NOT USE popups unless it's from a link the user clicks on.
- DO NOT MOVE the window.
Taking control away from a user only pushes people away from your web site. I don't know how may sites try to do this to make their web site look "cool". Instead set the initial table width to 784 (default width of 800x600 display size with a maximized browser window with margin set at 5). Then, gather the current width of the window using window.innerWidth (or document.body.offsetWdith if you are using IE). Using the current width of the screen you can then safely set the table or div size. I would recommend using table over div as there are still some browsers out there which do not support span or div properly. I've been a web developer since before html became a standard.
