Hi everyone! I'm a newbie and I want to create a toggle option in my webpage to turn the whole thing into negative. It has something to do about the fact that OLED screens aren't happy about the white backgrounds because it draws three times more power than conventional TFT with whites. Turning the whole page to Negative will convert that 90% white into black which put the OLED's inherent low power usage into use. BTW the negative should only affect the background and text leaving everything else untouched. How I wish somebody will make a firefox plug-in for this purpose.
thanks.
mushget 0 Junior Poster in Training
Kraai 56 Senior Poster Featured Poster
Hi
Not quite what you looking for, but firefox do have a plugin that invert web pages. If there is no answer to your problem, you may want to link the firefox plugin as an option for your site visitors.
pixielady 0 Newbie Poster
I'm no expert, but I guess you could write a different stylesheet and a button which refers the document to the second stylesheet...
Arkinder 93 Posting Pro in Training
All of this depends on your elements, and how you have styled them. This cannot be done in HTML or CSS alone. However, it can be easily done with JavaScript. I haven't used JavaScript actively in a few years; and I haven't made an effort to keep up with it, so I don't know if any of the code is deprecated or working in IE.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
<!--//
function negative () {
if (document.body.style.backgroundColor != "black" && document.getElementById("container").style.color == "" ) {
document.body.style.backgroundColor = "black";
document.getElementById("container").style.color = "white";
} else {
document.body.style.backgroundColor = "white";
document.getElementById("container").style.color = "";
}
}
//-->
</script>
</head>
<body>
<div id="container">
<a href="#" onclick="negative()">Toggle negative</a>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</body>
</html>If you would like anything in the code explained feel free to ask. As I said before, whether this works or not depends on you current CSS.
Thanks, Arkinder
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.