Page 1 of 2 12 LastLast
Results 1 to 10 of 16

Thread: light on/off button thingy..

  1. #1
    Join Date
    Jun 2007
    Posts
    64
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Unhappy light on/off button thingy..

    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
    Last edited by kobo1d; 05-10-2010 at 12:21 PM. Reason: resolved

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    Last edited by jscheuer1; 05-03-2010 at 05:46 PM. Reason: add resize, rehighlight images
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    kobo1d (05-03-2010)

  4. #3
    Join Date
    Jun 2007
    Posts
    64
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    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

  5. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #5
    Join Date
    Jun 2007
    Posts
    64
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

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

  7. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Sure!
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #7
    Join Date
    Jun 2007
    Posts
    64
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

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

  9. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by kobo1d View Post
    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. #9
    Join Date
    Jun 2007
    Posts
    64
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    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! :-)
    Last edited by kobo1d; 05-05-2010 at 04:17 PM. Reason: my english sux

  11. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by sanduwa View Post
    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •