PDA

View Full Version : Resolved 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 :o

jscheuer1
05-03-2010, 12:26 PM
Good for IE 7+, virtually all other modern browsers:


<!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:


zIndex: 11

and:


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 :D

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
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:


<!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! :-)

jscheuer1
05-06-2010, 12:14 AM
wow Mr.John that's nice.....
I would like to go further. Can it be happen like this . . .


Please start a new thread for a new question.

But don't worry, I'm already looking into this.

jscheuer1
05-06-2010, 12:25 AM
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...

I'm pretty sure it's z-index. And it sounds as though that is being affected by other styles that apply when you put the off/on button in one of your divisions. It could be something else, or z-index in combination with other things. The order of the scripts shouldn't matter unless you are using more than one jQuery version and/or have the main jQuery script associated with the page more than once. If one of your other scripts does something to all images, or something that affects all divisions, things like that - there could be issues there. Basically if your other styles and/or scripts select any of the elements used in the off/on script, problems could arise from that.

Like I said before, to be sure I'd need to see the page. The way you are describing it though, it sounds like a nightmare. In most cases that just means it might take me a little longer to spot the problem(s).

kobo1d
05-10-2010, 12:19 PM
hey john!

just letting you know that i found the problem last week..
like u saied it was z-index....

i had the img inside a warp-div which had 'z-index:1;' inside my css...
i just commented it out and now it works :)

and its not even a problem because the warp-div was on layer 1 and
if i just let it out its automatically behind every other stuff i gave z-index to...


thanx for the kind support and a sunny week i wish to ya ;-)

alvesricardo
04-20-2011, 11:41 AM
Hello everyone!

sry for pushing this topic up with almost a year... but i have a small doubt...

i implemented this code to turn on/off lights into my game site, however to some games it does not work, and i don't know why... i was wondering if you could take a look at least these 2 examples, one that works and other that doesn't.

ok- http://www.wakenplay.com/bubbles/
not ok - http://www.wakenplay.com/hasee-bounce/

there are others that do not work... i tried to find some reason for that, but i found nothing..

best regards and tks in advance!
Ricardo

traq
04-20-2011, 03:26 PM
both examples worked when I tried them. Are your troubles specific to a browser (e.g., I.E.) or another script (it might be a naming conflict)?

alvesricardo
04-21-2011, 01:55 PM
that is strange... i just tried with ie mozila and chormme... in non of them the second example works... :S

traq
04-21-2011, 02:07 PM
I don't know. I haven't tried on IE, but chrome 10, Fx 3.6, and Opera 11. I run Linux (Ubuntu/Lucid).

Google ads are throwing some errors, though, such as "Error: Permission denied for <http://googleads.g.doubleclick.net> to call method Location.toString" ...that might affect things on an intermittent basis (or lead to browser- or OS-specific problems).