Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Bug with Mozilla/Netscape and screen.width?

Status
Not open for further replies.
tnsbuff

tnsbuff

Technical User
Jan 23, 2002
216
US
I'm having a problem with setting a background image depending on viewer's resolution. It works fine in IE 6 and Opera 7, but not in Netscape 7 or Firefox 1.0, at least not when the resolution is 800 x 600 (it still displays the 1024 graphic.)

Here's my code:

Code: 
<script>
function changeBkg(){
var b = document.getElementById('body');
var scrw = screen.width;
var scrh = screen.height;
if ((scrw >= 1024) && (scrh >= 768)){
alert(">= 1024");
b.style.background="url('1024-768.jpg')";
}
else{
b.style.background="url('800-600.jpg')";
alert("<1024");
}
}
</script>

... and in the body tag:

<body onLoad="changeBkg()" id="body">

Anyone know what the problem is? Thanks, :)
 
Sort by date Sort by votes
Check this code, which works. You'll have to adapt it to your code, but you should be able to follow.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]

<html>
<head>
<title>Untitled</title>

<script language="javascript"><!--
function checkSize() {
    var d = document.getElementById('blah');
    switch(screen.width) {
        case 800:
            d.innerHTML = 'width is 800';
            break;
        case 1024:
            d.innerHTML = 'width is 1024';
            break;
        default:
            d.innerHTML = 'in default.  width is ' + screen.width;
            break;
    }
}
--></script>

</head>

<body onload="checkSize();">

<div id="blah">Default</div>

</body>
</html>

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
 
Upvote 0 Downvote
Hi cLFlaVA,

I'm not familiar with innerHTML, but I tried to adapt your code and it still isn't working cross-browser, plus it's writing the style attributes to the screen so I'm sure I've made a mistake somewhere. It works in IE and Opera, but again, it doesn't work in Netscape or Firefox. Here's my code:

Code: 
<script language="javascript">
<!--
function changeBkg() {
    var b = document.getElementById('body');
    switch(screen.width) {
        case 800:
            b.innerHTML = b.style.background="url('800-600.jpg')";
            break;
        case 1024:
            b.innerHTML = b.style.background="url('1024-768.jpg')";
            break;
        default:
            b.innerHTML = b.style.background='';
            break;
    }
}
--></script>

and in the body tag ...

<body onLoad="changeBkg()" id="body">

In Netscape, it displays the 800 x 600 image (no matter what resolution), and in Firefox it displays the default image (no matter what resolution).

Thanks a bunch,
 
Upvote 0 Downvote
Mine was an example. You don't need innerHTML here. Try this (untested):

Code: 
<script language="javascript">
<!--
function changeBkg() {
    var b = document.getElementById('body');
    switch(screen.width) {
        case 800:
            b.style.backgroundImage = "url('800-600.jpg')";
            break;
        case 1024:
            b.style.backgroundImage = "url('1024-768.jpg')";
            break;
        default:
            b.style.backgroundImage = '';
            break;
    }
}
--></script>

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
 
Upvote 0 Downvote
No, it still doesn't seem to be working. Again, it works in IE 6.0 and Opera 7.0, but not Netscape 7.0 and Firefox 1.0.

It seems like it's not reading the screen.width properly in either one of those.
 
Upvote 0 Downvote
I always test in Firefox.

Furthermore, I have now tested this file in IE, FF, and Netscape. It worked perfectly in all three:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]

<html>
<head>
<title>Untitled</title>

<script language="javascript"><!--

function getBgImg() {
    var b = document.getElementById('body');
    switch(screen.width) {
        case 800:
            b.style.backgroundImage = 'url([URL unfurl="true"]http://www.tek-tips.com/images/logo.gif)';[/URL]
            break;
        case 1024:
            b.style.backgroundImage = 'url([URL unfurl="true"]http://www.tek-tips.com/images/check.gif)';[/URL]
            break;
        default:
            b.style.backgroundImage = 'url([URL unfurl="true"]http://www.tek-tips.com/images/star.gif)';[/URL]
            break;
    }
}

--></script>

</head>

<body id="body" onload="getBgImg();">

</body>
</html>

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
 
Upvote 0 Downvote
Okay, thanks for checking. It turns out it must be a caching issue because I cleared my cache and refreshed (while holding down the Control key) and it still displayed the old image.

However, when I close the browser and view it again, it displays the right image.

My original code also works; it just wasn't releasing the cached version.

Thanks again,
 
Upvote 0 Downvote
cool. np.

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
760
rogerte
rogerte
AbidingDude
  • Locked
  • Question
replaceChild() and Keeping Relationships
Replies
1
Views
858
AbidingDude
AbidingDude
edgarv
  • Locked
  • Question
Field with numbers and characters get nan
Replies
1
Views
399
ggriffit
ggriffit
leifoet
  • Locked
  • Question
How to combine JS and ASP ?
Replies
5
Views
487
feherke
feherke
EEM6498
  • Locked
  • Question
Combine First_Name and Last_Name into Name - Javascript
Replies
1
Views
688
Praveen425188
Praveen425188

Part and Inventory Search

Sponsor

Back
Top