I have an iframe that I wanna update every 20 seconds. So basically, the url of the iframe should change to a new one from the array and it refreshes, every 20 seconds but my code doesn't seem to work.
var Uni = {
init: function () {
this.refresh();
},
refresh: function () {
var urlArr = [
'http://www.smashingmagazine.com/learning-javascript-essentials-guidelines-tutorials/',
'http://stephendnicholas.com/archives/310',
'http://msdn.microsoft.com/en-us/scriptjunkie/ff696765',
'http://www.jquery4u.com/jquery-functions/jquery-each-examples/'
],
iframeSrc = document.querySelector('#uni iframe').src;
for (var i = 0, max = urlArr.length; i < max; i++) {
setInterval(function(){
iframeSrc = urlArr[i];
}, 20000);
}
}
}
Uni.init();
HTML:
<body id="uni">
<iframe src="http://www.smashingmagazine.com/learning-javascript-essentials-guidelines-tutorials/">
You browser doesn't support iframes, please update it.
</iframe>
</body>
Please help.
Check the last line of your urlArr[] declaration:
], // <- the comma should be a semicolon!
Thanks to #AndyE for the hint.
Update: Solution + working fiddle
var Uni = {
interval_holder : false,
urlArr : [],
init: function (args) {
if (args) {
for (url in args) { this.addUrl(args[url]); }
};
this.refresh();
this.interval_holder = setInterval('myuni.refresh()', 20000);
return this;
},
refresh: function () {
iframeObj = document.querySelector('#uni iframe');
this.urlArr.unshift(iframeObj.src);
iframeObj.src = this.urlArr.pop();
return this;
},
stop : function () {
clearInterval(this.interval_holder);
return this;
},
addUrl : function(url) {
this.urlArr.push(url);
return this;
},
removeUrl : function(url) {
this.urlArr.splice(this.urlArr.indexOf(url),1);
return this;
}
};
window.myuni = Uni.init([
'http://www.smashingmagazine.com/learning-javascript-essentials-guidelines-tutorials/',
'http://stephendnicholas.com/archives/310',
'http://msdn.microsoft.com/en-us/scriptjunkie/ff696765',
'http://www.jquery4u.com/jquery-functions/jquery-each-examples/'
]);
The iframe src attribute is only a string, not pointer. Changing it has no effect.
Have this instead:
iframeObj = document.querySelector('#uni iframe');
for (var i = 0, max = urlArr.length; i < max; i++) {
setInterval(function(){
iframeObj.src = urlArr[i];
}, 20000);
}
Related
So basically when I switch tabs, the countdown timer on a specific page just stops counting down and resumes when you return to the tab. Is there anyway to mitigate that so that it counts in the background or it accounts for the time you spend on another tab?
This is basically what I have for js:
document.getElementById('timer').innerHTML =
05 + ":" + 01;
startTimer();
function startTimer() {
var presentTime = document.getElementById('timer').innerHTML;
var timeArray = presentTime.split(/[:]+/);
var m = timeArray[0];
var s = checkSecond((timeArray[1] - 1));
if(s==59){m=m-1}
if(m<0){
return
} else if (m == 0 && s == 0) {
location.reload();
}
document.getElementById('timer').innerHTML =
m + ":" + s;
setTimeout(startTimer, 1000);
}
function checkSecond(sec) {
if (sec < 10 && sec >= 0) {sec = "0" + sec};
if (sec < 0) {sec = "59"};
return sec;
}
Any ideas whether the time could be done server side or something so that it can't be modified client side? If not, then whatever, but mainly just want to figure out how to make the countdown still work (or account for the time spent) when on another tab.
We can store the variable m and s values either globally or use the local storage to set the values after setting the inner HTML and get the stored values back whenever tabs were switched as:
Set values:
window.localStorage.setItem('minutes', m.toString()); //same for the seconds
Get values:
window.localStorage.getItem('minutes'); //same for the seconds
Hope this answers your questions.
Just a simple solution:
Add this piece of code.
<html>
<head>
<script>
(function() {
var $momentum;
function createWorker() {
var containerFunction = function() {
var idMap = {};
self.onmessage = function(e) {
if (e.data.type === 'setInterval') {
idMap[e.data.id] = setInterval(function() {
self.postMessage({
type: 'fire',
id: e.data.id
});
}, e.data.delay);
} else if (e.data.type === 'clearInterval') {
clearInterval(idMap[e.data.id]);
delete idMap[e.data.id];
} else if (e.data.type === 'setTimeout') {
idMap[e.data.id] = setTimeout(function() {
self.postMessage({
type: 'fire',
id: e.data.id
});
// remove reference to this timeout after is finished
delete idMap[e.data.id];
}, e.data.delay);
} else if (e.data.type === 'clearCallback') {
clearTimeout(idMap[e.data.id]);
delete idMap[e.data.id];
}
};
};
return new Worker(URL.createObjectURL(new Blob([
'(',
containerFunction.toString(),
')();'
], {
type: 'application/javascript'
})));
}
$momentum = {
worker: createWorker(),
idToCallback: {},
currentId: 0
};
function generateId() {
return $momentum.currentId++;
}
function patchedSetInterval(callback, delay) {
var intervalId = generateId();
$momentum.idToCallback[intervalId] = callback;
$momentum.worker.postMessage({
type: 'setInterval',
delay: delay,
id: intervalId
});
return intervalId;
}
function patchedClearInterval(intervalId) {
$momentum.worker.postMessage({
type: 'clearInterval',
id: intervalId
});
delete $momentum.idToCallback[intervalId];
}
function patchedSetTimeout(callback, delay) {
var intervalId = generateId();
$momentum.idToCallback[intervalId] = function() {
callback();
delete $momentum.idToCallback[intervalId];
};
$momentum.worker.postMessage({
type: 'setTimeout',
delay: delay,
id: intervalId
});
return intervalId;
}
function patchedClearTimeout(intervalId) {
$momentum.worker.postMessage({
type: 'clearInterval',
id: intervalId
});
delete $momentum.idToCallback[intervalId];
}
$momentum.worker.onmessage = function(e) {
if (e.data.type === 'fire') {
$momentum.idToCallback[e.data.id]();
}
};
window.$momentum = $momentum;
window.setInterval = patchedSetInterval;
window.clearInterval = patchedClearInterval;
window.setTimeout = patchedSetTimeout;
window.clearTimeout = patchedClearTimeout;
})();
</script>
</head>
</html>
Wow. I finally figured about what is causing the bug, but I can't figure out why. I have an object with a property (excuse the massive code dump)
// relatives second indices in the video to events
// that are called when the video reaches that second
this.PausePoints = [
{
sec: 10,
name: "Point number 1",
passed: false,
func: (function(that) {
this.$layer = that.GetLayerElement(10);
this.$layer.hide();
this.to = function () {
that.videlem.pause(); // pause video
$(window).resize(); // re-proportion stuff
// point the 3 mouse pointers
var $mptrs = this.$layer.find('.filmstrip-pointer');
for (var i = 0; i < $mptrs.length; ++i) {
(function (j) {
setTimeout(function () {
Point($mptrs.eq(j));
}, j * 1000);
})(i);
}
};
// attach click event to 3 sections
$clickRegions = $layer.find('div.click-region');
$clickRegions.click(function(){
$clickRegions.removeClass('clicked');
$(this).addClass('clicked');
});
this.away = function () {
this.$layer.hide();
}
// attach event to next button
$layer.find('.next-btn').click(function(){
this.away();
that.videlem.play();
}.bind(this));
return this;
})(this)
},
{
sec: 26,
name: "Point number 2",
passed: false,
func: (function(that) {
this.$layer = that.GetLayerElement(26);
this.$layer.hide();
this.to = function () {
// loop video between 0:26-0:31
this.loop = setInterval(function () {
that.videlem.currentTime = 26;
that.videlem.play();
}, 5000);
// point the 3 mouse pointers
var $mptrs = this.$layer.find('.filmstrip-pointer');
for (var i = 0; i < $mptrs.length; ++i) {
(function (j) {
setTimeout(function () {
Point($mptrs.eq(j));
}, j * 1000);
})(i);
}
this.$layer.show();
}
// separate pargraph words by spans
this.$layer.find('p').each(function () {
var spanned = $(this).text().split(" ").map(function (w) { return '<span class="word">' + w + '</span>'; }).join(" ");
$(this).html(spanned);
});
// add event click event on headlines
var timeouts = [];
this.$layer.find('h3').click(function () {
// clear any current 'showing' animations
timeouts.forEach(function(t){ clearTimeout(t); });
timeouts = [];
// unshow all words on the slide
this.$layer.find('span.word').removeClass('shown');
// show all words associated with the headline that was clicked
var $wspans = $(this).closest('.tower-layer').find('span.word');
for ( var i = 0; i < $wspans.length; ++i )
{
(function(j){
timeouts.push(setTimeout(function(){
$wspans.eq(j).addClass('shown');
},j*100));
})(i);
}
}.bind(this));
this.away = function () {
clearInterval(this.loop);
this.$layer.find('span.word').removeClass('shown');
$layer.hide();
that.videlem.currentTime = 31;//go to end of loop
};
// set action of "Next" button
this.$layer.find('.next-btn').click(function () {
this.away();
that.videlem.play();
}.bind(this));
return this;
})(this)
},
{
sec: 38,
name: "Point number 3",
passed: false,
func: (function(that) {
this.$layer = that.GetLayerElement(38);
this.$layer.hide();
this.to = function ( ) {
// loop video between 0:38-0:43
this.loop = setInterval(function () {
that.videlem.currentTime = 38;
that.videlem.play();
}, 5000);
this.$layer.show();
}
this.away = function(){
clearInterval(this.loop);
this.$layer.hide();
};
this.$layer.find('.next-btn').click(function(){
that.videlem.currentTime = 43;
this.away();
that.videlem.play();
}.bind(this));
return this;
})(this)
},
{
sec: 47,
name: "Point number 4",
passed: false,
func: (function(that){
this.$layer = that.GetLayerElement(47);
this.$layer.hide();
this.to = function ()
{
// loop video between 0:47-0:52
this.loop = setInterval(function() {
that.videlem.currentTime = 47;
that.videlem.play();
}, 5000);
// show layer
this.$layer.show();
}
this.away = function () {
clearInterval(this.loop);
this.$layer.hide();
};
this.$layer.find('.next-btn').click(function () {
that.videlem.currentTime = 52;
this.away();
that.videlem.play();
}.bind(this));
return this;
})(this)
},
{
sec: 57,
name: "Point number 5",
passed: false,
func: (function(that){
this.$layer = that.GetLayerElement(57);
// hide initially
this.$layer.hide();
this.to = function ()
{
// loop video between 0:57-1:02
this.loop = setInterval(function () {
that.videlem.currentTime = 57;
that.videlem.play();
}, 5000);
this.$layer.show();
}
this.away = function(){
clearInterval(this.loop);
$layer.hide();
};
this.$layer.find('.next-btn').click(function () {
that.videlem.currentTime = 62;
this.away();
that.videlem.play();
}.bind(this));
return this;
})(this)
}
];
and what I'm noticing is that when I try to call any of the to functions it always calls the one in the last element of the array.
For example,
VidHandler.PausePoints[0].func.to()
calls
this.to = function ()
{
// loop video between 0:57-1:02
this.loop = setInterval(function () {
that.videlem.currentTime = 57;
that.videlem.play();
}, 5000);
this.$layer.show();
}
instead of the expected
this.to = function () {
that.videlem.pause(); // pause video
$(window).resize(); // re-proportion stuff
// point the 3 mouse pointers
var $mptrs = this.$layer.find('.filmstrip-pointer');
for (var i = 0; i < $mptrs.length; ++i) {
(function (j) {
setTimeout(function () {
Point($mptrs.eq(j));
}, j * 1000);
})(i);
}
};
Why is this happening and how can I fix it?
The problem is you're trying to assign something to func using an immediately invoked function expression (IIFE). Those IIFEs are executed before the object is constructed, meaning this refers to something else. Your code can basically be broken down like this:
this.to = function() {
// version for "Point number 1"
};
this.to = function() {
// version for "Point number 2"
// notice that you're overwriting the previous one
};
// repeat for all points
var self = this;
this.PausePoints = [
{
name: "Point number 1",
func: self
},
// repeat for all points
];
So what you're actually doing is assigning a to value to the same object that has the PausePoints property.
Lets see this script, that it's a simple carrousel
$script = {
init: function(){
this.heros(3000);
},
heros: function (time) {
var t;
var $hero = $('.hero');
var $images = $('.hero > div');
$hero.data('current', 0);
var $bullets = $('<div>').addClass('bullets');
for ( var i = 0; i<$images.length; i++ ) {
var $item = $('<span>');
$item.on('click', function () {
clearTimeout(t);
play( $(this).index() );
});
if(i==0) { $item.addClass('active') }
$bullets.append( $item );
}
var play = function (current) {
if(current==undefined) {
current = $hero.data('current');
}
var nextMargin;
if ( (current+1) == $images.length ) {
nextMargin = 0 ;
$hero.data('current',0);
} else {
nextMargin = (current + 1 )*100;
$hero.data('current', (current + 1));
}
$images.eq(0).css('marginLeft', -nextMargin + '%');
$bullets.find('span').eq($hero.data('current')).addClass('active').siblings().removeClass('active');
clearTimeout(t);
t = setTimeout(play, time);
}
$hero.append($bullets);
t = setTimeout(play, time);
},
}
The thing is that it works great, but only if there's just one .hero element.. if there are multiple the bullets mix up and it doesn't respect the .length
I know that option one should be rewrite it again, but Does anyone of you sees a quick fix that would make it reusable?
A single fiddle: https://jsfiddle.net/6z8n5pnq/
A multiple fiddle: https://jsfiddle.net/6z8n5pnq/1/
-EDIT-
I tried:
Defining a previous function, that is called on init
preheros: function(time) {
var self = this;
$('.heros').each(function(){
self.heros($(this), time);
});
},
And editing The begining of heros:
heros: function ($hero, time) {
var t;
/*var $hero = $('.hero');*/
var $images = $hero.find('>div');
but no success...
any idea?
-EDIT-
GOD, it's $('.hero').each not $('.heros').each it was working!
The easiest way to do this is to isolate context for each .hero component by using $(selector).each function. Slightly corrected your fiddle https://jsfiddle.net/6z8n5pnq/2/
function apply($hero, time){
var t;
var $images = $hero.children('div');
//all your logic here...
}
$script = {
init: function () {
this.heros(3000);
},
heros: function (time) {
$('.hero').each(function(){
apply($(this), time);
});
},
}
i have a loop function that in first 5 seconds it runs social1() and in second 5 seconds it runs social2() then loop ...
i have 2 hover functions too
i need clear all active timeouts because when i hover on images (.social1 & .social2), i can see that multiple timeouts are running
how to fix this?
function social1() {
$('.social1').fadeTo(500, 1);
$('.social2').fadeTo(500, 0.5);
timeout = setTimeout(function() {
social2();
}, 5000);
}
function social2() {
$('.social1').fadeTo(500, 0.5);
$('.social2').fadeTo(500, 1);
timeout = setTimeout(function() {
social1();
}, 5000);
}
$(document).ready(function ()
{
social1();
$('.social1').hover(
function () {
window.clearTimeout(timeout);
social1();
},
function () {
timeout = setTimeout(function() {
social2();
}, 5000);
}
);
$('.social2').hover(
function () {
window.clearTimeout(timeout);
social2();
},
function () {
timeout = setTimeout(function() {
social1();
}, 5000);
}
);
__EDIT__
To manage a collection of timeouts (and intervals), you could use following snippet.
This will allow to clear any timeouts or intervals set anywhere in code, although, you have to set this snippet before setting any timeout or interval. Basically, before processing any javascript code or external script which uses timeout/interval.
JS:
;(function () {
window.timeouts = {},
window.intervals = {},
window.osetTimeout = window.setTimeout,
window.osetInterval = window.setInterval,
window.oclearTimeout = window.clearTimeout,
window.oclearInterval = window.clearInterval,
window.setTimeout = function () {
var args = _parseArgs('timeouts', arguments),
timeout = window.osetTimeout.apply(this, args.args);
window.timeouts[args.ns].push(timeout);
return timeout;
},
window.setInterval = function () {
var args = _parseArgs('intervals', arguments),
interval = window.osetInterval.apply(this, args.args);
window.intervals[args.ns].push(interval);
return interval;
},
window.clearTimeout = function () {
_removeTimer('timeouts', arguments);
},
window.clearInterval = function () {
_removeTimer('intervals', arguments);
},
window.clearAllTimeout = function () {
_clearAllTimer('timeouts', arguments[0]);
},
window.clearAllInterval = function () {
_clearAllTimer('intervals', arguments[0]);
};
function _parseArgs(type, args) {
var ns = typeof args[0] === "function" ? "no_ns" : args[0];
if (ns !== "no_ns")[].splice.call(args, 0, 1);
if (!window[type][ns]) window[type][ns] = [];
return {
ns: ns,
args: args
};
}
function _removeTimer(type, args) {
var fnToCall = type === "timeouts" ? "oclearTimeout" : "oclearInterval",
timerId = args[0];
window[fnToCall].apply(this, args);
for (var k in window[type]) {
for (var i = 0, z = window[type][k].length; i < z; i++) {
if (window[type][k][i] === timerId) {
window[type][k].splice(i, 1);
if (!window[type][k].length) delete window[type][k];
return;
}
}
}
}
function _clearAllTimer(type, ns) {
var timersToClear = ns ? window[type][ns] : (function () {
var timers = [];
for (var k in window[type]) {
timers = timers.concat(window[type][k]);
}
return timers;
}());
for (var i = 0, z = timersToClear.length; i < z; i++) {
_removeTimer(type, [timersToClear[i]]);
}
}
}());
How to use it:
Set timeout(s)/interval(s) as usual:
var test1 = setTimeout(function(){/**/, 1000);
var test2 = setTimeout(function(){/**/, 1000);
Then you could use to clear both:
clearAllTimeout(); // clearAllInterval(); for intervals
This will clear both timeouts (test1 & test2)
You can use some namespaces to clear only specific timers, e.g:
// first (optional) parameter for setTimeout/setInterval is namespace
var test1 = setTimeout('myNamespace', function(){/**/, 1000); // 'myNamespace' is current namespace used for test1 timeout
var test2 = setTimeout(function(){/**/, 1000); // no namespace used for test2 timeout
Again, clearAllTimeout(); will clear both timeouts. To clear only namespaced one, you can use:
clearAllTimeout('myNamespace'); // clearAllInterval('myNamespace'); for namespaced intervals
This will clear only test1 timeout
You could for some reason wish to delete non namespaced timeouts only. You could then use:
clearAllTimeout('no_ns'); // clearAllInterval('no_ns'); for non namespaced intervals only
This will clear only test2 timeout in this example
See jsFiddle DEMO
__END of EDIT__
Old post specific to opening question here:
You could try that:
var timeouts = [];
timeouts.push(setTimeout(function() {
social2();
}, 5000));
timeouts.push(setTimeout(function() {
social1();
}, 5000));
//etc...
function clearAllTimeouts(){
for(var i = 0, z = timeouts.length; i < z; i++)
clearTimeout(timeouts[i]);
timeouts = [];
}
UPDATED following David Thomas comment
var timeouts = {'social' : [], 'antisocial' : []};
//a social timeout
timeouts.social.push(setTimeout(function() {
social1();
}, 5000));
//an anti-social timeout
timeouts.antisocial.push(setTimeout(function() {
antisocial1();
}, 5000));
function clearTimeouts(namespace){
for(var i = 0, z = timeouts[namespace].length; i < z; i++)
clearTimeout(timeouts[namespace][i]);
timeouts[namespace] = [];
}
//usage e.g
clearTimeouts("social");
//Incase if you are looking for full fledged code
var dict = {};
function checkForIntervals(id){
var index = index;
var result = findOrAddProperty(id);
if(result.length != 0){
clearTimeoutsFor(id);
}
dict[id].push(setTimeout(function(){alertFunc(id,index);}, 60000));
};
// to clear specific area timeout
function clearTimeoutsFor(namespace){
for(var i = 0, z = dict[namespace].length; i < z; i++)
clearTimeout(dict[namespace][i]);
dict[namespace] = [];
}
to clear all timeouts
function clearAllTimeOuts(){
for (key in dict) {
for(var i = 0, z = dict[key].length; i < z; i++)
clearTimeout(dict[key][i]);
dict[key] =[];
}
};
function findOrAddProperty(str){
var temp = [];
for (key in dict) {
if(key == str){
if (dict.hasOwnProperty(key)) {
temp = dict[key];
break;
}
}
}
if(temp.length == 0){
dict[str] = [];
}
return temp;
};
function alertFunc(id,index) {
jQuery(document).ready(function($) {
do the ajax call here after 1 min
});
};
I am trying to get MatJax and Markdown work together, by using almost standard code I was able to get it working but now I am facing a weird issue. My WMD preview is updated only on alternate keystrokes...!!
The javascript to init WMD is as follow
Preview.Init();
(function() {
var converter1 = Markdown.getSanitizingConverter();
var editor1 = new Markdown.Editor(converter1);
converter1.hooks.chain("postConversion", function(text) {
Preview.CreatePreview();
return text;
});
editor1.hooks.set("insertImageDialog", function(callback) {
setTimeout(function() {
$('#uploadmodal').modal({
keyboard : true,
backdrop:false
});
fileCallback = callback
}, 500);
return true; // tell the editor that we'll take care of getting the image url
});
editor1.run();
})();
and
MathJAX integration is done by following code
var Preview = {
delay: 150, // delay after keystroke before updating
preview: null, // filled in by Init below
buffer: null, // filled in by Init below
timeout: null, // store setTimout id
mjRunning: false, // true when MathJax is processing
oldText: null, // used to check if an update is needed
Init: function () {
this.preview = document.getElementById("wmd-preview");
this.buffer = document.getElementById("MathBuffer");
},
SwapBuffers: function () {
var buffer = this.preview, preview = this.buffer;
this.buffer = buffer; this.preview = preview;
buffer.style.visibility = "hidden"; buffer.style.position = "absolute";
preview.style.position = ""; preview.style.visibility = "";
},
Update: function () {
if (this.timeout) {clearTimeout(this.timeout)}
this.timeout = setTimeout(this.callback,this.delay);
},
CreatePreview: function () {
Preview.timeout = null;
if (this.mjRunning) return;
var text = document.getElementById("wmd-preview").innerHTML;
if (text === this.oldtext) return;
this.buffer.innerHTML = this.oldtext = text;
this.mjRunning = true;
MathJax.Hub.Queue(
["Typeset",MathJax.Hub,this.buffer],
["PreviewDone",this]
);
},
PreviewDone: function () {
this.mjRunning = false;
this.SwapBuffers();
}
};
There is a demo page of the issue here http://easytha.com/question/demoQuestion