View Full Version : screen detecting then choose image in stylesheet
smallbeer
02-01-2003, 03:01 PM
Hi
I found this previous post (http://www.codingforums.com/showthread.php?threadid=10029&highlight=screen+detect+stylesheet) helping someone to detect the browser window size and then choose an stylesheet for that size.
I'm wanting to do something slightly different but I'm not sure it can be done. I want to detect the screen size but then instead of choosing from different stylehsheets, I want to choose from different background images from within the same stylesheet. External stylesheet if possible.
Cheers for any advice you can give.
Jamie
Graeme Hackston
02-01-2003, 03:20 PM
Set up another external CSS after your first 1 in the head. Give it an id, example:
<link rel="stylesheet" type="text/css" href="Toggle_BGD.css" id="Toggle_BGD" />
put a link to a 2nd background image in it.
Then onload:
onload = function() {
document.getElementById('Toggle_BGD').disabled = true
if (your_variable) {
document.getElementById('Toggle_BGD').disabled = false
}
}
Or something to that affect.
<edit> fixed a syntax error </edit>
Well, you can do the following:
1- Define your style for the <body> tag on your css stylesheet, something like:
ex.: body {font-family: Verdana; background: white url(defaultImage) center center no-repeat}
2- define other body styles with diferent names, and a diferent background image for each screen resolution:
ex.:
body.640 {background-image: url(imageFor640x480)}
body.800 {background-image: url(imageFor800x600)}
body.1024 {background-image: url(imageFor1024x768)}
...
and so on for every resolution you may like.
3- then place this on the body onload:
window.document.all.tags('BODY')[0].className=screen.width
ex.: <body onload="window.document.all.tags('BODY')[0].className=screen.width">
----------------------------------------------------
Ok, this code is for IE only.
Notice the diferent class names for the body are the SCREEN WIDTH of the resolutions you want to work on (for example, if you want a special background for 1024x768, make a class named body.1024 and put that background there).
Doing a body.className doesnt work on IE, you first have to go fetch the body as an object (ex.: all.tags('BODY')[0]) and only then can you change its properties as a tag. Another way around this, that will probably work, is give the body an ID:
ex.: <body id='bodyId' ... >
and then do a getElementById or something... cant remember right now the correct call. After you get the element, change its className to the screen.width =) works great.
smallbeer
02-03-2003, 08:55 AM
Originally posted by GoHF
Well, you can do the following:
1- Define your style for the <body> tag on your css stylesheet, something like:
ex.: body {font-family: Verdana; background: white url(defaultImage) center center no-repeat}
2- define other body styles with diferent names, and a diferent background image for each screen resolution:
ex.:
body.640 {background-image: url(imageFor640x480)}
body.800 {background-image: url(imageFor800x600)}
body.1024 {background-image: url(imageFor1024x768)}
...
and so on for every resolution you may like.
3- then place this on the body onload:
window.document.all.tags('BODY')[0].className=screen.width
ex.: <body onload="window.document.all.tags('BODY')[0].className=screen.width">
----------------------------------------------------
Ok, this code is for IE only.
Notice the diferent class names for the body are the SCREEN WIDTH of the resolutions you want to work on (for example, if you want a special background for 1024x768, make a class named body.1024 and put that background there).
Doing a body.className doesnt work on IE, you first have to go fetch the body as an object (ex.: all.tags('BODY')[0]) and only then can you change its properties as a tag. Another way around this, that will probably work, is give the body an ID:
ex.: <body id='bodyId' ... >
and then do a getElementById or something... cant remember right now the correct call. After you get the element, change its className to the screen.width =) works great.
Hi
I tried what you suggested but couldn't get it to work. :confused:
Anyone's help would be much appreciated.
Jamie
have you tried it on IE?
well, the DOM version (document.getElementById() instead of the document.all collection) is here:
http://mega.ist.utl.pt/~pfbe/bin/changeBgStyle.htm
try changing the resolution of your screen between 640, 800 and 1024 (the only values I coded there) and if the image doesnt change automatically, refresh the page (F5 on IE, ctrl+R on Netscape). You'll see it change. You'd better see it change ;P j/k
To use an external stylesheet ... well, I think that's fairly straight forward, right? although, if you want me to do even that, I will...
smallbeer
02-03-2003, 06:42 PM
OK so I finally got the DOM version working on IE. I had to take out my DOCTYPE though - something to do with the xhtml ???
It's not working on Netcape though - not sure if it was meant to??
Excuse my stupidity and thanks for the help so far! :thumbsup:
Seems that Netscape doesnt accept class names that are numbers only, like "800" or "1024". However, it accepts class names like "d800" and "d1024" (duh!).
Result, I just updated the page on my server and tested it on Netscape 7.01. I just changed the class names from 800 to d800 (for example), and modified the function that switches the body class to match that change in class names.
Another update, the onresize event is now working ok with IE, so if your users change their screen resolution the page will automatically change the background (I hope). This doesnt work on Netscape because the (stupid) browser saves the screen width of when it was first opened, and even if you change from, lets say, 800x600 to 1024x768, it will still say 800x600 for screen dimensions, EVEN if you reload the page. You have to close and reopen the browser. Blergh! This was tested on WinXP with Netscape 7.01.
smallbeer
02-03-2003, 11:32 PM
You are the man. That's pretty much as close as we're (you're!) gonna get to how I wanted it.
Thank you :thumbsup:
vBulletin® v3.8.2, Copyright ©2000-2012, Jelsoft Enterprises Ltd.