J
JV
I have code below for dynamically changing the size of a background
image depending on the user's viewable area, which works great in IE
as you will see, but doesn't work in Firefox. The non-MSIE code is
inside of the brackets adjacent to the 'else' statement. Any
suggestions on what I need to change to make this work in Firefox?
Thanks!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<script language="JavaScript">
var backgroundset = false; // do not change, for internal use only
function fixedBackground(url) {
document.body.background = url; if(!backgroundset) {
document.body.style.overflow = 'hidden';
document.body.style.padding = '0px';
document.body.style.margin = '0px';
var overlay = document.createElement('DIV');
if(navigator.userAgent.indexOf("MSIE") > 0) {
overlay.style.position = 'absolute';
overlay.style.top = '0px';
overlay.style.left = '0px';
overlay.style.height = '100%';
overlay.style.width = '100%';
overlay.style.overflow = 'auto';
overlay.innerHTML = document.body.innerHTML;
document.body.innerHTML = '<img id="background" height="100%"
width="100%" src="' + url + '" style="left: 0; bottom: 0; right: 0;
top: 0; z-index: 0" />';
document.body.appendChild(overlay);
backgroundset = true;
}
// This is where it goes wrong...
else {
overlay.setAttribute("style", "position: absolute; top: 0px; left:
0px; height: 100%; width: 100%; overflow: auto;");
overlay.innerHTML = document.body.innerHTML;
document.body.innerHTML = '<img id="background" height="100%"
width="100%" src="' + url + '" style="left: 0; bottom: 0; right: 0;
top: 0; z-index: 0" />';
document.body.appendChild(overlay);
backgroundset = true;
}
}
else document.body.background = url;
}
</script>
</head>
<body onload="fixedBackground('http://download.qj.net/uploads/
files_module/screenshots/253_PSP-background-thor64.jpg');">
<center>
<SCRIPT LANGUAGE="JavaScript">
document.write(" " + document.body.clientWidth + " " +
document.body.clientHeight + " " + window.outerWidth + " " +
window.outerHeight);
</script>
</center>
</body>
</html>
image depending on the user's viewable area, which works great in IE
as you will see, but doesn't work in Firefox. The non-MSIE code is
inside of the brackets adjacent to the 'else' statement. Any
suggestions on what I need to change to make this work in Firefox?
Thanks!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<script language="JavaScript">
var backgroundset = false; // do not change, for internal use only
function fixedBackground(url) {
document.body.background = url; if(!backgroundset) {
document.body.style.overflow = 'hidden';
document.body.style.padding = '0px';
document.body.style.margin = '0px';
var overlay = document.createElement('DIV');
if(navigator.userAgent.indexOf("MSIE") > 0) {
overlay.style.position = 'absolute';
overlay.style.top = '0px';
overlay.style.left = '0px';
overlay.style.height = '100%';
overlay.style.width = '100%';
overlay.style.overflow = 'auto';
overlay.innerHTML = document.body.innerHTML;
document.body.innerHTML = '<img id="background" height="100%"
width="100%" src="' + url + '" style="left: 0; bottom: 0; right: 0;
top: 0; z-index: 0" />';
document.body.appendChild(overlay);
backgroundset = true;
}
// This is where it goes wrong...
else {
overlay.setAttribute("style", "position: absolute; top: 0px; left:
0px; height: 100%; width: 100%; overflow: auto;");
overlay.innerHTML = document.body.innerHTML;
document.body.innerHTML = '<img id="background" height="100%"
width="100%" src="' + url + '" style="left: 0; bottom: 0; right: 0;
top: 0; z-index: 0" />';
document.body.appendChild(overlay);
backgroundset = true;
}
}
else document.body.background = url;
}
</script>
</head>
<body onload="fixedBackground('http://download.qj.net/uploads/
files_module/screenshots/253_PSP-background-thor64.jpg');">
<center>
<SCRIPT LANGUAGE="JavaScript">
document.write(" " + document.body.clientWidth + " " +
document.body.clientHeight + " " + window.outerWidth + " " +
window.outerHeight);
</script>
</center>
</body>
</html>