What I am trying to achieve is once I click on a permalink, in my case "Info", a lightbox appears and I want the sticky header to have an opacity of 0 as it overlaps my lightbox. I have the following code:
setInterval(function() {
if (document.getElementsByClassName("lightbox-content").length) {
document.getElementById("sticky-header").style.opacity = 0;
document.getElementById("sticky-header").style.display = "none";
}
else {
document.getElementById("sticky-header").style.opacity = 1;
document.getElementById("sticky-header").style.display = "block";
}
}, 100);
This works perfectly fine, however, I recall that this code is perhaps inefficient as it repeats itself every 0.1 seconds (100 milliseconds) checking if the class exists, and if it does it gives the sticky header an opacity of 0 and display of "none". This the html output for my permalink:
<span class="lightbox"><a href="" class="" title="Info" target="_self">Info</a></span>
Once I click on it, the lightbox appears and my script can identify the class "lighbox-content". If I click outside the lighbox, or press Esc (probably "e.keyCode === 27") or click on the "Close" button (X) at the top right corner the lightbox logically disappears and the content gets hidden with the class "lightbox-content hide". It is stored inside this div:
<div class="lightbox-content hide">...</div>
So, is there an efficient way to observe the classes and if the content is not hidden, the sticky header gets an opacity of 0? Some sort of trigger?
Best Regards.
UPDATE
$(document).ready(function() {
$(document).find("span.lightbox-content > button").click(function() {
$("#sticky-header").css("opacity", 1);
$("#sticky-header").css("display", "block");
});
$(document).mouseup(function (e) {
var container = $("div.lightbox-content");
if (!container.is(e.target) && container.has(e.target).length === 0) {
$("#sticky-header").css("opacity", 1);
$("#sticky-header").css("display", "block");
}
});
$(document).keyup(function(e) {
if (e.keyCode == 27 && $(".lightbox-content")[0]) {
$("#sticky-header").css("opacity", 1);
$("#sticky-header").css("display", "block");
}
});
$("span.lightbox > a").click(function() {
$("#sticky-header").css("opacity", 0);
$("#sticky-header").css("display", "none");
});
});
Everything works except the button. I tried using this as well:
$("span.lightbox-content > button.lightbox-close").click(function() { ... }
And sadly I had no success. I don't know what I am missing. This is still without the use of toggling, but its a workaround. Can anybody tell me what I am missing? Any improvements?
SOLUTION
I solved the button issue with the following code:
$(document).mouseup(function (e) {
var container = $("button.lightbox-close");
if (container.is(e.target) && $(".lightbox-content")[0]) {
$("#sticky-header").css("opacity", 1);
$("#sticky-header").css("display", "block");
}
});
However, this is still long. Any simpler solutions with toggling? Other methods? Thanks again!
