Austin Smith

Detect Javascript Using This CSS Selector

Friday, February 6, 2009 - 12:04 PM

It's a cold day in hell when I care enough about the front-end to make a post like this, but I stumbled across a couple of versions of this and thought I'd post my synthesis. Since it's triggered instantly after is added to the DOM, the remaining HTML loaded by the browser will be styled appropriately! I use it to hide things that I'm going to animate into place with jQuery. Don't ask why I have to animate elements that have already been loaded into the page... it's a sore subject.

<body>
<script type="text/javascript">
$('body').addClass('.js_enabled');
</script>
<!-- snip! -->

.js_enabled .foo { display: none; }

Comment! Keep reading >>

The other way around: no-js

Submitted by Wim Leers (not verified) on Fri, 02/06/2009 - 12:46.

The other way around is also possible: only display certain things if JS is disabled. Drupal supports this out-of-the-box, but it's not well-known or well-documented … Just set the no-js class on your HTML element and it'll work automagically :)

Wouldn't work in this case

Submitted by Austin Smith on Fri, 02/06/2009 - 12:51.

Yeah that way is certainly simpler! But in this case we needed to fit this in because of complicated CSS rules.

The opposite

Submitted by Wim Leers (not verified) on Sat, 02/07/2009 - 04:15.

Yep, what I said is pretty much "the opposite". Hence I called it "the other way around" :) I just thought I'd mention it so your readers would see that as well!

Oh, and...

Submitted by Austin Smith on Fri, 02/06/2009 - 12:52.

We've stripped out all of Drupal's CSS for this theme.

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <img> <p>
  • Lines and paragraphs break automatically.

More information about formatting options