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.html>
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.infosystems.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 getElementsByTagName and sifting through the link elements.
That is inefficient, much better to use the stylesheets collection:
document.styleSheets[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.
[...]
checkBrowserWidth();
attachEventListener(window, "resize", checkBrowserWidth, false);
attachEventListener is a method of a DOM object, the syntax is
bSuccess = object.attachEventListener(sEvent, fpNotify)
<URL:http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/attachevent.asp>
It is also IE specific, use feature detection and addEventListener to
support other browsers. Search the archives for 'addEventListener
attachEvent'.
Anyway, it seems much simpler to use:
window.onresize = checkBrowserWidth;
But it will replace other resize handlers you might have.
function checkBrowserWidth()
{
var theWidth = getBrowserWidth();
if (theWidth == 0)
{
var resolutionCookie =
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 (resolutionCookie != null)
{
setStylesheet(unescape(resolutionCookie[0].split("=")[1]));
}
addLoadListener(checkBrowserWidth);
Where is addLoadListener defined?
[...]
function setStylesheet(styleTitle)
{
var currTag;
if (document.getElementsByTagName)
{
for (var i = 0; (currTag =
document.getElementsByTagName("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>Stylesheet 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="smallText">
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.documentElement || document.body;
var bodyX, bodyY;
if ( docEl
&& (bodyX = docEl.clientWidth)
&& (bodyY = docEl.clientHeight) ){
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.styleSheets;
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">Paragraph xx - controlled by separate stylesheet</p>
</body>
</html>
--
Rob
Group FAQ: <URL:http://www.jibbering.com/FAQ>
