Comments on: JQuery powered lights off effect

By: Courtney

Courtney — Mon, 12 Jul 2010 23:54:05 +0000

Hey great ideas you’ve put into this. I modified your work a bit. The blank div was covering all my content because it had a higher z index so none of the links on the page worked. I tweaked it to fix that little bug and also to use jquery’s functions instead of raw javascript functions here’s the moded css and js, the div’s are all the same.

#the_lights{
background-color:#000;
height:1px;
width:1px;
position:absolute;
top:0;
left:0;
display:none;
}
#standout{
padding:5px;
background-color:white;
position:relative;
z-index:1000;
}

function getHeight()
{
if($.browser.msie)
{
var $temp = $(“”)
.css(“position”,”absolute”)
.css(“left”,”-10000px”)
.append($(“body”).html());

$(“body”).append($temp);
var h = $temp.height();
$temp.remove();
return h;
}
return $(“body”).height();
}

$(document).ready(function(){
$(“#the_lights”).fadeTo(1,0);
$(“#turnoff”).click(function () {
$(“#the_lights”).css(“width”,”100%”);
$(“#the_lights”).css(“height”,getHeight()+”px”);
$(“#the_lights”).css({‘display’ : ‘block’});
$(“#the_lights”).fadeTo(“slow”,1);
});
$(“#soft”).click(function () {
$(“#the_lights”).css(“width”,”100%”);
$(“#the_lights”).css(“height”,getHeight()+”px”);
$(“#the_lights”).css(“display”,”block”);
$(“#the_lights”).fadeTo(“slow”,0.8);
});
$(“#turnon”).click(function () {
$(“#the_lights”).css(“width”,”1px”);
$(“#the_lights”).css(“height”,”1px”);
$(“#the_lights”).css(“display”,”block”);
$(“#the_lights”).fadeTo(“slow”,0);
});
});

thanks for your work BTW

By: Jose Daniel

Jose Daniel — Wed, 23 Jun 2010 03:08:33 +0000

i would change a little bit the code to be able to select text again:

document.getElementById(“the_lights”).style.display=”block”;
$(“#the_lights”).fadeTo(“slow”,0, function() {
document.getElementById(“the_lights”).style.display=”none”;
});

By: Tony

Tony — Tue, 08 Dec 2009 08:43:40 +0000

it there any way to auto turn off the light want the page loaded? thank you.

By: Bishwajit Maitra

Bishwajit Maitra — Mon, 07 Dec 2009 13:22:07 +0000

It’s good for “MOZILLA” but it does not work in “IE, Opera, Google Chrome”

By: George

George — Mon, 23 Nov 2009 21:55:50 +0000

Great Mod… only question whem this is posted what is the link to activate it…

Which link will show on the actual webpage?

By: Alex

Alex — Tue, 03 Nov 2009 15:09:59 +0000

Great tutorial, Emanuele! This worked really well for me. Thanks.

By: Jack

Jack — Thu, 22 Oct 2009 13:31:57 +0000

@jake you can get jQuery here http://jquery.com/ !
Great tutorial dude ! I love jQuery it makes javascript and ajax stuff really fun and easy.

By: jake

jake — Sun, 18 Oct 2009 19:51:36 +0000

And the path to jquery-1.3.2.min.js… is?

By: Yarden Refaeli

Yarden Refaeli — Tue, 13 Oct 2009 06:55:32 +0000

Why do you use primitive “document.getElementById” when you can use the powerful jQuery selector?
$(“#id”);

Thank you!