By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,318 Members | 2,107 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,318 IT Pros & Developers. It's quick & easy.

Automatic style switching - is there a better way?

P: n/a
Hi folks,

Below is a script that I use on a site to detect the size of the browser
window then automatically load an alternative stile sheet when appropriate.

Its a bit clumsy, and I don't like using js but the the brief demanded a
solution.

Now the only difference between the two style sheets is one line:

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

Which centres the 'page' against a grey background and keeps it there
regardless of window size (with screens above 800 px that is).

The trouble is, as you can see from the css, when the browser window is less
then 800px high, the negative value pushes the top of the page out of view
which isn't very helpful - hence the automatic CSS switcher.

So here is the question(s):

1. given that this is how the client wants the site to look, is there a
better way of centring the screen with CSS?

or

2. is there a better way of **automatically** switching style sheets?
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]); i++)
{
if (currTag.getAttribute("rel").indexOf("style") != -1 &&
currTag.getAttribute("title"))
{
currTag.disabled = true;

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

return true;
};

Apr 17 '06 #1
Share this Question
Share on Google+
7 Replies


P: n/a
T J Rogers wrote:
Below is a script that I use on a site to detect the size of the browser
window then automatically load an alternative stile sheet when appropriate.

Its a bit clumsy, and I don't like using js but the the brief demanded a
solution.


Perhaps this is encapsulated within your "clumsy", but you had
considered that the size of the viewport can't be determined from the
size of the browser window, right?
--
AGw.

Apr 17 '06 #2

P: n/a

Hi,

Yes I had - it is one of a number of things I'm not comfortable with.


in article 11**********************@t31g2000cwb.googlegroups. com,
fr*******@southernskies.co.uk at fr*******@southernskies.co.uk wrote on
17/4/06 12:58:
T J Rogers wrote:
Below is a script that I use on a site to detect the size of the browser
window then automatically load an alternative stile sheet when appropriate.

Its a bit clumsy, and I don't like using js but the the brief demanded a
solution.


Perhaps this is encapsulated within your "clumsy", but you had
considered that the size of the viewport can't be determined from the
size of the browser window, right?


Apr 17 '06 #3

P: n/a
To further the education of mankind, T J Rogers
<t.********@dunelm.org.uk> vouchsafed:
So here is the question(s):

1. given that this is how the client wants the site to look, is there
a better way of centring the screen with CSS?

or

2. is there a better way of **automatically** switching style sheets?


Checkout and source-save the link at the bottom. You'll (probably) have to
delete some of the divs to see the effect, but it centers both vert. and
horz. without js.

http://www.neredbojias.com/alpha/jokes.html

--
Neredbojias
Infinity can have limits.
Apr 18 '06 #4

P: n/a
Many thanks for this! Ill have a good look over it.

Thanks,

Tim
To further the education of mankind, T J Rogers
<t.********@dunelm.org.uk> vouchsafed:
So here is the question(s):

1. given that this is how the client wants the site to look, is there
a better way of centring the screen with CSS?

or

2. is there a better way of **automatically** switching style sheets?


Checkout and source-save the link at the bottom. You'll (probably) have to
delete some of the divs to see the effect, but it centers both vert. and
horz. without js.

http://www.neredbojias.com/alpha/jokes.html


Apr 18 '06 #5

P: n/a

T J Rogers wrote:
Below is a script that I use on a site to detect the size of the browser
window then automatically load an alternative stile sheet when appropriate.


Well stop doing it then. You just don't need to do this at all. Don't
ask "how do I do this", stop doing it altogether!

Apr 21 '06 #6

P: n/a
[top-posting fixed]
T J Rogers wrote:
in article 11**********************@t31g2000cwb.googlegroups. com,
fr*******@southernskies.co.uk at fr*******@southernskies.co.uk wrote on
17/4/06 12:58:
T J Rogers wrote:
Below is a script that I use on a site to detect the size of the browser
window then automatically load an alternative stile sheet when appropriate.

Its a bit clumsy, and I don't like using js but the the brief demanded a
solution.


Perhaps this is encapsulated within your "clumsy", but you had
considered that the size of the viewport can't be determined from the
size of the browser window, right?

Yes I had - it is one of a number of things I'm not comfortable with.


Ah, right!

There may be better methods of dealing with your problem, but here's
one way of doing it:

==HTML begins==
<!DOCTYPE html public "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>title goes here</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<LINK href="main.css" type="text/css" rel="stylesheet">
<!--[if IE]>
<LINK href="main_ie.css" type="text/css" rel="stylesheet">
<![endif]-->
</HEAD>
<BODY>
<DIV class="wrapper" id="wrapper">
content goes here
</DIV>
<DIV class="dummy">
</DIV>
</BODY>
</HTML>
==HTML ends==

==CSS code for "main.css" begins==
html {
height: 100%;
}
body {
height: 100%;
margin: 0px;
padding: 45px 45px 0px 45px;
background-color: gray;
}
..wrapper {
min-height: 100%;
width: auto;
margin: 0px;
padding: 2em;
background-color: blue;
}
..dummy {
height: 45px;
}
#wrapper {
height: auto;
}
==CSS code for "main.css" ends==

==CSS code for "main_ie.css" begins==
#wrapper {
height: 100%;
}
==CSS code for "main_ie.css" ends==

The above validates* and produces the same result in both Firefox and
IE. No scripting is used, and it should work regardless of both screen
resolution and window size. If you're happy with the wrapper
background shrinking down to fit even very short content, then the code
can be simplified a little.

I'm not currently testing with either IE 7 or Opera, but it *should*
work fine in either. You may have to change "<!--[if IE]>" to "<!--[if
IE lt 7]>" to get it to work on the former. While it's not ideal to
have a second stylesheet for a given browser, you'll see that it only
over-rides the generic stylesheet where necessary, so there's no need
to maintain code in two different places.

I also tested the code in Amaya, which appears to double the wrapper
div's bottom margin for some reason; I've not as yet looked into this.

Obviously any further divs or whatever should be nested within the
wrapper div. To change the apparent margins, just substitute "45px"
wherever it occurs in the CSS with the new figure; note that although
pixels should always be safe, other units may be problematical.

Anyway, hope this helps. Let me know if there's any bugs that I
haven't caught.
* It validates using the W3C's validators for both HTML and CSS, but
I'm not sure that styling the HTML element itself is genuinely valid?

--
AGw.

Apr 21 '06 #7

P: n/a
Check this out!
Really great for learning just to do what you want!

http://www.quirksmode.org/viewport/compatibility.html

Jeroen

Apr 22 '06 #8

This discussion thread is closed

Replies have been disabled for this discussion.