Add a small feature in chardin.js (Hability to keep an element visible)
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Hi folks,

I'm using the excellent chardin.js ( http://heelhook.github.io/chardin.js )
I would like to add a class, i.e ".stay_visible" to any element so that it would stay visible once that the overlay has been launched.

Example: the behavior of the button "see it in action" in the demo page quoted above: it is not covered by the black overlay.

Deliverable: a css class with the aforementionned "effect". Please use jsfiddle or similar sadnbox service to show me that the class indeed works.

Thanks =)

Crowdsource coding tasks.

2 Solutions

Winning solution

.stay-visible {
    z-index: 9999999;
    opacity: 0.8;
    position: relative;
}
Perfect. Thank you very much !
silentgwad over 4 years ago

Don't know if it's what you need but the elements that are not covered by the overlay are just assigned the .chardinjs-show-element .chardinjs-relative-position classes.

They are defined in chardinjs.css like this:

.chardinjs-show-element {
  z-index: 9999999;
  opacity: 0.8; }

.chardinjs-relative-position {
  position: relative; }
in addition to the .chardinjs-relative-position class... otherwise the z-index wouldn't matter
slang over 4 years ago
I needed a ready-made class rather than an explanation buddy :/ However, I would probably have accepted this solution if you posted earlier
silentgwad over 4 years ago
View Timeline