While working on a website recently, I was looking for solutions to “turn off the lights” while watching videos. I found two decent solutions. One was based on a jQuery script while the others were a set of browser plugins.
I needed something which didn’t rely on any javascript libraries, worked within the website and was light!
To use this solution simply add the following code to the <head> section of the page and then use the onclick=”lightSwitch();” event on any supported HTML tag and add an empty div with id=”shadow” anywhere on the page!
<style>
div#shadow {
background:#000;
filter: alpha(opacity=70); /* internet explorer */
-khtml-opacity: 0.7; /* khtml, old safari */
-moz-opacity: 0.7; /* mozilla, netscape */
opacity: 0.7; /* fx, safari, opera */
z-index:9998;
width:100%;
position:fixed;
top:0;
left:0;
height:0px;}
span.light-switch{cursor:pointer; z-index:9999;}
</style>
<script type="text/javascript">
function getDocHeight() {
var D = document;
return Math.max(
Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
Math.max(D.body.clientHeight, D.documentElement.clientHeight)
) + "px";
}
function lightSwitch() {
if (document.getElementById('shadow').offsetHeight == 0){
document.getElementById("shadow").style.height = getDocHeight(); }
else { var h = 0 + "px";
document.getElementById("shadow").style.height = h; }}
</script>
