Jump to content

Alternative To <noscript> Using Xhtml Strict 1.1?


GerryH
 Share

Recommended Posts

Sorry to be asking silly questions, but I think I'm going to have a brain tumor if I keep Googling this. :Wink; Simply what I'm trying to do is load a style sheet if the brower has javascript disabled.

<head>	   ...   <link href="normal.css" rel="stylesheet" type="text/css" />   <noscript><link href="nojavascript.css" rel="stylesheet" type="text/css" /></noscript> </head>

Now this works fine with IE, FF, Opera, Safari, and Chrome, however it fails the validation with the error that the <noscript> tag is not allowed in the <head>. Is there another method to accomplish this? FWIW setting the classes with javascript setAttribute("class", "nojavascript"), and setAttribute("className, "nojavascript"), works for the most part, except when a class has been overridden. For example if the "normal.css" contained the class;

.p1:link {background: transparent url('buttons.png')  0px 0px no-repeat;}.p1:visited {background: transparent url('buttons.png')  0px 0px no-repeat;}.p1:focus {background: transparent url('buttons.png')  0px -32px no-repeat;}.p1:hover {background: transparent url('buttons.png')  0px -32px no-repeat;}.p1:active {background: transparent url('buttons.png')  0px -32px no-repeat;}

Now without any other class declarations, then the setAttribue() works perfect. However if I override this class with my "nojavascript.css" and redefine my "p1" class,

.p1:link {background: transparent url('buttons.png')  -0px -64px no-repeat;}.p1:visited {background: transparent url('buttons.png')  0px -64px no-repeat;}.p1:focus {background: transparent url('buttons.png')  0px -64px no-repeat;}.p1:hover {background: transparent url('buttons.png')  0px -64px no-repeat;}.p1:active {background: transparent url('buttons.png')  0px -64px no-repeat;}

Then the setAttribue() fails and the state of the background remains as the "nojavascript.css" declaration.I know this is a combo-problem with js and css, however I posted in this forum hoping there's anwser in the markup.Thanks!

Edited by Gerry H
Link to comment
Share on other sites

use javascript to disable the nojavascript.css, if javascript is disabled, it will become active.<script type="text/javascript">/*<![CDATA[*//*---->*/ var lnktag = document.getElementsByTagName("link"); lnktagtotal = lnktag.length; for(i=0;i<lnktagtotal;i++) { str=lnktag.href; if(str.indexOf("nojavascript.css")!=-1) { lnktag.disabled=true; } }/*--*//*]]>*/</script>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...