You are attempting to use jQuery selectors but you are not importing the jQuery library, you can do so by adding this in your HTML head:
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
Solution 1 :
Solution 2 :
You are just missing JQuery CDN or static import in your code.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='showOnceAnHour' style='display: none'><h1>Div</h1></div>
<script>
$(document).ready(function() {
setInterval(function() {
$("#showOnceAnHour").fadeIn().delay(10).fadeOut();
}, 60);
});
</script>
<h3>I Just changes the fadeIn and fadeOut time for demo purpose</h3>Problem :
I am trying to show a <div> element once per hour, but the code is not working, when I add the following:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='showOnceAnHour' style='display: none'>
<script>
$(document).ready(function() {
setInterval(function() {
$("#showOnceAnHour").fadeIn().delay(10000).fadeOut();
}, 60*60*1000);
});
</script>This code is working fine without it but I want to show that content once per hour. Please take a look and let me know where I am going wrong.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
.btnadpop {
background: #428bca;
border: #357ebd solid 1px;
border-radius: 3px;
color: #fff;
display: inline-block;
font-size: 14px;
padding: 8px 15px;
text-decoration: none;
text-align: center;
min-width: 60px;
position: relative;
transition: color .1s ease;
}
.btnadpop:hover {
background: #357ebd;
}
.btnadpop.btn-big {
font-size: 18px;
padding: 15px 20px;
min-width: 100px;
}
.btn-close {
color: #aaaaaa;
font-size: 30px;
text-decoration: none;
position: absolute;
right: 5px;
top: 0;
}
.btn-close:hover {
color: #919191;
}
.modaladpop:target:before {
display: none;
}
.modaladpop:before {
content:"";
display: block;
background: rgba(0, 0, 0, 0.6);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
}
.modaladpop .modal-dialoger {
background: #fefefe;
border: #333333 solid 1px;
border-radius: 5px;
margin-left: -200px;
position: fixed;
left: 50%;
z-index: 11;
width: 360px;
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-transition: -webkit-transform 0.3s ease-out;
-moz-transition: -moz-transform 0.3s ease-out;
-o-transition: -o-transform 0.3s ease-out;
transition: transform 0.3s ease-out;
top: 20%;
}
.modaladpop:target .modal-dialoger {
top: -100%;
-webkit-transform: translate(0, -500%);
-ms-transform: translate(0, -500%);
transform: translate(0, -500%);
}
.modal-bodyadpop {
padding: 20px;
}
.modal-headeradpop, .modal-footer {
padding: 10px 20px;
}
.modal-headeradpop {
border-bottom: #eeeeee solid 1px;
}
.modal-headeradpop h2 {
font-size: 20px;
}
.modal-footeradpop {
border-top: #eeeeee solid 1px;
text-align: center;
}
</style>
</head>
<body>
<div id='showOnceAnHour' style='display: none'>
<script>
$(document).ready(function() {
setInterval(function() {
$("#showOnceAnHour").fadeIn().delay(10000).fadeOut();
}, 60*60*1000);
});
</script>
<!-- Modal -->
<div class="modaladpop" id="modal-one" aria-hidden="true">
<div class="modal-dialoger">
<div class="modal-headeradpop">
<h2>Welcome</h2>
</div>
<div class="modal-bodyadpop">
<p>This is an Example</p>
</div>
<div id="butnclose" class="modal-footeradpop"> <a href="#modal-one" class="btnadpop">Close</a>
<script>
document.getElementById("butnclose").style.display = "none";
function showStuff() {
document.getElementById("butnclose").style.display = "block";
}
setTimeout(showStuff, 5000);
</script>
</div>
</div>
</div>
</div>
</body>
</html>Comments
Comment posted by How to call a function every hour?
Does this answer your question?
Comment posted by Beingnin
Jquery is not imported in the snippet you attached with this question. This probably the issue in your code too
Comment posted by Charlie
What is the error you see in the console?
Comment posted by gist.github.com/b023a2fa80d0515942534f0f3c5a6a22
This is not JavaScript, this is just a script import you need to put in your
Comment posted by Nagnath B.M
Thanks that worked, But it shows after one hour and not on the first time, is there any way to show it first time on page load and then after once every hour
Comment posted by Skully
Sure, just add
Comment posted by Nagnath B.M
Thank you very much, I got what I wanted, thanks for helping.