Databases
StackOverflow2013
Postsdbo
POInverting and re-inverting element with CSS/JS
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POInverting and re-inverting element with CSS/JS
    text
    copied!<p>I want to invert and re-invert background image of the page (div) with a click on specific element. Now I have the script:</p> <pre><code>$(function(){ $(".invert").click(function(){ $(".pattern").css({ "-webkit-filter": "invert(100%)", "-moz-filter": "invert(100%)", "-o-filter": "invert(100%)", "-ms-filter": "invert(100%)" }); $(".invert").addClass("reinvert"); $(".invert").removeClass("invert"); }); $(".reinvert").click(function(){ $(".pattern").css({ "-webkit-filter": "invert(0%)", "-moz-filter": "invert(0%)", "-o-filter": "invert(0%)", "-ms-filter": "invert(0%)" }); $(".reinvert").addClass("invert"); $(".reinvert").removeClass("reinvert"); }); }); </code></pre> <p>The invert function works fine, but it doesn't re-invert the element back.</p> <p>I'd also like to make it work at least in Firefox and in other browsers if possible.</p> <p><strong>Update:</strong> Changed code to:</p> <pre><code>$(function(){ $(".invert").click(function(){ $(".pattern").toggleClass("inverted"); $(".invert").css("display", "none"); $(".re-invert").css("display", "inline"); }); $(".re-invert").click(function(){ $(".pattern").toggleClass("inverted"); $(".re-invert").css("display", "none"); $(".invert").css("display", "inline"); }); }); </code></pre> <p>With CSS:</p> <pre><code>.inverted { filter: invert(100%); -webkit-filter: invert(100%); -moz-filter: invert(100%); -o-filter: invert(100%); -ms-filter: invert(100%); } </code></pre> <p>Which works fine (at least the way I wanted) in Chrome, but still looking for any way to make it work the same in Firefox. Thank you guys for help, sorry I don't have enough reputation to rate answers.</p> <p>Here's the working code: <a href="http://jsfiddle.net/5AdxC/1/" rel="nofollow">http://jsfiddle.net/5AdxC/1/</a></p> <p><strong>Update 2:</strong> It seems like I found a way to make it work in Chrome and Firfox, but didn't test it with Opera or IE. <a href="http://jsfiddle.net/5AdxC/2/" rel="nofollow">http://jsfiddle.net/5AdxC/2/</a></p> <p>CSS option for Firefox:</p> <pre><code>filter: url("data:image/svg+xml;utf8,&lt;svg xmlns=\'http://www.w3.org/2000/svg\'&gt;&lt;filter id=\'invert\'&gt;&lt;feColorMatrix in='SourceGraphic' type='matrix' values='-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0'/&gt;&lt;/filter&gt;&lt;/svg&gt;#invert"); </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload