Divs shifting after refresh - javascript

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>

Related

Load a jsp page every 20 secs after 1st page load

I am trying to autosubmit a form upon 1st load and then refresh every 20 secs. I have tried below but it keeps loading the page all the time. is that correct implementation or how I can achieve that.
window.onload=function(){
var auto = setTimeout(function(){ submitform(); }, 100);
function submitform(){
document.forms["frm1"].submit();
}
function autoRefresh(){
clearTimeout(auto);
auto = setTimeout(function(){ autoRefresh(); }, 20000);
}
}
You must use setInterval() instead :
setInterval(function(){
//Refresh code here
//location.reload();
}, 20000);
So the code inside will be triggered every 20 second.

Refresh Fancybox Every 5 seconds

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

show div after 5 seconds and then refresh the div every 1 min

I have created a div into my page which i wanted to get load after 5 seconds the page get load. Then I wanted to refresh the div without refreshing the page after every 1 min. How can I achieve this functionality with the use of J query. My code look like this
$(document).ready(
function () {
setInterval(function() {
$('#newsletter').show();
}, 100000);
});
This upper block of code is only refreshing the div after 1 min. But on page load , i want the div to be shown to the user after 5 seconds and then this block of code should executed.
$(document).ready(function()
{
setTimeout(function()
{
// Perform actions you need to
setInterval(function()
{
// Perform them again every minute
}, 60000);
}, 5000);
});
I think what you were looking for is setTimeout
Try it:
$(function(){
setTimeout(function(){
$('#newsletter').show(); // to show div after 5 sec of page load
// To reshow on every one minute
setInterval(function() {
$('#newsletter').show();
}, 60000);
}, 5000);
});
You've already got the base functionality there, so all you'll need to do is add a message to appear after 5 seconds. Something like this should work.
$(document).ready(function()
{
setTimeout(function() {
// show message
},5000);
setInterval(function() {
$('#newsletter').show();
}, 60000);
});
Here is a jQuery solution:
$(document).ready(function () {
var $newsletter = $('#newsletter')
.delay(5000)
.show(function() {
setInterval(function() {
// update the newsletter, e.g. set new text
$newsletter.text(new Date());
}, 60000);
});
});

lock the scroller at the bottom of a div for chat box even after refresh

Hey there i have a chat box in my site and i need to lock the scroller always at the bottom so that the new messages are always in front of the user .... i have tried like
<div id="mainchatdiv"
style="overflow-y:scroll; width:100%;height:247px;background-color:#FAF4ED;">
...........messagea are here...
</div>
<script>
var auto_refresh = setInterval(
function () {
$('#mainchatdiv').load('home.php #mainchatdiv').fadeIn("slow");
}, 5000);
$("#mainchatdiv").scrollTop($("#mainchatdiv")[0].scrollHeight);
</script>
the code is working but whenever it refreshes the scroller again goes up....
How about this 1 :-
var auto_refresh = setInterval(
function () {
$('#mainchatdiv').load('home.php #mainchatdiv').fadeIn("slow");
$("#mainchatdiv").scrollTop($("#mainchatdiv")[0].scrollHeight);
}, 5000);
$("#mainchatdiv").scrollTop($("#mainchatdiv")[0].scrollHeight);
<script>
var auto_refresh = setInterval(
function () {
$('#mainchatdiv').load('home.php #mainchatdiv').fadeIn("slow");
}, 5000);
var chatDiv = document.getElementById("mainchatdiv");
chatDiv.scrollTop = chatDiv.scrollHeight;
</script>

Blinking DIV for 5 seconds and then hide it after 1 second using jQuery

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>

Categories