Is there a small change that will make this work differently?

[Tim Rogers]

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
then load an alternative style sheet HOWEVER, is it possible to make a
change to the code that will not only make it respond to windows with widths
of less than 800 pixels but ALSO heights of less than 600 pixels.

I'm a complete novice when it comes to .js so and help would be greatly
appreciated.


Many thanks!

Tim


checkBrowserWidth();

attachEventListener(window, "resize", checkBrowserWidth, false);




function checkBrowserWidth()
{
var theWidth = getBrowserWidth();

if (theWidth == 0)
{
var resolutionCookie =
document.cookie.match(/(^|res_layout[^;]*(;|$)/);

if (resolutionCookie != null)
{
setStylesheet(unescape(resolutionCookie[0].split("=")[1]));
}

addLoadListener(checkBrowserWidth);

return false;
}

if (theWidth > 800)

{
setStylesheet("hires");
document.cookie = "res_layout=" + escape("hires");
}
else
{
setStylesheet("");
document.cookie = "res_layout=";
}

return true;
};




function getBrowserWidth()
{
if (window.innerWidth)
{
return window.innerWidth;
}
else if (document.documentElement &&
document.documentElement.clientWidth != 0)
{
return document.documentElement.clientWidth;
}
else if (document.body)
{
return document.body.clientWidth;
}

return 0;
};




function setStylesheet(styleTitle)
{
var currTag;

if (document.getElementsByTagName)
{
for (var i = 0; (currTag =
document.getElementsByTagName("link")); i++)
{
if (currTag.getAttribute("rel").indexOf("style") != -1 &&
currTag.getAttribute("title"))
{
currTag.disabled = true;

if(currTag.getAttribute("title") == styleTitle)
{
currTag.disabled = false;
}
}
}
}

return true;
};

 

[Thomas 'PointedEars' Lahn]

this is a resolution-detect script [...]

No, it is not. The fact that there is no such thing aside,
it would not serve anything good if there was one.



PointedEars

 

[RobG]

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/co...?q=change+style+sheet&rnum=2#d311631f5012ebf0
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.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++)

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;
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>

 

[Tim Rogers]

What a helpful comment! Thank you for taking the time to point out that I
called it the wrong name.

But it DOES do as described.

this is a resolution-detect script [...]

No, it is not. The fact that there is no such thing aside,
it would not serve anything good if there was one.



PointedEars

 

[Tim Rogers]

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.

[...]

Thanks this is very helpful! I do use media types where necessary but the
reason I'm using style switching is to turn off a 'single' formatting
element: one that uses negative widths to centre a page on screen:

div.content {margin-top:-340px;margin-left:-400px;position: absolute;top:
50%;left: 50%;width: 800px;height: 680px;visibility:
visible;;background-color:white}

This works well unless the user has a low screen resolution, or a small
browser window because the negative value then pushes the page off the
screen.

Now I don't agree with the way the page has been designed, I have tried to
explain the limitations to the client but I'm not about to call and tell him
to use another web designer - I just need to find the best solution.

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.

[...]


Again thanks - Ill spend a couple of hours trying to figure this out and how
to apply it to what I'm doing.

Thanks for your time.

Tim

 

[Thomas 'PointedEars' Lahn]

What a helpful comment! Thank you for taking the time to point out that I
called it the wrong name.

As you probably have recognized by now, it is not just that.

But it DOES do as described.

No, it does not.

[Top post]

<URL:http://jibbering.com/faq/faq_notes/pots1.html>


PointedEars

 

[RobG]

Tim Rogers said on 12/04/2006 8:01 PM AEST:

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.

[...]

Thanks this is very helpful! I do use media types where necessary but the
reason I'm using style switching is to turn off a 'single' formatting
element: one that uses negative widths to centre a page on screen:

div.content {margin-top:-340px;margin-left:-400px;position: absolute;top:
50%;left: 50%;width: 800px;height: 680px;visibility:
visible;;background-color:white}

In that case you can directly modify the style rule rather than mess
with entire style sheets. There may be other solutions, this is really
a CSS issue so ask in news:comp.infosystems.www.authoring.stylesheets.

In regard to modifying style rules via script, this post may help:

<URL:
http://groups.google.co.uk/group/co...0?q=modify+style+rule&rnum=5#32a4d950ffae0440
I'm sure there are a few others around with similar (likely better)
code. The idea is to look in the style sheet for a specific rule then
modify it. But what will you do for non-scripted browsers? They are
likely the ones that will be most affected by small screens (e.g.
phones, PDAs) and have least DOM support.

It has been an issue here before where a particular device's browser
claimed to be JavaScript 1.5 compliant and was missing many DOM
interfaces. The statement regarding compliance may have been
technically correct but because the difference between DOM and script is
not always understood (even by those who claim to be programmers) it was
seen as misleading.

This works well unless the user has a low screen resolution, or a small
browser window because the negative value then pushes the page off the
screen.

Now I don't agree with the way the page has been designed, I have tried to
explain the limitations to the client but I'm not about to call and tell him
to use another web designer - I just need to find the best solution.

As above, if you have access to the CSS you may be able to fix it there.

 

[Tim Rogers]

<URL:

http://groups.google.co.uk/group/comp.lang.javascript/browse_frm/thread/10710c
afee18926d/32a4d950ffae0440?q=modify+style+rule&rnum=5#32a4d950ffae0440

Thanks for the link - the hard part about researching a subject you are not
familiar with is understanding the language and therefore how to pose the
question.

I'm sure there are a few others around with similar (likely better)
code. The idea is to look in the style sheet for a specific rule then
modify it. But what will you do for non-scripted browsers? They are
likely the ones that will be most affected by small screens (e.g.
phones, PDAs) and have least DOM support.

This was my point to the guy - he insists that as his clients are media
departments and advertising agencies its not going to be a problem as they
will all be sitting in front of 20' monitors. What can you do?!

It has been an issue here before where a particular device's browser
claimed to be JavaScript 1.5 compliant and was missing many DOM
interfaces. The statement regarding compliance may have been
technically correct but because the difference between DOM and script is
not always understood (even by those who claim to be programmers) it was
seen as misleading.



As above, if you have access to the CSS you may be able to fix it there.

Thanks again for the advice - I appreciate your time.