I have a script that I need to run only an overlay is not visible.
So I have used the following script:
Example below, button shows/hides overlay. Console logs result
function overlay() {
if( $('div#overlay').is(':visible') ){
console.log("visible");
}
else {
console.log("not visible");
}
};#overlay {
visibility: hidden;
position: fixed;
left: 0px;
top: 0px;
width:40%;
height: 40%;
text-align:center;
z-index: 1000;
display: inline-block;
background-color: orange;
/*Flexbox*/
display: flex;
align-items: center;
align-content: center;
justify-content: center;
}
form.overlay-form {
width:780px;
}
table.overlay-table {
position: relative;
text-align: center;
}
table.overlay-table tr td {
background: rgb(54, 25, 25);
background: rgba(54, 25, 25, 0);
border-style: none;
margin-right: 40%;
margin-bottom: 30%;
position: relative;
text-align: center;
width: 800px;
}
.button {
z-index:1000;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="overlay">
Overlay showing
</div>
</br></br></br></br>
</br></br></br></br>
<input id="clickMe" class="button" type="button" value="clickme" onclick="overlay();" />EDIT: following correcting . for # due to it being an id not a class. Now, when my overlay is NOT on the screen. It returns 'visible'.
This script always returns "visible". Help!!
Thanks
You are almost there with a small mistake. Since overlay is id,
if( $('div.overlay').is(':visible')){
console.log("visible");
}
Should be
if( $('div#overlay').is(':visible')){
console.log("visible");
}
Need to use if( $('div#overlay').is(':visible')){ because overlay is id not class:-
if( $('div#overlay').is(':visible')){
console.log("visible");
}else {
console.log("not visible");
}
For answer your current question use if( el.style.visibility =='visible' ){ like below:-
function overlay() {
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
if( el.style.visibility =='visible' ){
console.log("visible");
}
else {
console.log("not visible");
}
};#overlay {
visibility: hidden;
position: fixed;
left: 0px;
top: 0px;
width:40%;
height: 40%;
text-align:center;
z-index: 1000;
display: inline-block;
background-color: orange;
/*Flexbox*/
display: flex;
align-items: center;
align-content: center;
justify-content: center;
}
form.overlay-form {
width:780px;
}
table.overlay-table {
position: relative;
text-align: center;
}
table.overlay-table tr td {
background: rgb(54, 25, 25);
background: rgba(54, 25, 25, 0);
border-style: none;
margin-right: 40%;
margin-bottom: 30%;
position: relative;
text-align: center;
width: 800px;
}
.button {
z-index:1000;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="overlay">
Overlay showing
</div>
</br></br></br></br>
</br></br></br></br>
<input id="clickMe" class="button" type="button" value="clickme" onclick="overlay();" />Reason:-
Based on documentation:-https://api.jquery.com/visible-selector/
Elements are considered visible if they consume space in the document.
Since overlay div have always get visibility:hidden so basically it's space is there and that's why :visible always return true.
If you want to use :visible then do display:none; and display:block;