CODEWITHSUNDEEP
javascriptcss
John Spartan
John Spartan

Reputation: 75

Invert Webpage Colors with Toggle Button

Thanks in advance for any help!

I have a full page Google Map that I would like to add a toggle button to that applies the webkit invert CSS style to. Problem is, I have no idea how to implement this.

Instead of applying the -webkit-filter: invert(100%); to just an image, I would like to apply it to the entire page with a toggle button.

Any direction would be greatly appreciated!

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Intel Navigation</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link href="css/main.css" rel="stylesheet">
<script src="//maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
</head>
<body>
<div id="google_canvas"></div>
<script>
   (function() {

    if(!!navigator.geolocation) {

     var map;

    var mapOptions = {
     zoom: 15,
     mapTypeId: google.maps.MapTypeId.TERRAIN,
     mapTypeControl: true,
     mapTypeControlOptions: {
    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
  },
     zoomControl: true,
  zoomControlOptions: {
      style: google.maps.ZoomControlStyle.SMALL
  }
}
    };

    map = new google.maps.Map(document.getElementById('google_canvas'), mapOptions);

     navigator.geolocation.watchPosition(function(position) {

     var geolocate = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

var image = 'images/current.png';

     var marker = new google.maps.Marker({
     map: map,
     icon: image,
     position: geolocate
     });

     map.setCenter(geolocate);

     });

     layer = new google.maps.FusionTablesLayer({
     query: {
         select: '\'Lat\'',
         from: 'xxxxxx'
     }
});
     layer.setMap(map);
     }      
   )();
   </script>
</body>
</html>

Upvotes: 0

Views: 824

Answers (2)

AmOs
AmOs

Reputation: 149

how about using jquery and looping through all elements ?

$("body").each($(this).css());

Upvotes: 1

tckmn
tckmn

Reputation: 59283

You can simply set that filter on the <html> element:

document.documentElement.style.webkitFilter = 'invert(100%)';

screenshot

You may want to add more vendor prefix for portability:

var docEl = document.documentElement;
docEl.style.filter || docEl.style.webkitFilter ||
  docEl.style.mozFilter || docEl.style.msFilter ||
  docEl.style.oFilter = 'invert(100%)';

Upvotes: 1

Related Questions