How can i clearInterval from a popup window - javascript

SOLUTION: (Can't post a solution on my own question for some reason...)
I found a solution to my problem by creating a function in my index file which I then called from my popup window.
index:
function clearRefreshStatusInterval() {
clearInterval(refreshStatusInterval);
refreshStatusInterval = setInterval(function(){
console.log("REFRESH");
},1000);
}
popup:
$(window).mousemove(function() {
window.opener.clearRefreshStatusInterval();
});
QUESTION:
I am trying to clear a setInterval-timer from mousemovement in a popup window. It works well in the index file.
This code is in my index file (does work):
var refreshStatusInterval = setInterval(function(){
refreshStatus();
},10000);
$(window).mousemove(function() {
clearInterval(refreshStatusInterval);
refreshStatusInterval = setInterval(function(){
refreshStatus();
},10000);
});
This code is in my popup window (does not work):
$(window).mousemove(function() {
window.opener.clearInterval(window.opener.refreshStatusInterval);
window.opener.refreshStatusInterval = window.opener.setInterval(function(){
window.opener.refreshStatus();
},10000);
});
The timer wont reset for me, anyone know how to do this?

Related

Call user defined jQuery function with JS

I use a jQuery window libray https://github.com/humaan/Modaal
which triggers events this way $("class of element").modaal({arg1, arg2,...});
--- I updated my question here to make it more general and used an iframe / Html instead of an external svg ---
To trigger an element e.g. in an external Html which is loaded within an iframe, I applied the following code to the iframe:
<iframe src="External.html" id="mainContent" onload="access()"></iframe>
which calls this function:
function access() {
var html = document.getElementById("mainContent").contentDocument.getElementById("IDofDIVelement");
html.addEventListener('click', function() {clicker();});
}
function clicker()
{
// console.log('hooray!');
$("#mainContent").contents().find("IDofDIVelement").modaal({});
//return false;
}
Actually it will only work on every second click. Any idea what I did not consider properly?
Best
You do not need to wait windows loading but iframe only:
$(function() {
$("#mainContent").bind("load",function(){
var myIframeElement = $(this).contents().find(".modaal");
myIframeElement.modaal({
content_source: '#iframe-content',
type: 'inline',
});
});
});
The reason why it did not work was that the iframe was not completely loaded, while jQuery tried to attach the function. As $(document).ready(function(){} did not work, the workaround was to initialize it with
$( window ).on( "load",function() {
$("#mainContent").contents().find("IDofDIVelement").modaal({});
});
This worked properly to attach the functionallity to an element within the iframe.
Actually modaal will vanish the envent handler after the overlay was opened and closed again.
So maybe someone wants to trigger an iframe element for modaal, too, here is a setup which would solve this issue.
(It can be optimised by #SvenLiivaks answer):
$(window).on("load", function() {
reload();
});
function reload() {
var length = $("#iframeID").contents().find("#IDofDIVelement").length;
// The following check will return 1, as the iframe exists.
if (length == 0) {
setTimeout(function() { reload() }, 500);
} else {
$("#iframeID").contents().find("#IDofDIVelement").modaal({
content_source: '#modalwrapper',
overlay_close: true,
after_close: function reattach() {
reload();
}
});
}
}

<div> value not updating in html page

I am using jquery to auto update a part of the HTML page. Following is the code
$(document).ready( function() {
$('#auto').load("static/l.txt");
refresh();
});
function refresh() {
setTimeout(function() {
$('#auto').load("static/l.txt");
refresh();
}, 1000);
}
The id of the HTML div tag to be updated is auto
The file static/l.txt is continuously being updated by another python program.
But when I load the html page , the div only gets updated once and does not update the value until and unless I open the developers console on the browser.
I am hosting the web page using Flask in python
How about trying this?
var counter =0 ;
$(document).ready( function() {
$('#auto').val("starting");
refresh();
});
function refresh() {
setInterval( function() {
counter ++;
$('#auto').val(counter);
}, 1000);
}
Use a callback to know, when the content is actually loaded and move the function definition in the ready block, also.
$(document).ready(function() {
function loadData() {
$('#auto').load('static/l.txt', function(completed) {
setTimeout(loadData, 1000);
});
}
loadData();
});

clearInterval doesn't work if is in click jquery event?

I want to use clearInterval but I don't know why doesn't work.
var orologio_real; //global variable
$(document).ready(function(){
orologio(1);
$('#change-time').on('click', function(){
clearInterval(orologio_real);
orologio(0);
});
});
function orologio (arg){
orologio_real= setInterval(function(){
alert(arg)
}, 1000);
}
What I don't understand is why if I click on div, clearInterval doesn't work
I think it is a silly mistake. You are setting the time interval all over again inside the click handler. I commented it out, and increased the interval a little so that you get time to click the button
var orologio_real; //global variable
$(document).ready(function(){
orologio(1);
$('#change-time').on('click', function(){
clearInterval(orologio_real);
//orologio(0); //this was the issue
});
});
function orologio (arg){
orologio_real= setInterval(function(){
console.log(arg);
alert(arg);
}, 3000);
}

Show a sub-menu using JQuery

I need some help making a sub-menu appear within 2s after the page loads instead of when the user clicks on it. I'm using JQuery. That file is the core of the website. I need it to stay opened.
Here's the code I have at the moment, I tried to change that on.Click event but it didn't work.
The handleSidenarAndContentHeight(); function resizes the menu items after the sub-menu appears.
jQuery('.page-sidebar li > a').on('click', function (e) {
if ($(this).next().hasClass('sub-menu') === false) {
return;
}
var parent = $(this).parent().parent();
parent.children('li.open').children('a').children('.arrow').removeClass('open');
parent.children('li.open').children('a').children('.arrow').removeClass('active');
parent.children('li.open').children('.sub-menu').slideUp(350);
parent.children('li').removeClass('open');
parent.children('li').removeClass('active');
var sub = jQuery(this).next();
if (sub.is(":visible")) {
jQuery('.arrow', jQuery(this)).removeClass("open");
jQuery(this).parent().removeClass("active");
sub.slideUp(350, function () {
handleSidenarAndContentHeight();
});
} else {
jQuery('.arrow', jQuery(this)).addClass("open");
jQuery(this).parent().addClass("open");
sub.slideDown(350, function () {
handleSidenarAndContentHeight();
});
}
e.preventDefault();
});
Working with a 2 second timeout should do the trick!
jQuery(document).ready(function(){
// Open Parent here
setTimeout(function(){
// Open Child here
}, 2000)
});
There is a simple javascript function you can use, the setTimeout function.
The code follows like this :
setTimeout(function() {yourFunctyion();}. delayTimeInMiliseconds);
This will call your function after the number of second(in ms).
There is also a plugin I've used. It has oneTime and everyTime methods.
jQuery timers plugin

Fire javascript (lightbox) once per session

Hey all I have a quick javascript question! Frustrated trying to get it sorted.... right now my modal div shows after 10 seconds which is right, but I want to only show it ONCE per session. Here's my current code:
<script type="text/javascript">
$(function() { // wait for the DOM
setTimeout(function () {
var $modal = $('#free-awesome'); // your selector; cache it; only query the DOM once!
$modal.modal('show'); // show modal; this happens after 10 seconds
setTimeout(function () {
$modal.modal('hide'); // hide modal;
}, 50000);
}, 10000);
});
</script>
Any ideas how I can adapt that javascript to show once per visit/session?
I'm quite new to javascript so if you could let me know exactly what to swap the above out for that'd be great!
Thanks in advance
You can use the session storage:
if(!sessionStorage.hidemodal) {
// your code ...
sessionStorage.hidemodal = true;
}

Categories