light on/off button thingy..

**kobo1d** · 05-03-2010, 09:45 AM

hi there!

i was looking for a javascript that will simulate a light on/off feature..
since i have jquery installed i found a couple of scripts but none of them do 100% what i need...
so i ask you guys if you might know a script which fits my needs!

so i have a html page and inside some div container i have a light-off button.
if u click it, the page should dim out every content BUT NOT the button itself..
instead the button should change to another picture and if you click the button again, lights will go back on and the image swaps back to the first one...

does any of you can point me to a script which can do that PLEASE...

would really appriciate any help

**jscheuer1** · 05-03-2010, 12:26 PM

Good for IE 7+, virtually all other modern browsers:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
(function(){
	var im2 = new Image();
	im2.src = 'lights_on.gif';
	jQuery(function($){
		var w = $(window), dimmer = $('<div style="position:fixed;z-index:-1;top:0;left:0;display:none;background-color:#000;"><\/div'),
		im1 = $('#onoff').toggle(lightsOut, lightsOn).css({zIndex: 11, position: 'relative', cursor: 'pointer'}).attr('src');
		function dresize(){dimmer.css({height: w.height(), width: w.width()});}
		function lightsOut(){this.title = this.alt = 'Lights On'; this.src = im2.src; dimmer.stop().css({zIndex: 10}).animate({opacity: 0.65, duration: 'slow'});}
		function lightsOn(){this.title = this.alt = 'Lights Off'; this.src = im1; dimmer.stop().css({zIndex: -1}).animate({opacity: 0, duration: 'slow'});}
		dresize();
		$('body').append(dimmer.css({opacity: 0, display: 'block'}));
		w.resize(dresize);
	});
})();
</script>
</head>
<body>
<img id="onoff" src="lights_off.gif" alt="Lights Off" title="Lights Off"><br>
<a href="http://www.google.com">Google</a>
</body>
</html>

All you need are the two images (highlighted in the above). The link is just there for a test to see if links still work when lights are on, they do. With lights off, they will not.

**kobo1d** · 05-03-2010, 04:10 PM

hey man,

thanks alot for ya input!!
i just tried your script as u posted above and it worked pretty sweet, just like what i searched for..

but then i impleted it to my existing code and it stopped working... no error, but also no effect :-(

what could be the problem, would you say?
i have alot of divs and im using alot of position-tags and i also already have couple of z-index'es in action...

do you maybe have an idea what could break it down ?!

thanks again

**jscheuer1** · 05-03-2010, 06:01 PM

I'd guess the z-indexes. Mine were pretty low, try changing:

Code:

zIndex: 11

and:

Code:

zIndex: 10

to higher values. The one that's currently 10 should be higher than the highest one ever used by anything else on the page, including any that get boosted via javascript, if there are any like that. The one that's currently 11 should be higher than the one that was 10, whatever that one ends up being, by at least one.

Of the four mentions of z-index/zIndex in my code, those are the only two that could possibly be an issue. The other two, each set to -1 are required to get the 'dimmer' division out of the way when it's not seen, so that links and other mouse activated things on the page can still function when the lights are on.

Positioning could be a problem, but should (I think) only be so if your markup is non-standard. You can validate your markup at:

http://validator.w3.org/

If you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

**kobo1d** · 05-03-2010, 07:39 PM

hmm.. well first i checked the markup which seems to be working fine...
then i tried higher z-index'es that didnt work either...

for some reasons i think it still has todo with the position thing...

the site im working on is hidden behind htaccess..
i would really appriciate a helping hand and if you could check my code... but then i also need to send some login details to your PM!

is this cool for you? let me know!!

thanks again :-)

**jscheuer1** · 05-03-2010, 09:18 PM

Sure!

**kobo1d** · 05-05-2010, 10:55 AM

hey again..

sry for replieng so late, i had night-shift's upcoming and today i have some spare time

but i allready found out what is the problem..
if there are multiple images in a div, the lighton/lightoff button has to be the very first image! if there is only one img before, it doesnt work anymore..

i dont know if that is logical or if it makes sense to you.. its just like that

and that is a big problem for me, since the first image cant be the light-button.. :-(

can you please try it out at your computer what happens if you put everything in a DIV and then add another image before the light-button...
do u have the same result as me ?!

still messing with the htaccess to add an account for you, ill send it to ya pm if i managed it!

big thanks again to you !!

**jscheuer1** · 05-05-2010, 03:48 PM

Originally Posted by kobo1d

can you please try it out at your computer what happens if you put everything in a DIV and then add another image before the light-button...

Still works fine here. What do you mean by "put everything" I did this:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
(function(){
	var im2 = new Image();
	im2.src = 'lights_on.gif';
	jQuery(function($){
		var w = $(window), dimmer = $('<div style="position:fixed;z-index:-1;top:0;left:0;display:none;background-color:#000;"><\/div'),
		im1 = $('#onoff').toggle(lightsOut, lightsOn).css({zIndex: 11, position: 'relative', cursor: 'pointer', backgroundColor: '#fff'}).attr('src');
		function dresize(){dimmer.css({height: w.height(), width: w.width()});}
		function lightsOut(){this.title = this.alt = 'Lights On'; this.src = im2.src; dimmer.stop().css({zIndex: 10}).animate({opacity: 0.65, duration: 'slow'});}
		function lightsOn(){this.title = this.alt = 'Lights Off'; this.src = im1; dimmer.stop().css({zIndex: -1}).animate({opacity: 0, duration: 'slow'});}
		dresize();
		$('body').append(dimmer.css({opacity: 0, display: 'block'}));
		w.resize(dresize);
	});
})();
</script>
</head>
<body>
<div>
<img src="some.gif" alt="Some" title="Some"><br>
<img id="onoff" src="lights_off.gif" alt="Lights Off" title="Lights Off"><br>
<a href="http://www.google.com">Google</a>
</div>
</body>
</html>

and it still worked the same.

Most likely your other image is somehow covering the lights out image or forcing it into a spot where it gets covered by something else, or is no longer on top in some other way. One element can cover another without appearing to do so, also unseen elements can cover other elements. Something like that is probably happening. But it really could be any number of things.

**kobo1d** · 05-05-2010, 04:04 PM

hmm you're right.. if i try your "new" code it also works for me...
it seems to be another reason then.. or maybe a combination of a few things...

if i put the lightoff-image outside of my div tags (which has id and class properties set) it works.. back inside the div it stops working...

but i have found out another big thing..

if i put the javascript part of your code at the very top (before every other script) it works partially.. if its not on top it works not even a bit... i also run 3 other jquery plugins and it seems that your code needs to be the first... if i do that i can place the image also inside my divs and like i saied it partially works...

what i mean with partially is that the light goes out and the image swaps, but it stays in the background layer... (with the rest of the content)
and does not move in front so i cant turn on the lights again...

strange stuff going on....

anyways, bigup to you and the time you spent into this! :-)