Email conversation
| From | Josef H. Altenbuchner |
|---|
| To | Me |
|---|
| Subject | confused about Window Size |
|---|
| Date | 22 April 2007 18:31 |
|---|
Hello Tarquin !
I did stumble into a javascript on your site, that I think could be useful
for my purpose.
It is on your site found under
http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
What I would like to do is to link different CSS-sheets, dependent on
Window-width in the browser.
Before I found your script, I was using a similar script but found out it
would not really work in Internet Explorer (in Windows environment).
It did work in Safari, Firefox etc on Macintosh. And also on Firefox on
PC/Windows.
So I thought your more detailed script would solve the Internet Explorer
issue. But it did not.
I did read on your site that the problem could be that I am running the
script diretly from within the HEAD-tag.
What does confuse me is that fact that it works with a few browsers ,
despite the fact that the script is run directly from within the HEAD-tag.
But not in Internet Explorer.
On the other hand I don't think I could move the script to be run from the
BODY-section of my page, since I want to link the style sheets and from what
I understand this has to be done from the HEAD-tag. As I said this linking
of stylesheets with
document.write('<link rel=\"StyleSheet\" '+
'href=\"txxxxxxxxxxxx/style/style.css\" '+
'type=\"text/css\">')
works fine, so I would like to have it work that way ... even in Internet
Explorer.
I am not expecting you to provide any detailed code or something, just
letting me know if this linking of style-sheets depending on Window with,
determined by that script can be done even in Internet Explorer.
Thanks for any help in advance, best regards
Josef Altenbuchner
| From | Me |
|---|
| To | Josef H. Altenbuchner |
|---|
| Subject | Re: confused about Window Size |
|---|
| Date | 22 April 2007 18:55 |
|---|
Josef,
> What I would like to do is to link different CSS-sheets, dependent on
> Window-width in the browser.
CSS 3 actually has a proper way to do this, called CSS Media Queries:
@media all and (max-width: 500px) {
p { color: blue; }
}
These are supported by Opera, and nightly builds of WebKit (the engine used
by Safari, but not yet in any public Safari releases).
> So I thought your more detailed script would solve the Internet Explorer
> issue. But it did not.
There are two reasons for this:
1. If your script runs before the body tag - such as if you run inside the
HEAD - and it uses quirks mode, it will fail in IE, since the properties are
attached to the body in quirks mode.
2. IE cannot measure the size until the page has completed loading. Until
then, IE usually says it is 0.
> On the other hand I don't think I could move the script to be run from the
> BODY-section of my page, since I want to link the style sheets and from
> what I understand this has to be done from the HEAD-tag.
According to the HTML spec, yes, CSS should only be put in the HEAD.
> document.write('<link rel=\"StyleSheet\" '+
> 'href=\"txxxxxxxxxxxx/style/style.css\" '+
> 'type=\"text/css\">')
Use DOM methods to add the stylesheets after the page has loaded, instead of
using document.write. This will give a flicker as it displays it without the
special stylesheet, but there's not much you can do about that.
<script type="text/javascript">
window.onload = function () {
if( !document.createElement ) { return; }
var stylesheetToAdd;
var winwidth = getTheWidthUsingTheFunctionIWrote();
if( winwidth < 900 ) {
stylesheetToAdd = 'smallerversion.css';
} else {
stylesheetToAdd = 'largerversion.css';
}
var newSheet = document.createElement('link');
newSheet.setAttribute('rel','stylesheet');
newSheet.setAttribute('type','text\/css');
newSheet.setAttribute('src',stylesheetToAdd);
document.getElementsByTagName('head')[0].appendChild(newSheet);
};
</script>
It is sometimes possible to put this script at the end of the body, and
force the browser to layout the page early (instead of waiting for complete
load) by checking for the offsetWidth of something, such as:
var foo = document.body.offsetWidth;
But this is not always reliable.
Note that this whole thing will not work in older browsers (including IE on
Mac), and browsers with JavaScript disabled or unsupported, so make sure the
page has a good default stylesheet, or does not need a stylesheet in order
to function.
Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/
| From | Josef H. Altenbuchner |
|---|
| To | Me |
|---|
| Subject | Re: confused about Window Size |
|---|
| Date | 23 April 2007 11:02 |
|---|
Hi Mark !
Thanks for all your feedback!
From what I understand from your feedback the only choice at the moment for
me to load a certain CCS-sheet would be to use the DOM method.
I don't have any grip on DOM methods, but as long as I just could use the
code you provided, fine ...
I assume you mean that I should combine the code you provided ....
> [the code from above]
with the code we originally were talking about? Is this a prooven method or
an idea you have that you think i should test?
Thank you again
Josef
| From | Me |
|---|
| To | Josef H. Altenbuchner |
|---|
| Subject | Re: confused about Window Size |
|---|
| Date | 23 April 2007 12:55 |
|---|
| Attachment | demo page |
|---|
Josef,
> Is this a prooven method or an idea you have that you think i should test?
I use it in a couple of places on my own site, if that answers your question
:)
Attached an example that works. Note that I made a mistake in the last one,
since the correct attribute name for the link tag was href, not src.
> I don't have any grip on DOM methods
All the ones I used are discussed in my tutorial:
http://www.howtocreate.co.uk/tutorials/javascript/domintroduction
and in particular, this chapter:
http://www.howtocreate.co.uk/tutorials/javascript/dombasics
| From | Josef H. Altenbuchner |
|---|
| To | Me |
|---|
| Subject | Re: confused about Window Size |
|---|
| Date | 23 April 2007 14:09 |
|---|
>> Is this a prooven method or an idea you have that you think i should test?
> I use it in a couple of places on my own site, if that answers your question
> :)
I guess i have to fiddle around with this for a while to get a grip on it.
just where to insert the DOM-method-script?
far at the end within the BODY-tags?
| From | Me |
|---|
| To | Josef H. Altenbuchner |
|---|
| Subject | Re: confused about Window Size |
|---|
| Date | 23 April 2007 14:47 |
|---|
Josef,
> just where to insert the DOM-method-script?
Absolutely anywhere. It runs onload anyway, so it doesn't matter. Probably
best to keep it in the HEAD, so it doesn't clutter the page. The script then
inserts the stylesheet into the right place. See the example I attached to
the last email.
| From | Josef H. Altenbuchner |
|---|
| To | Me |
|---|
| Subject | Re: confused about Window Size |
|---|
| Date | 24 April 2007 09:39 |
|---|
Mark !
I get this script to work ... but until now only in the Safari browser.
But not in Internet Explorer (on PC) or in Firefox (neither PC, nor Mac)
Trying to find out where problems could be, i removed the IF; ELSE IF, ELSE
IF and just set the variable width to a certain value.
In Safari the page does succcessfully link to the stylesheet according to
how i set the value of this variable. And also when I have the IF, ELSE IF
part to figure out the value of the variable
I then thought another JavaScript i was running on the site could cause a
conflict in Explorer and/or Firefox.
I removed that suspected other javascript but nothing really changed ....
And now ... I am clueless again !
If you might want to have a look ....
[URL]
if everything works fine, the browser will display the site with either 3
- red (smallest)
- orange (middle)
- green (large)
lines from left to right (just a visual marke to quickly check which CSS is
linked)
On my side, none of these lines (that I am using as a marker) show up in
Explorer or Firefox, only in Safari
| From | Me |
|---|
| To | Josef H. Altenbuchner |
|---|
| Subject | Re: confused about Window Size |
|---|
| Date | 24 April 2007 16:06 |
|---|
Josef,
> I get this script to work ... but until now only in the Safari browser.
> But not in Internet Explorer (on PC) or in Firefox (neither PC, nor Mac)
And in Opera? My contact page does ask you to test in Opera too.
Anyway,
newSheet.setAttribute('rel','\"stylesheet\"');
newSheet.setAttribute('type','\"text\/css\"');
Not sure why you added in all those quotes. They were not in the version
that I sent you. Please remove them. Remember that you are defining the
value of the attribute, not the markup. What you have done is equivalent to
this in HTML:
<link rel=""stylesheet"" type=""text/css""
src="whatever">
| From | Josef H. Altenbuchner |
|---|
| To | Me |
|---|
| Subject | Re: confused about Window Size |
|---|
| Date | 24 April 2007 18:45 |
|---|
Mark !
I owe you big time! Your help has been of immense value for me!
I have not had the time yet to test things in Opera. But a quick look at the
problem in both Safari, Firefox and Explorer gave me the impression that
everything works now.
Only thing I did was remove the "quotes" (\"blablabla\") that I thought
would be needed if the JavaScript was processed through php-scripts. After
removing the quotes everything seems to work like a charm at first glance.
Why I added the quotes, .... ? Well, stupid muscle-head Josef thought php
would demand them ....
Once again .... I owe you big time .... and don't know how to show my
gratitude !
Best regards, Josef