hello I need a script that has an image that shows for 30 seconds after it disappears but after 5 minutes it appears again and disappears after 30 seconds and so continue
Can you help me please?
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
setTimeout(function() {
$(".content2").fadeIn(1500);
},3000);
});
</script>
<div class="content2" style="display:none;">IMAGE</div>
You could try something like this:
HTML
<div class="content2" style="display:none;">IMAGE</div>
JAVASCRIPT/JQUERY
<script type="text/javascript">
$(document).ready(function()
{
var showImageFor30sAndHide = function()
{
$(".content2").fadeIn(1500).delay(30 * 1000).fadeOut(1500);
};
// Start a interval that call previous method every 5 minutes.
setInterval(showImageFor30sAndHide, 5 * 60 * 1000);
});
</script>
setInterval and setTimeout can be used together.
hideInThirty();
setInterval(function() {
$("div").show();
hideInThirty();
}, 330000);
function hideInThirty() {
setTimeout(function() {
$("div").hide();
}, 30000);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>IMAGE</div>
Related
I'm using setTimeout + .load to reload my php file: table.php every 5 seconds, but I don't want it to reload the file if there isn't a change. A solution I came up with is to create a file called changes.php which currently echos 1 if there's a change or 0 if there isn't. If changes.php echos 1 I would like to refreshTable else it needs to wait another 5 seconds to check again. Any help would be appreciated as I'm confused with how to handle the javascript portion.
<div id="table"></div>
<script type="text/javascript">
$(document).ready(function(){
refreshTable();
});
function refreshTable(){
// if changes.php = 0 then load table.php else wait another 5 seconds
$('#table').load('table.php', function(){
setTimeout(refreshTable, 5000);
});
}
</script>
<script>
$(document).ready(function(){
checkForChanges();
setTimeout(checkForChanges, 5000);
});
function checkForChanges() {
$.get("changes.php", function(response) {
if(response === "1") {
refreshTable();
}
});
}
function refreshTable(){
$('#table').load('table.php');
}
</script>
I have a fancybox that is loaded in a iframe.
<script type="text/javascript">
$(document).ready(function () {
$("#prodacom_aerohivebundle_aerohivessid_ssid_inschakelen").fancybox({
type: "iframe",
href: "http://localhost/aerohive_ap/web/app_dev.php/queue"
});
});
</script>
This is working fine but now i want to refresh the iframe every 5 seconds without closing the iframe/fancybox.
Is this possible ?
Thanks!
You can use:-
setInterval(function () {
document.querySelector('.fancybox-wrap iframe').contentWindow.location.reload();
},5000);
As per a related answer on SO
$.fancybox.update(); // update
setInterval(function () {
$.fancybox.update();
}, 5000); // calls update every 5 seconds
I got this code from a website which I have modified to my needs:
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
</head>
<div id="links">
</div>
<script language="javascript" type="text/javascript">
var timeout = setTimeout(reloadChat, 5000);
function reloadChat () {
$('#links').load('test.php #links',function () {
$(this).unwrap();
timeout = setTimeout(reloadChat, 5000);
});
}
</script>
In test.php:
<?php echo 'test'; ?>
So I want test.php to be called every 5 seconds in links div. How can I do this right?
Try this out.
function loadlink(){
$('#links').load('test.php',function () {
$(this).unwrap();
});
}
loadlink(); // This will run on page load
setInterval(function(){
loadlink() // this will run after every 5 seconds
}, 5000);
Hope this helps.
Try using setInterval and include jquery library and just try removing unwrap()
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
var timeout = setInterval(reloadChat, 5000);
function reloadChat () {
$('#links').load('test.php');
}
</script>
UPDATE
you are using a jquery old version so include the latest jquery version
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
Try to not use setInterval.
You can resend request to server after successful response with timeout.
jQuery:
sendRequest(); //call function
function sendRequest(){
$.ajax({
url: "test.php",
success:
function(result){
$('#links').text(result); //insert text of test.php into your div
setTimeout(function(){
sendRequest(); //this will send request again and again;
}, 5000);
}
});
}
you can use this one.
<div id="test"></div>
you java script code should be like that.
setInterval(function(){
$('#test').load('test.php');
},5000);
<script type="text/javascript">
$(document).ready(function(){
refreshTable();
});
function refreshTable(){
$('#tableHolder').load('getTable.php', function(){
setTimeout(refreshTable, 5000);
});
}
</script>
I have a <div> which I am "blinking" every 5 seconds, here is my code:
var blink = function() {
$('.leftArrowMask').toggle();
};
$(document).ready(function() {
setInterval(blink, 5000);
});
I would like to change this so the blink effect happens every 5 seconds, but only blinks for say 1 second. Currently it stays visible for a 5 second duration, and then hides for 5 seconds.
I have tried the code above, but I don't think that's quite right. How can I achieve what I require?
Try this...
var blink1 = function() {
$('.leftArrowMask').hide();
setTimeout(blink2, 5000);
};
var blink2 = function() {
$('.leftArrowMask').show();
setTimeout(blink1, 1000);
};
$(document).ready(function() {
setTimeout(blink1, 1000);
});
It first runs blink1 which hides the div, and then runs blink2 after 1 second to show the div. Blink2 in turn runs blink1 again, 5 seconds later.
var blink = function() {
$('.leftArrowMask').hide();
setTimeout(function(){$('.leftArrowMask').show()},1000);
};
$(document).ready(function() {
setInterval(blink, 5000);
});
Working DEMO
use setTimeOut function in ur set interval function
var blink = function() {
$('div').hide();
setTimeout(function(){$('div').show()},1000);
};
$(document).ready(function() {
setInterval(blink, 5000);
});
div{
width:100px;
height:100px;
background:red;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div></div>
</body>
</html>
Hey I am creating a chatbox where I refresh the #users and the #chatbox every 3 seconds. However, after being refreshed, both those divs are being shifted to the side.
The refresh jquery code is:
<script type="text/javascript">
var auto_refresh = setInterval(
function(){
$('#users').load('chat.php?_=' +Math.random()+' #users').fadeIn("slow");
}, 3000); // refresh every 3000 milliseconds
</script>
<script type="text/javascript">
var auto_refresh2 = setInterval(
function(){
$('#chatbox').load('chat.php?_=' +Math.random()+' #chatbox').fadeIn("slow");
}, 3000); // refresh every 3000 milliseconds
</script>