Lights off effect and jquery placement on wordpress
- by Alexander Santiago
I'm trying to implement a lights on/off on single posts of my wordpress theme.
I know that I have to put this code on my css, which I did already:
#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;
}
Now this is the code that I'm having trouble with:
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);
});
});
I think it's a jquery. Where do I place it and how do I call it's function?
Been stuck on this thing for 6 hours now and any help would be greatly appreciated...
