Re: [WSG] Onresize Javascript function? Any standard equivalent?
Hi everyone, I want to create a function that will swap a style sheet as you resize the browser, for instance, I have two style sheets, one with settings for lower than800x600, then a style sheet for any resolution greater than800x600, but imagine if someone resized the browser from 1024x768 to 640x480 I would want the style sheet to automatically change to the 800x600 CSS when it hits 799px width for instance. Is there anyway to do this using standard code? CSS3 media queries (currently supported by Opera 7+ only). I could use onresize but this is invalid? Might be. Look for style switcher on alistapart. -- regards, Kornel Lesiski ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Onresize Javascript function? Any standard equivalent?
Quoting Joey Is there anyway to do this using standard code? I could use onresize but this is invalid? Any suggestions? Unless I'm mistaken, resize is still accepted as a DOM event. http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html No time to test, but you should be able to programmatically attach this event to your document's body. Patrick ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Onresize Javascript function? Any standard equivalent?
Hi Patrick, Thanks, but when I tried to insert onresize into the body tag it told me it was invalid. Also if only CSS3 Media Queries were compatible, that suggestion was man July 2002!!! Anyway I don't want to get off-topic, does anybody has a solution for what I am trying to achieve? I had a look at the A List Apart style switcher, but this is only if the user clicks on a link. And the JS function doesn't check the users browser width, then select the correct stylesheet. So I need the site to check the users browser width, then load the correct stylesheet, HOWEVER, if the user resizes their browser, and the browser goes below 800px wide then I want the page to automaticall swap the stylesheet. Thanks everyone, this would be really useful, because the client I am building for is saying that when they view the site I have built in their 1600x1200 resolution it looks too stretched across their screen, and looks odd. And they asked me if I can set the to stop increasing its width when it reaches 1024px wide. But the max-width CSS attribute doesn't work in IE!! So instead I have to resort to having two stylesheets, cause if I set one of the stylesheets to 1024px wide MAX, if I was to view that in 800x600, I would get a horizontal scroller. So instead I need to automatically load in the stylesheet that has all its widths optimised for 800x600 or less. Thanks again everyone. - Unless I'm mistaken, resize is still accepted as a DOM event. http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html No time to test, but you should be able to programmatically attach this event to your document's body. Patrick ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Onresize Javascript function? Any standard equivalent?
Thanks, but when I tried to insert onresize into the body tag it told me it was invalid. Sure, because inline JS is a technique of Ancient Netscapers. You should use DOM to attach events. I had a look at the A List Apart style switcher, but this is only if the user clicks on a link. It doesn't have to be. There you have nice function that changes styles. It's up to you when and how you call it. And they asked me if I can set the to stop increasing its width when it reaches 1024px wide. But the max-width CSS attribute doesn't work in IE!! It does, with a little help: http://www.doxdesk.com/software/js/minmax.html -- regards, Kornel Lesiski ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Onresize Javascript function? Any standard equivalent?
At 09:34 AM 3/3/2005, Joey wrote:
Thanks, but when I tried to insert onresize into the body tag it told me
it was invalid.
Instead of doing this:
body onresize=SwapStylesheets();
do this:
script language=Javascript src=SwapStylesheets.js/script
/head
body
and in SwapStylesheets.js, a separate file, do something like this:
window.onload = SwapStylesheets;
function SwapStylesheets()
{
if ...
}
However, I'm optimistic you'll find a CSS solution that doesn't require
javascript, or at least one doesn't impose scripting on browsers that obey
max-width. There's always those IE conditional statements that do validate:
http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp
Paul
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
RE: [WSG] Onresize Javascript function? Any standard equivalent?
You are a genius, now I can just set max-width:1024px; :D Thanks matey! Ill give it a go, and see what happens. Kornel Lesiski Wrote: It does, with a little help: http://www.doxdesk.com/software/js/minmax.html ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
