i was searching for the solution, but i cannot find any proper suggestions.
My goal is to loop different external urls on the same page (inside the div), rather than looping the pages with header option. Here is my current code for showing one external page in the div:
<script>
$(document).ready(function(){
function loadlink(){
$('#tableHolder').load('read_data_from_page_one?v=1',function () {
$(this).unwrap();
});
}
loadlink(); // This will run on page load
setInterval(function(){
loadlink() // this will run after every 5 seconds
}, 30000);
});
</script>
So after 30 seconds my div "tableholder" is refreshed, which is ok. Now i would like to add another external page after 5 minutes in the same div, and then after 5 minutes again another external page. They need to be refreshed every 30 seconds as my first external page. After that it needs to load again the first external page.
so basicly loop inside external content in a div. Is that possible?
The other solution is to loop the pages via header options:
<?php header("Refresh: 300; URL=read_data_from_page_two.php"); ?>
But i don't want that. Any suggestions?
Best regards, Misko
If pages are numbered, simple counter will be fine:
$(document).ready(function(){
var counter = 1, // current page
max = 3; // last page
function loadlink(){
$('#tableHolder').load('read_data_from_page_one?v='+counter,function () {
$(this).unwrap();
});
}
loadlink(); // This will run on page load
setInterval(loadlink, 30000); // this will run after every 30 seconds
setInterval(function(){
if(++counter > max){ // next page
counter = 1; // back to start
}
}, 5000000); // 5 min interval
});
$(document).ready(function(){
function loadlink(x = 1){
$('#tableHolder').load('read_data_from_page_one?v='+x,function () {
$(this).unwrap();
});
}
loadlink(); // This will run on page load
var x=1;
setInterval(function(){
x++
loadlink(x); // this will run after every 5 seconds
}, 30000);
});
Is this more or less what you are meaning? An array of links that can be cycled through every n seconds and repeated when all have been displayed?
<script>
$(document).ready(function(){
var links=[
'read_data_from_page_one?v=1',
'read_data_from_page_two.php',
'read_data_from_page_three.php',
/*
..... etc
*/
'read_data_from_page_ninetynine.php'
];
var i=0;
function loadlink(i){
var url=links[i];
$('#tableHolder').load( url, function() {
$(this).unwrap();
});
}
loadlink(i);
setInterval(function(){
loadlink(i);
i++;
if( i>=links.length ) i=0;
}, 30000 );
});
</script>
Related
I am facing a problem, on my website i am using
<script type="text/javascript">
window.onload = function() {
var countdownElement = document.getElementById('countdown'),
downloadButton = document.getElementById('new_download'),
seconds = 10 ,
second = 0,
interval;
downloadButton.style.display = 'none';
interval = setInterval(function() {
if (second >= seconds) {
downloadButton.style.display = 'block';
countdownElement.style.display = 'none';
clearInterval(interval);
}
second++;
}, 1000);
}
</script>
But some google ads keep on loading and this function don't work. so i thought to stop page load after 10 sec with this script in footer of page
<script type="text/javascript">
setTimeout( function(){
window.stop()
} , 10000 );
</script>
But this is not working, is there any way i can stop page load after some time or skip google ads load time from page load time or other method except window.onload function
Heres a quick jquery code i wrote which worked for me...although i had no google ads. and i got rid of the setInterval()
hope it helps..
$("document").ready(function() {
$("#new_download").css({
"display":"none"
});
setTimeout(displaydbutton,10000);
}
function displaydbutton(){
$("#dload").css({
"display":"block"
});
clearTimeout();
});
I'm not sure if this is possible or not but.
If I have a php file I'm calling like so
<?php include 'number.php';?>
which is a number that will increase every hour or two.
How can I actively check if the number has changed?
When the number increases how can I trigger a sound alert followed by a redirect?
What I'm currently doing is using a "refresh every 5 seconds" within number.php
<body onload="setInterval(function() {window.location.reload();}, 5000);">
Then I'm trying to use jquery to console log the number and check for increased values, but I realized that it wasn't going to happen so I will spare you the messy code.
This is what I'm trying to trigger:
$("#alert").get(0).play();
$(location).attr('href', 'http://stackoverflow.com')
Any solution is fine. Also I'm starting to think an iframe is the way to go.
Use an Ajax request:
$(document).ready(function () {
// Declare the var
var num = 0;
// Function to be called every 5 secs
var update = function() {
$.ajax({
url: '/number.php',
type: 'get',
success: function (output) {
return output;
}
});
};
// Every 5 secs call update(), check if return a number > 0, and add it to num var
setInterval(function () {
var out = update();
if (out > 0) {
num += out;
}
console.log(num);
}, 5000);
});
I have a slider with 10 slider elements. However, only 7 out of 10 elements are rendered, given my data structure contains 20 sets. The site is hosted here
The code in question
function populateCarousell(cdata) {
var x = 0; //debug
jQuery(".wslide-slides .wslide-slide").each(function() {
var single = cdata.shift();
var jcurrSlide = jQuery(this);
jcurrSlide.find(".wslide-caption-text").text(single.title);
jcurrSlide.find("a").attr('href', "https://carousell.com/p/" +single.id);
jcurrSlide.css({'background-image':Base64.decode('dXJs')+'('+single.primary_photo_full_url+')'});
jcurrSlide.css({'background-image':'contain'});
jcurrSlide.css({'background-position':'50% 50%'});
jcurrSlide.css({'background-repeat': 'no-repeat'});
x++; //debug
jcurrSlide.find(".wslide-slide-inner2").removeAttr('style').find("img").css({'display':'none'});
});
alert(x); //Outputs 7
}
which is activated by (to ensure page fully loaded)
function caroDataCallback(data) {
if(document.readyState != "complete" ) {
setTimeout(function() { caroDataCallback(data); }, 2000);
}
else{
populateCarousell(data);
}
}
Upon examination in Chrome, the results is
That's because your page is not fully loaded when you call populateCarousell(cdata) function in your javascript file. Try instead of using $(document).ready(), use the $(document).load() to make sure all the images are loaded before you initiate your carousel.
Update: Use $(window).on('load', function() { .. }); instead.
Hope this helps.
I have 4 div´s each contains an image item and a select list of 4 div-id. I want to refresh the images simultaneously by changing the source of each image every 2 seconds.
I'm using setInterval() for each image and the problem is when I must stop all the timers at the same time.
Should I make a timer variable per div/img?
$(.div-id option:selected).each(function(){
var timer = setInterval(function(){
$(.div-id img).attr("src", "new-source-path");
},2000);
});
How can I stop all the active timers at once without stopping every timer Id?
Is there any solution with setTimeout() or any plugin to do that?
I'd opt for a single timer that loops through all images. Then when the timer isn't needed anymore I can just discard the single timer.
var timer = setInterval(swapImages, 2000);
function swapImages() {
$(.div-id option:selected).each(function(){
$(.div-id img).attr("src", "new-source-path");
});
}
// some time later
clearInterval(timer);
PS. I assume that your code is some pseudo code so I copied your namings
The end solution
function swapImages() {
$(".div-id-list option:selected").each(function () {
var url = "new-source-path";
$("#div-id img").attr("src", url);
});
}
function stopTimer() {
clearInterval(timer);
}
$(".div-id-list").on("change", function () {
stopTimer();
timer = setInterval(swapImages, 2000);
});
Thanks to donnywals !
I have such code:
$(document).ready(function () {
var el = $('#solving');
setInterval(function(){
if (el.text() == 'gotta!...'){
location.reload();
}
},3000);
});
and i want to do, that after my page is loaded, every 3 seconds i check my html page, on presenting of text 'gotta!...', and if present, i must refresh this page, but for some reasons it didn't work. What i do wrong?
How to check page on presenting of some text (with timer), and reload it?
Check the following example or the jsbin(http://jsbin.com/ibOmaSu/3/edit):
$(document).ready(function () {
var el = $('#solving');
setInterval(function(){
console.log("Checking if el has text");
if (el.text() == 'gotta!...'){
console.log("Reloading");
location.reload();
}
},3000);
// This will simulate whatever adds text to el
setTimeout(function() {
el.text('gotta!...');
},10000);
});
Small note: I can only imagine that the location.reload will not work in www.jsbin.com because it's caught and interrupted, so test locally. I've added a console.log to prove that it hits the correct code line.