Add js-show CSS class for hiding elements when JavaScript is disabled

Works for me. Nice little cleanup. Thanks.

It is not clear why we needed to introduce js-show? Care to explain?

For example, the progress bar in upload or the teaser checkbox thing could be emitted with js-show class so that they are only visible if user has js enabled.

Why not do this for js-show

.js-hide { display: none; }
html.js .js-show { display: block; }

1.) Patch doesn't apply to system.js anymore, so a reroll is required.

Additional comments:

2.) The CSS spec tells browsers to ignore selectors it doesn't understand, if I remember correctly. Therefore, even if CSS3 is not widely supported, it may be not be a bad idea to add the html:not(.js) (properly documented, of course) to remove the "flicker" the comment mentions, at least for browsers that do support CSS3.

3.) <div class="js-show" style="display: inline;">...</div>

Shouldn't direct style attributes be avoided in favor of classes anyway?

here is a fast rerole.

not sure about the inline stuff/css3, but what about creating a inline class?

needs review...

Those duplicate asterisks in the comment block are pretty odd. They were already in there though, so let's leave them for another issue to fix.

I'm sceptical as ever about relying on the html.js class to do anything serious (how can you trust the server to accurately tell the client whether the client is executing Javascript at the moment? What if you switch it off or on while browsing?). But as it seems to be done throughout core, we might as well do it here too.

html.js .no-js {
  display: none;
}

/*
** For anything you want to hide on page load when JS is enabled, so
** that you can use the JS to control visibility and avoid flicker.
*/
html.js .js-hide {
  display: none;
}

doesn't exist anymore in system.css

There aren't any js elements left...

/*
** Floating header for tableheader.js
*/
table.sticky-header {
  margin-top: 0;
  background: #fff;
}

is the only js thing you can find

Ow fok srry opened wrong file (system.css), I'm so stupid!

Thnx dave... :(

Can't we do something easy as like dimitri said?

html.j .js-show {
display: block
}

Oh, I've been trying to get this one in for a while.

Adding to my ever growing things of things I'd like to eventually look at.

There we go!

Looks like system.js is not included everywhere, so this should live in drupal.js instead.

+1

The title of this issue is "Add js-show CSS class for hiding elements when JavaScript is disabled". Yet what this patch does is to allow you to :

* Use the class 'js-hide' to hide an element if JavaScript is enabled.
* Use the class 'js-show' to show an element only if JavaScript is enabled.

What about hiding an element only if JavaScript is disabled, as per the issue title? For that, wouldn't you need a no-js-hide class, something like:

html.no-js .no-js-hide {
   display: none;
 }

What about hiding an element only if JavaScript is disabled, as per the issue title?

+/**
+ * Show elements with the 'js-show' class. These elements will not be shown if
+ * JavaScript is disabled.
+ */
+Drupal.behaviors.jsShow = {
+  attach: function(context, settings) {
+    $('.js-show', context).show();
+  }
+};
...
+html.js .js-hide, .js-show {
   display: none;
 }

@mrfelton, that's your use case right there. Things with .js-show start out with display: none;, which JavaScript switches to an display: block; style on the element itself, overriding the stylesheet. No script, no unhiding.

This looks correct to me.

I'm actually tempted to move it to a bug report, because currently we're showing the line about 'You can insert the delimiter "<!--break-->" (without the quotes) to fine-tune where your post gets split' even when JS is enabled, which is incorrect and confusing.

+++ b/misc/drupal.jsundefined
@@ -383,4 +383,14 @@ Drupal.theme.prototype = {
+    $('.js-show', context).show();

Aren't we doing $(context).find('.js-show').show(); now?

indeed.

Just to play the devil's advocate: a style tag with .js-show {display:none;} wrapped in a noscript tag will work too (it's valid HTML). Not suggesting we do that, just bringing it up.

Hm. Wrapping .js-show {display:none;} in a noscript tag would be a good approach. With the existing patch you have the slight possibility of users seeing the js-only content pop into place after the rest of the page structure is there already. It also adds yet more JS to Drupal.behaviors, and goodness knows we have enough already. The noscript tag avoids both those problems.

So it sounds like a fine plan—except that I have no idea how to implement it sanely. All I can think of is adding another flag to the $options parameter in drupal_add_css(), which does not really appeal. That's such a complicated function already. Unless someone thinks that's actually a good idea, or has a better one, I'd say we stick with the existing patch.

Not that this is any more sane, but I presume drupal_add_html_head() has been looked at and specifically ignored?

I'd rather not have this stuff presented inline within the HTML of the document. We would benefit of aggregation and performance if this was in .css and .js files.

This is now being handled as part of #1848064: Allow to filter modules by arbitrary search strings on the Modules page. Since this has been inactive for quite a while, marking this as duplicate.

Here's a reroll for the js-show part, which is still sensible for D7.