471,091 Members | 1,528 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,091 software developers and data experts.

Detecting CSS State

I did a search and basically came up with nothing for this question,
but if I missed the answer, I apologize in advance, please just point
me in the right direction.

OK, I am using a JavaScript generated menu on my site; with CSS enabled
it looks great, but when CSS is disabled it prints out all these menu
options inline and you have to scroll past them (a pain in the ass). Is
there any way to tell if the user has CSS enabled or disabled through
JavaScript? I need a solution that works on Netscape, Mozilla (and
Firefox), IE, and preferably Opera. Any suggestions?

If you want to see what I mean check out
http://www.activelock.org/demo_site with CSS disabled (if you use
Firefox with the Web Developer plug-in its really easy, just
CTRL+SHIFT+D).

..:Mike Crute:.

Jul 23 '05 #1
7 1727
Michael Crute wrote:
I did a search and basically came up with nothing for this question,
You didn't search this new group, else you would have found an almost
identical question on 3 Dec with the subject "CSS enabled", to which
Mike Winter's uncontested response was:

"I don't believe you can."
but if I missed the answer, I apologize in advance, please just point
me in the right direction.
Apology accepted... :-p

OK, I am using a JavaScript generated menu on my site; with CSS enabled
it looks great, but when CSS is disabled it prints out all these menu
options inline and you have to scroll past them (a pain in the ass). Is
there any way to tell if the user has CSS enabled or disabled through
JavaScript? I need a solution that works on Netscape, Mozilla (and
Firefox), IE, and preferably Opera. Any suggestions?
No.

If you want to see what I mean check out
http://www.activelock.org/demo_site with CSS disabled (if you use
Firefox with the Web Developer plug-in its really easy, just
CTRL+SHIFT+D).


Your menus fail completely if JavaScript is turned off, which is
probably more prevalent than browsers without CSS support. Have you
considered that issue?

--
Fred
Jul 23 '05 #2
Mike,
The following works accurately with firefox and assumes there is only one
stylesheet (styleSheets[0] = array item 1) embedded in the doc. I don't know
what it would do with inline or @import styles.

I'm sure you could create a function to accomodate those variables if there are
more style sheets.

I put this in the body tag so that onLoad, if the stylesheet is disabled (by
firefox) you will be whisked off to yahoo.com, which assumeably is what you'd
want to do with a user: redirect them to a user-friendly non-css page ??

onLoad='if(document.styleSheets[0].disabled){location.href="http://www.yah
oo.com";}'

Obviously this needs testing in other browsers with their respective css
zappers, but it does work with firefox, so that's a positive start! ;-)

Hope this helps!

Jim
Jul 23 '05 #3
On 13 Dec 2004 19:53:38 -0800, Michael Crute <mc****@gmail.com> wrote:

[snip]
OK, I am using a JavaScript generated menu on my site; with CSS enabled
it looks great, but when CSS is disabled it prints out all these menu
options inline and you have to scroll past them (a pain in the ass).
[...] Any suggestions?


Place the list at the end of the document, not the start, and position it
with CSS. Also, notice I said list: those links should be rendered with a
styled unordered list.

[snip]

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 23 '05 #4
On 15 Dec 2004 05:34:54 GMT, JimMenees <ji*******@aol.comNoSpam> wrote:

[snip]
I put this in the body tag so that onLoad, if the stylesheet is disabled
(by firefox) you will be whisked off to yahoo.com, which assumeably is
what you'd want to do with a user: redirect them to a user-friendly
non-css page ??
Considering that CSS is optional, all documents should be user-friendly,
but not particularly attractive, when CSS is disabled.
onLoad='if(document.styleSheets[0].disabled){
location.href="http://www.yahoo.com";}'


That certainly won't work with Opera as it doesn't currently implement the
styleSheets collection. Moreover, redirects should not be accomplished
with Javascript.

[snip]

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 23 '05 #5
Jim... thanks for the code it is a good start. As far as IE and other
browsers go, is there a little tool to disable CSS?

Michael... i think you have a good idea putting the list at the end.
The problem is though that if css is disabled I don't want to show the
list period. The rest of the page renders fine with CSS disabled but
the menu is just an annoying "feature" if there is no CSS.

The menu that I am using was generated with Macromedia Fireworks and
hacked to fit my needs. I may have to rewrite the entire Fireworks JS
code to make it more browser friendly, but I would rather not :)

Jul 23 '05 #6
On 16 Dec 2004 11:50:09 -0800, "Michael Crute" <mc****@gmail.com>
wrote:
Jim... thanks for the code it is a good start. As far as IE and other
browsers go, is there a little tool to disable CSS?


you don't need a tool, it's built into the browser.

Jim.
Jul 23 '05 #7
Hmm... I have never heard of such a thing, but I haven't really even
opened IE since before Firefox .08 :)

Jul 23 '05 #8

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

11 posts views Thread by Adam Parkin | last post: by
6 posts views Thread by Querejeto | last post: by
6 posts views Thread by Thomas Mlynarczyk | last post: by
7 posts views Thread by fox | last post: by
2 posts views Thread by Anthony | last post: by
6 posts views Thread by Andrea | last post: by
2 posts views Thread by ASP.Confused | last post: by
7 posts views Thread by glen | last post: by
12 posts views Thread by ABN | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.