Tim Rogers said on 12/04/2006 8:22 AM AEST:
Hi folks,
this is a resolution-detect script that I used on a site. As you can see it
is designed to detect when the screen resolution falls below a certain level
It doesn't detect screen resolution (which would be quite pointless
anyway), it looks at the width of the browser window in a manner
suitable only for IE and browsers that copy its event model and window
object API.
To detect the width of the browser window using script, read about
viewport properties at quirksmode:
<URL:http://www.quirksmode. org/viewport/compatibility.h tml>
Note that what works best is dependent on the DTD you use.
Using browser window size to determine the stylesheet to load is a
flawed strategy - partly because determining the size of the browser
window reliably across all browsers is difficult and the size of the
window is not necessarily related to the size of the viewport.
You must also consider what style rules will be active if scripting is
disabled or your script doesn't work in a particular browser.
<URL:
http://groups.google.co.uk/group/com...11631f5012ebf0
Have a look at W3C CSS 2 Media Types - no script required:
<URL:http://www.w3.org/TR/REC-CSS2/media.html>
You can then include stylesheets for a variety of devices (seems you may
want 'screen' and 'handheld', maybe 'print' also) and the client can
decide which one to use. Follow-up in a CSS-related group:
news:comp.infos ystems.www.authoring.stylesheets
The script you posted relies on multiple stylesheets attached using link
elements, it then uses script and the title attribute to enable/disable
them using getElementsByTa gName and sifting through the link elements.
That is inefficient, much better to use the stylesheets collection:
document.styleS heets[i].disabled = true; // or false
Below is a small sample based on similar principles, however I must
stress that using media types is much preferred and doesn't require any
script.
[...]
checkBrowserWid th();
attachEventList ener(window, "resize", checkBrowserWid th, false);
attachEventList ener is a method of a DOM object, the syntax is
bSuccess = object.attachEv entListener(sEv ent, fpNotify)
<URL:http://msdn.microsoft. com/workshop/author/dhtml/reference/methods/attachevent.asp >
It is also IE specific, use feature detection and addEventListene r to
support other browsers. Search the archives for 'addEventListen er
attachEvent'.
Anyway, it seems much simpler to use:
window.onresize = checkBrowserWid th;
But it will replace other resize handlers you might have.
function checkBrowserWid th()
{
var theWidth = getBrowserWidth ();
if (theWidth == 0)
{
var resolutionCooki e =
document.cookie .match(/(^|;)res_layout[^;]*(;|$)/);
The cookie seems to be here as a fallback if the script can't detect the
window size. Is there a button somewhere to set it to some value? If
you aren't using it, remove the code.
If the script can't detect the window size and can't find a cookie, it
does nothing, which is good.
if (resolutionCook ie != null)
{
setStylesheet(u nescape(resolut ionCookie[0].split("=")[1]));
}
addLoadListener (checkBrowserWi dth);
Where is addLoadListener defined?
[...]
function setStylesheet(s tyleTitle)
{
var currTag;
if (document.getEl ementsByTagName )
{
for (var i = 0; (currTag =
document.getEle mentsByTagName( "link")[i]); i++)
This sifts through the link elements, but that's not necessary. If you
load a style sheet using a link element, just put the title in the link:
<link rel="stylesheet " href="blah.css" title="bigText" >
It will become a property of the related stylesheet object, searching
the stylesheets should be more efficient.
Here's a quick 'n dirty example (works in Fx and IE):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Styleshe et play</title>
<style type="text/css" title="bigText" >
p {color: red; font-size: 220%;}
</style>
<!-- Could also use:
<link rel="stylesheet " href="blah.css" title="bigText" >
-->
<style type="text/css" title="smallTex t">
p {color: blue; font-size: 70%;}
</style>
<style type="text/css">
#xx {color: green; font-size: 100%;}
</style>
<script type="text/javascript">
/* Turn stylesheets on or off depending on the
* size of the browser window
*/
function checkSize()
{
var docEl = document.docume ntElement || document.body;
var bodyX, bodyY;
if ( docEl
&& (bodyX = docEl.clientWid th)
&& (bodyY = docEl.clientHei ght) ){
if (bodyX < 801 || bodyY < 601){
setStyleSheet(' smallText');
} else {
setStyleSheet(' bigText');
}
}
}
/* Use the style sheet title attribute to toggle it on/off
* Matching titles are turned on
* Non-matching titles are turned off
* Stylesheets without a title aren't modified
*/
function setStyleSheet(t )
{
var s, ss = document.styleS heets;
for (var i=0, len=ss.length; i<len; ++i){
s = ss[i];
if (s.title){
s.disabled = !(s.title == t);
}
}
}
/* Call checkSize() on window resize and load
*/
window.onresize = checkSize;
window.onload = checkSize;
</script>
</head>
<body>
<p>Plain paragraph - toggles big/small</p>
<p id="xx">Paragra ph xx - controlled by separate stylesheet</p>
</body>
</html>
--
Rob
Group FAQ: <URL:http://www.jibbering.c om/FAQ>
