Foundation-sites: Feature request "hide-if-no-js" and "show-if-no-js" visibility classes.

[christianmagill]

Since Foundation will remove a "no-js" class if set on the html tag, a visibility classes for hiding and showing elements based on JavaScript availability could be easily added.

This would be useful for flashes of unstyled content before Javascript is initialized.

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

html:not(.no-js) .show-if-no-js{
   display: none !important;
}

[IamManchanda]

I have to say i like it what you want, but that 2nd css, display: block !important; i guess!

[IamManchanda]

Here's what i feel the write way to go with it about

.html {
  &.no-js {
    .hide-js-element {
      display: none !important;
    }
  }
  &:not(.no-js) {
    .show-js-element {
      display: block !important;
    }
  }
}

Spl note: I purposely changed those classes name => .hide-js-element , .show-js-element

[christianmagill]

Your suggestion for the "show-js-element" class would never hide it in the first place.

Additionally it presupposes that the element to be display "block"

[IamManchanda]

i am getting confused ..... @christianmagill !
Can you elobrate what you are looking for!

Applogies if i am mistaken on understanding you!

[dragthor]

I guess this feature is trying mimic Modernizr?

[christianmagill]

@IamManchanda,

I'm just looking for two classes that set the visibility based on whether JavaScript has been loaded or not.

Like other visibility classes in Foundation the hide class would hide the element when the condition is met, and the show class would hide the element until the condition was met.

@dragthor Modernizr will also remove "no-js" class, but is more used to identify browser feature availability. I'm mainly concerned about using these classes to stop flashes of unstyled content while components such as dropdown menus are loading.

Thanks

[DaSchTour]

@christianmagill I've seen this approach very often in the last month but always with very dangerous implications. I would assume, that nobody creates pages that work without JS anymore.

The approach of hiding not bootstrapped elements often leads to very ugly re-layouting if not done for the whole page which leads to a blank page until all scripts are loaded which may make the user feel like the page is broken if there is any long running script.

So I would extremely encourage to handle such bootstrapping issues on component level and not globally to minimize interferences between different scripts.

[christianmagill]

@DaSchTour Since they are classes that can be applied selectively, I see them as a tool that can be used, rather than a prescription for how to handle elements that are not yet bootstrapped.

To your point though, I find myself most often using the classes to hide submenu dropdowns before initialization.

[kball]

I don't see us using this broadly, but am open to this as a set of utilities. @christianmagill do you want to submit a PR?

[Moonbase59]

@christianmagill I agree that it might be a nice feature to have—for a very few cases, like @kball said. I also agree with @DaSchTour regarding its overuse.

Eventually, I’d vote for having it, just in case. :+1: