I am attempting to display a <div> element once every hour. However, the code seems to be malfunctioning when I include 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>The code runs fine without this addition, but my goal is to show that content only once per hour. Please review and advise me on what may be 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>
<!-- Some CSS Styles -->
</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 -->
<!-- HTML for a modal pop-up box -->
</body>
</html>