Javascript - Load a page 4 times then change on the 5th time - javascript

I'm making a rolling screen based in PHP, i use javascript to load a page every 10 seconds. Here is what I have so far:
<script>
setInterval(function(){
$('#container').fadeOut('slow').load('screener.php').fadeIn("slow");
},10000);
</script>
so i'm guessing I need a count to load either screener.php or if the count = 5, load alternate.php.

Yes, that is exactly what you need to do.
var counter = 0;
setInterval(function(){
if (counter % 5 === 0) {
$('#container').fadeOut('slow').load('alternate.php').fadeIn("slow");
} else {
$('#container').fadeOut('slow').load('screener.php').fadeIn("slow");
}
counter++;
},10000);

Related

Fire javascript every x page load, for example, every 3rd page

I'm sure this question has been answered, before, but my searches are coming up empty.
I have a simple jQuery function (that slides in a box after the page has been scrolled down). It works fine.
However, how do I set cookies, or other method, to make it execute on the first page load and, then, on every 3rd page load of the session, after that?
A little snippet like this should work for you.
(function () {
// Get the countdown from localStorage
var countdown = Number(window.localStorage.getItem('countdown'));
// If countdown isn’t set it or if it has
// run a couple times it’ll be `0`
// Either way—we reset countdown and run the function
if (!countdown) {
countdown = 3;
// Run the function
}
// Update the countdown
window.localStorage.setItem('countdown', countdown - 1);
})();
These are both very instructive answers (my javascript skill is at the piece-it-together level). If it's helpful to someone, even though the question was for a javascript solution, I realized there might be a PHP solution, as well.
This worked, too:
<?php //Slide-in ad will show every x pages
$slide_ad_frequency=3;
session_start();
//increase the already-set counter by 1 or initiate the counter with a value of 1
if( isset( $_SESSION['counter'] ) )
{
$_SESSION['counter'] += 1;
}
else
{
$_SESSION['counter'] = 1;
}
//If counter equals the ad frequency setting
if($_SESSION['counter'] % $slide_ad_frequency == 0) : ?>
... Code to execute ...
<?php endif ?>
You can store the count of window loads on the sessionStorage so that data won't be lost on every reload. The data will be cleared when the tab is closed. If you want your data to not expire when the session ends, you should instead use localStorage; both have the same implementation.
window.onload = doSomething;
function doSomething() {
let count = sessionStorage.getItem('noOfPageLoads');
if( count ) { //if count is not null, increment it
count++;
sessionStorage.setItem('noOfPageLoads', count); //update the local storage
}
else { //if count is null, it's the first load, so put it in the local storage
count = 0;
sessionStorage.setItem('noOfPageLoads', count);
}
console.log('noOfPageLoads = '+ count)
if( count===0 || count===3 ) {
console.log('do something now');
//do what you want here
}
}

How can I fix this code to show 10 seconds and hide 10 seconds again and again forever?

How can I fix this code to show 10 seconds and hide for 10 seconds again and again forever but seconds never stop when the visitor visit my website if code is in 5 or 3 or ... seconds of showing he can see if the code is on 5 ose 4 or ... seconds of hide he can't see.
<div id = "adsdiv">This ad will close in
<span id = "closingtimer">10</span>
seconds
</div>
<script type="text/javascript">
function closeMyAd() {
document.getElementById("adsdiv").style.display = "none" ;
}
var seconds = 10;
function display() {
seconds --;
if (seconds < 1) {
closeMyAd();
}
else {
document.getElementById( "closingtimer" ).innerHTML = seconds ;
setTimeout("display()", 1000);
}
}
display();
</script>
This code shows just 10 seconds and close.
I would make it so that you have a timer variable that is constantly growing. It is keeping track of the current time in seconds. Every time it updates (once a second) you divide it by ten and then apply the modulo operator to the result to see if it is even or odd. Then, you have a looping if statement that, say, hides it if it's odd and shows it if it's even. That would make it flash once every ten seconds.
You can try it.Hope it help you.
var hidden = true;
function close() {
document.getElementById("adsdiv").style.display = "none" ;
}
function display() {
document.getElementById("adsdiv").style.display = "block" ;
}
setInterval(function(){if(hidden)
{display();
hidden = false;
}else{
close();
hidden = true;
}}, 10000);

How To Sequentially Display div's With Different Time Intervals For Each

Good Afternoon All
We've been able to get a basic version of this working with a single time interval in javascript
time = 10000; // 10 Seconds
var counter = 0;
divs = $('#div1, #div2, #div3, #div4, #div5');
function showDiv () {
divs.hide() // hide all divs
.filter(function (index) { return index == counter % 5; })
// figure out correct div to show
.fadeIn(300, "linear"); // and show it
counter++;
if (counter > 5 ){
counter = 1; //Reset Counter
}
}; // function to loop through divs and show correct div
showDiv(); // show first div
setInterval(function(){ showDiv(); }, time); // do this every 10 seconds
});
What I'd like to do is cause the intervals to be different on each of the div times
Like div1 & div2 play for 10 seconds and the others play for 5 seconds
I was able to get the logic working to see if the time had changed based upon which div was displaying but could not get "time" to update from one value to another
I've been reading that using setInterval() does not allow for changing of a variable value once it's been loaded.
There were some suggestions to use setTimeout() but I could not figure it out
Anyone with a suggestion?
Thanks~
Instead of using setInterval you can do the same thing using setTimeout() to call the function again from within itself. This allows determining intervals per instance based on counter
time = 10000; // 10 Seconds
var counter = 0;
divs = $('#div1, #div2, #div3, #div4, #div5');
function showDiv() {
// hide all divs, filter current index, and fadeIn
divs.hide().eq(counter).fadeIn(300, "linear");
counter++;
if (counter > 5) {
counter = 1; //Reset Counter
}
// do it again
var delay = counter > 1 ? time / 2 : time
setTimeout(showDiv, delay);
}; // function to loop through divs and show correct div
showDiv(); // show first div
Also streamlined using filter(fn) and replaced with eq()
Correct, the interval for setInterval cannot be changed once it is started. You'll need to use setTimeout to make the interval different each time. The idea is to call setTimeout again in the callback passed to setTimeout, thereby creating a chain of calls. This is a common pattern.
// Different timeouts for each div
var times = [10000, 10000, 5000, 5000, 5000];
var counter = 0;
function showDiv() {
// Show the div immediately
divs.hide().eq(counter).fadeIn(300, 'linear');
// Cycle the counter
counter = (counter + 1) % divs.length;
// Set the delay for the next callback
setTimeout(showDiv, times[counter]);
}
// Start the chain of calls
showDiv();
A hearty thank you and a brewski to both...
I ended up taking the best of both and here's what I'm now using
<script type="text/javascript">
$(function () {
// Different timeouts for each div
var times = [30000, 30000, 10000, 10000, 5000];
var counter = 0;
divs = $('#div1, #div2, #div3, #div4, #div5');
function showDiv() {
// hide all divs, filter current index, and fadeIn
divs.hide().eq(counter).fadeIn(300, "linear");
// set time out duration from array of times
setTimeout(showDiv, times[counter]);
// cycle the counter
counter = (counter + 1) % divs.length;
};
showDiv(); // show first div
});
</script>

adding simple countdown (as numbers) to my php script

i have php page that i want to run simple countdown 60 seconds in a certain area of my page (in the footer) because i have auto refresh code to refresh the page every 60 seconds so i want to show to users that 60, 59, 58, 57.... just a text rolling countdown until it refreshes so it will start again. easy and simple, no need for complete count down scripts as shown online in many sites...
what i could think is a gif animated small icon, that can work but if possible not add an image is better, i just want normal size text as numbers running from 60 to 0 then looping again (even if no looping is fine... page will be refreshed anyway)
what to do?
You cannot do this with PHP since it is server side . You can create using javascript. Please try this code:
<div id="timer">##</div>
<button id="starter" onclick="start('60');">start</button>
<script>
var tme = document.getElementById("timer");
var bt= document.getElementById("starter");
var counting = false;
function start(count) {
//console.log(counting);
if (!counting) {
counting = true;
tme.innerHTML = count;
var timer = setInterval(function() {
if (count >= 0) {
tme.innerHTML = count;
count--;
} else {
clearInterval(timer);
count = arguments[0];
counting = false;
}
}, 400);
}
}
</script>
Hope this will help

Show div for 15 seconds then show another div

I have a gaming website and I want to put a advertisement before the game. So can someone tell me how to show the advertisement div for 15 seconds which says below it. "The game will start in [time left] seconds". Then one the time is up then it will show the div which holds the game. In javascript please.
Thank you
I would recommend taking a looking at setTimeout. It allows you do something after a certain time. If you need more help let us know.
EDIT: I'm sorry I misread your question. A more appropriate method you should use is setInterval so every second during the 15 seconds, you can show the time. Speransky's answer has the right idea.
Demo: http://jsfiddle.net/myDTK/1
var secondsLeft = 15;
var delay = 1000; // 1 second
var interval = setInterval(function () {
if (secondsLeft > 0) {
document.getElementById('timer').innerHTML = 'The game will start in ' + secondsLeft + ' seconds...';
secondsLeft -= 1;
} else {
document.getElementById('timer').style.display = 'none';
clearInterval(interval);
document.getElementById('game').style.display = 'block';
}
}, delay);​
function doSome() {
//do some
}
setTimeout(function(){
doSome();
}, 15000);
Have a look at the setTimeout function
eg.
setTimeout(function(){
//code to hide the div and how game div
}, 15000);
Here's a live example using jQuery.
Basically just make a function that adds the div, call that function whenever you need to, and then in that function do setTimeout(removeFunction, 15000) to call the remove function 15 secs later.
In order to do the countdown timer, you can call a function updateTimer once per second (again, setTimeout(updateTimer, 1000)) and have that function simply search for the timer and decrement the counter.

Categories