gaea 0 Report post Posted May 8, 2008 (edited) I am trying to use javascript to include a stylesheet depending on the user's resolution. The HTML <head> <meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" /> <?php if ($my->id) { initEditor(); } ?> <?php mosShowHead(); ?> <noscript><link rel="stylesheet" type="text/css" href="highimpactart.org/templates/_HighImpactArt_/1024/1024.css&%2334; /></noscript> <script type="text/javascript"> if (screen.width>=1050) { document.write('<link rel="stylesheet" type="text/css" href="highimpactart.org/templates/_HighImpactArt_/1280/1280.css&%2334; />'); } </script> </head> I'm running into two problems. 1) The script doesn't seem to be writing anything. Fixed 2) The <noscript> tags cause all sorts of validation errors. From what I've read it seems as though the <noscript> tag is not allowed within the <head> section -- is this correct? Could the same thing be accomplished just putting the default stylesheet above the javascript? The 1280 stylesheet has the same exact classes as the 1024 stylesheet, so would that over ride it? 3) The Validator doesn't like the fact that I have a "link" element inside the javascript code. Any suggestions about how to fix it? Evidently xhtml doesn't play nice with javascript by default. You need to add in two extra lines. Ie: <script type="text/javascript">/*<![CDATA[*/ YourJavaScriptCodeHere/*]]>*/</script> Thank you for your time. Edited May 8, 2008 by truefusion (see edit history) Share this post Link to post Share on other sites
rvalkass 5 Report post Posted May 8, 2008 2) The <noscript> tags cause all sorts of validation errors. From what I've read it seems as though the <noscript> tag is not allowed within the <head> section -- is this correct? Could the same thing be accomplished just putting the default stylesheet above the javascript? The 1280 stylesheet has the same exact classes as the 1024 stylesheet, so would that over ride it?The noscript element can only go in the body, as either an inline or block level element. Stylesheets do cascade, meaning that a second stylesheet will overwrite the first. You could therefore always include the 1024 stylesheet, and just use JS to put in the 1280 stylesheet if necessary. 3) The Validator doesn't like the fact that I have a "link" element inside the javascript code. Any suggestions about how to fix it? Evidently xhtml doesn't play nice with javascript by default. You need to add in two extra lines. Ie: <script type="text/javascript">/*<![CDATA[*/ YourJavaScriptCodeHere /*]]>*/</script> Thank you for your time, ~Paolo You shouldn't have the /* in your code there. It should just be: <script type="text/javascript"><![CDATA[ Some JS here...]]></script> Share this post Link to post Share on other sites
minimcmonkey 0 Report post Posted November 4, 2008 One way of getting around a noscript error, is by making PHP detect whether the browser is JavaScript enabled. That way, if it is, you can output a script, if it isn't, you can output a menu, which allows the user to choose which resolutions stylesheet to use, including an option to display a sylesheet which will work for most monitors in case the user doesn't know. This also helps if the user has a firewall which stops websites from collecting computer information, as you can assume that if PHP cant find out the monitor resolution, either can javascript, and then just output the manual change menu. Share this post Link to post Share on other sites
