PDA

Click to See Complete Forum and Search --> : JavaScript CSS help?

rellik
02-14-2003, 09:44 AM
<style>
body {
background-color: #000000;
background-repeat: no-repeat;
background-position: 3px 1px;
background-image: url(bg.gif);
}
</style>
<script language="JavaScript">
<!--
var actualWidth = window.screen.width;
var actualHeight = window.screen.height;
var backgroundStyle = document.style.bodyBackground;
if (actualWidth >= 1024 && actualHeight >= 768)
{
backgroundStyle = 'bluebg.gif';
}
//-->
</script>
</head>

this is part of the head of a .htm file and the aim is for the document to change the background image if the resolution is equal to or higher than 1024x768. Problem is, it doesn't.. :D Am i referencing the style object correctly?
Any help appreciated
gil davis
02-14-2003, 09:55 AM
Am i referencing the style object correctly?Nope.

var backgroundStyle = document.body.style.background;

But that's not your only problem. You cannot access an object's style until it is rendered.

Also, a window doesn't have a screen object. It may work on IE (go figure), but you should drop "window" out of the loop:

var actualWidth = screen.width;
var actualHeight = screen.height;
rellik
02-14-2003, 10:00 AM
ok, i put

var backgroundStyle = document.body.style.background;

and now it says 'object required' for this line. also, i removed screen, cheers
khalidali63
02-14-2003, 11:36 AM
I think this is how you should have done what you are trying to do.


<style>
body {
background-color: #000000;
background-repeat: no-repeat;
background-position: 3px 1px;
background-image: url(76.gif);
}
</style>
<script language="JavaScript">
<!--
function changeBG(){
var parent = document.getElementById("body");
var actualWidth = window.screen.width;
var actualHeight = window.screen.height;
if (actualWidth >= 1024 && actualHeight >= 768){
parent.style.backgroundColor = 'lightyellow';
}
}
window.onload = changeBG;
//-->
</script>
</head>

</head>

<body id="body">




cheers

Khalid
rellik
02-14-2003, 11:53 AM
<style>
body {
background-color: #000000;
background-repeat: no-repeat;
background-position: 3px 1px;
background-image: url(bg.gif);
}
</style>
<script language="JavaScript">
<!--
function changeBg(){
var parent = document.getElementById("body");
var actualWidth = screen.width;
var actualHeight = screen.height;
var backgroundStyle = document.body.style.background;
if (actualWidth >= 1024 && actualHeight >= 768)
{
parent.style.backgroundImage = 'bluebg.gif';
}
}
window.onload = changeBg;
//-->
</script>
</head>

<body id="body">

cheers, but..
i put the above code in (as i want the bgimage to change) but it throws out no errors and doesn't change the background even tho my resolution is 1024x768
gil davis
02-14-2003, 01:16 PM
Here is a functional example:

<head>
<style>
body {
background-color: #000000;
background-repeat: no-repeat;
background-position: 3px 1px;
background-image: url(bg.gif);
}
</style>
<script>
var actualWidth = screen.width;
var actualHeight = screen.height;
var fl = ((actualWidth >= 1024) && (actualHeight >= 768)) ? "picture1.jpg" : "picture2.jpg";
function swap() {
document.body.style.backgroundImage = "url('" + fl + "')";
}
</script>
</head>
<body onLoad="swap()">
</body>