I need to push my javascript code to new opened page (preferred to console.log)
Here is my function:
(function () {
window.onbeforeunload = function () {
setInterval(function () {
window.location.href = "http://mylink";
}, 1000)
};
});
and I need to run it in new page:
<a href="javascript:(function () {
window.onbeforeunload = function () {
setInterval(function () {
window.location.href=http://mylink;
},1000)
};
});">click</a>
Also I tryed to add the code like this? but it doesn't work too:
<a href="javascript: console.log('(function (){
window.onbeforeunload = function () {
setInterval(function () {
window.location.href=http://mylink;
},1000)
};
});')">click</a>
Could yu help me please
setInterval would not work inside onbeforeunload. It will add event to queue and than simply exit page and never execute.
Edit:
You will see this if you modify code like this:
window.onbeforeunload = function () {
setInterval(function () {
console.log('interval execution');
window.location.href = "http://mylink";
}, 1000)
};
There will be no output on console log.
Related
This script has been added dynamically. It has a timeout function, means that it runs every 5 seconds.
dynamicjs.php
$(document).ready(function(){
(function( $ ){
$.fn.baslatmesajlari = function() {
setInterval(function(){
console.log("I am running");
}, 5000);
return this;
};
})( jQuery );
});
$("body").baslatmesajlari();
I load this function to a div using;
$("#temporarycontent").load("dynamicjs.php");
And when I do
$("#temporarycontent").empty();
The script is still running. How can I stop it run ?
You can't, you need a handle to the intervalId returned by the setInterval function or provide an API on the plugin in order to destroy it and cleanup after itself. The easiest way would be to attach the state of the plugin to the DOM element on which it was applied.
(function ($) {
const PLUGIN_NAME = 'baslatmesajlari';
function Plugin($el) {
this.$el = $el;
this._timerId = setInterval(function () {
console.log('running');
}, 2000);
}
Plugin.prototype.destroy = function () {
this.$el.removeData(PLUGIN_NAME);
clearInterval(this._timerId);
};
$.fn[PLUGIN_NAME] = function () {
if (!this.data(PLUGIN_NAME)) this.data(PLUGIN_NAME, new Plugin(this));
return this;
};
})(jQuery);
$(function () {
var plugin = $('#plugin').baslatmesajlari().data('baslatmesajlari');
$('#destroy').click(function () {
plugin.destroy();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="plugin"></div>
<button id="destroy">Destroy plugin</button>
You must have a reference to the interval id, then, when you want to stop it's execution, call clearInterval(the_id)
let interval = null //this is the variable which will hold the setInterval id
$(document).ready(function () {
(function ($) {
$.fn.baslatmesajlari = function() {
interval = setInterval(function () {
console.log('I am running')
}, 5000)
return this
}
})(jQuery)
})
$("body").baslatmesajlari()
And then:
$("#temporarycontent").empty();
clearInterval(interval) // it should stop the function.
Hope it helps.
I have this javascript code:
var logout_warning = 6000;
$(document).ready(function () {
window.setTimeout(function () {
$('#logout_warning').reveal();
}, logout_warning)
});
$(document).ready(function () {
window.setTimeout(function () {
alert("logout");
//location.href = "/login/logout.php?url=/index.php?r=inactivity";
}, logout_warning*2)
});
that displays a warning after 6000ms then redirects to a URL to logout a user after 12000ms
I have this a href link:
Stay Logged In
which i want to reset the time on click to stop the user from being logged out, i created this function but im not sure what to put inside it
function ResetLogoutTimer() {
}
try this:
var log_outer = window.setTimeout(function () {
alert("logout");
//location.href = "/login/logout.php?url=/index.php?r=inactivity";
}, logout_warning*2)
function ResetLogoutTimer() {
window.clearTimeout(log_outer);
}
Sorry for poor English, its my second language.
You should try:
var timeoutID = window.setTimeout(function () {
$('#logout_warning').reveal();
}, logout_warning)
and than
function ResetLogoutTimer() {
window.clearTimeout(timeoutID);
}
The docs for it https://developer.mozilla.org/en-US/docs/Web/API/Window.setTimeout
One last thing, do not use w3c schools for learning javascript (the docs are not complete , instead use mdn site https://developer.mozilla.org/pl/docs/JavaScript
I'm new to jQuery and I need a bit of help. I'm using this jQuery script as a testimonial rotator and it works like a charm but I just need to make one small tweak. I need it to be able to pause on hover and then restart when the mouse leaves the div. How can I do this?
This is the script I'm using:
function fadeMyContent() {
$(".testimonial:first").fadeIn(1000).delay(3000).fadeOut(1000,
function() {
$(this).appendTo($(this).parent());
fadeMyContent();
});
}
fadeMyContent();
});
Here is a JSFiddle.
There is a plugin that will provide all the functionality you need and be more reliable called jQuery Cycle 2.
It provides a 'pause-on-hover' option when initialising it.
change the definition of fadeMyContent (also called as destroying function) on hovering on ul#testimonial-rotator and on hover-out change it to old definition again. I have used setTimeout in place of delay because delay is not cancellable.
$(document).ready(function () {
var fadeMyContent;
var t
fadeMyContent = function () {
$(".rotate:first").fadeIn(1000)
t = setTimeout(function () {
$(".rotate:first").fadeOut(1000,
function () {
$(this).appendTo($(this).parent());
fadeMyContent();
});
}, 3000)
}
var fadeMyContentDummy = function () {
$(".rotate:first").fadeOut(1000,
function () {
$(this).appendTo($(this).parent());
fadeMyContent()
});
}
fadeMyContent();
$('#testimonial-rotator').hover(function (e)
{
window.clearTimeout(t)
$('.rotate:first').clearQueue()
fadeMyContent = function () {
return false;
}
},
function (e)
{
fadeMyContent = function () {
$(".rotate:first").fadeIn(1000)
t = setTimeout(function () {
$(".rotate:first").fadeOut(1000,
function () {
$(this).appendTo($(this).parent());
fadeMyContent();
});
}, 3000)
}
fadeMyContentDummy()
})
});
DEMO
This is what i want: Timeout when i hover out of a div, cancel if i hover on top of the div again.
The code works if i remove the cancelfunction. So showing and hiding the div works fine.
This is my code:
$(document).ready(function ()
{
var timeoutID;
function clearAlert()
{
window.clearTimeout(timeoutID);
}
if ($('.txtVote').text() == "Avgi stemme")
{
$('#starInfo').hover(
function ()
{
clearAlert();
$('#CarDetailsButtons').css('right', '10px');
$('#voteStars').show();
},
function ()
{
console.log("hide iniated");
timeoutID = window.setTimeout(hideStars, 2000);
console.log("hide executed");
});
}
function hideStars()
{
console.log("hideStars ran");
$('#CarDetailsButtons').css('right', '45px');
$('#voteStars').hide();
}
});
And, this is my error:
Uncaught SyntaxError: Unexpected token ILLEGAL
which appears on the line right after window.clearTimeout(timeoutID);
Anyone able to see what I'm doing wrong? :)
EDIT: *WORKS*
So, it seems i had some kind of copy paste bug. I wrote the function clearAlert manually, just like it was before, and it works now.
Thanks for all the input!
try this:
var that = this;
that.timeoutID = null;
...
that.timeoutID = ...
OR
you have to declare var timeoutID = null; global. So you have the var in a gloabl context and not within the function-context of $(document).ready.
the best solution ist to write a little js-class with the timer in it. so you have no global conflicts an it works.
greetings!
I would suggest you to move your functions outside of doc ready like this:
function hideStars()
{
console.log("hideStars ran");
$('#CarDetailsButtons').css('right', '45px');
$('#voteStars').hide();
}
function clearAlert()
{
window.clearTimeout(timeoutID);
}
$(document).ready(function ()
{
var timeoutID;
if ($('.txtVote').text() == "Avgi stemme")
{
$('#starInfo').hover(
function ()
{
clearAlert();
$('#CarDetailsButtons').css('right', '10px');
$('#voteStars').show();
},
function ()
{
console.log("hide iniated");
timeoutID = window.setTimeout(hideStars, 2000);
console.log("hide executed");
});
}
});
I have the following code partially working. I am newbie in javascript so please don't blame me if my approach is not the best.
window.url_var = "status.htm";
window.elem = "#e1";
function menu_item(){
$(window.elem).click(function (event)
{
$("#divTestArea1").load(window.url_var);
});
}
$("#e1").click(function (event)
{
event.preventDefault();
window.url_var = "demo2.txt";
window.elem = "#e1";
$("#divTestArea1").load(window.url_var);
auto_refresh = setInterval(menu_item(), 5000);
});
$("#e2").click(function (event)
{
event.preventDefault();
window.url_var = "status.htm";
window.elem = "#e2";
$("#divTestArea1").load(window.url_var);
auto_refresh = setInterval(menu_item(), 5000);
});
$("#e3").click(function (event)
{
event.preventDefault();
window.url_var = "form.htm";
window.elem = "#e3";
clearInterval(auto_refresh);
$("#divTestArea1").load(window.url_var);
});
jQuery(document).ready(function() {
$("#divTestArea1").load(window.url_var);
auto_refresh = setInterval(menu_item(), 5000);
});
Whenever I click elements e1 and e2, the setInterval works as expected and as soon as I click element e3, the element cease to be reloaded.
That's the behavior I want so far. But I also wants to start the setinterval again if e1 or e2 get's again clicked.
the last is what it's not working on the above code.
I will appreciate if you could point me in the right direction.
I have come to this code after seeing some of the answers to my original question (thanks to everyone). To clarify my original idea, I need to update some items on my web page on a regular basics but the content can be change with some menu and also some of the contents like a form should not be updated.
window.url_var = "demo2.txt";
var auto_refresh = null;
function setRefresh() {
var self = this;
this.bar = function() {
if(window.url_var != ""){
$("#divTestArea1").load(window.url_var);
auto_refresh = setTimeout(function() { self.bar(); }, 5000);
}
}
this.bar();
}
$("#e1").click(function (event)
{
event.preventDefault();
window.url_var = "demo2.txt";
setRefresh();
});
$("#e2").click(function (event)
{
event.preventDefault();
window.url_var = "status.htm";
setRefresh();
});
$("#e3").click(function (event)
{
event.preventDefault();
window.url_var = "form.htm";
$("#divTestArea1").load(window.url_var);
window.url_var = "";
});
$(document).ready(function() {
setRefresh();
});
Try using 2 different variables and clearing all if needed. This is: auto_refresh1 and auto_refresh2. Each time you call setinterval, it creates a new timer with a new id. You are overwriting auto_refresh variable and the timer before that will still fire.
Or you can store the setinterval in a hash object and run through and clear them all.
I'm unclear as to what exactly it is that you're trying to do here. Nevertheless, I've rewritten your code a bit to make some improvements (and fix one glaring bug in your code involving the setInterval calls).
var url_var = "status.htm",
elem = "#e1",
$destination = $("#divTestArea1"),
auto_refresh;
function menu_item() {
$(elem).bind("click", function (e) {
$destination.load(url_var);
});
}
function load() {
$destination.load(url_var);
}
function set(url, id) {
url_var = url;
elem = id;
}
function setRefresh() {
return setInterval(menu_item, 5000);
}
function handleClick(e) {
e.preventDefault();
set(e.data.url, e.data.id);
load();
auto_refresh = setRefresh();
}
$("#e1").on("click", {
url: "demo2.txt",
id: "#e1"
}, handleClick);
$("#e2").on("click", {
url: "status.htm",
id: "#e2"
}, handleClick);
$("#e3").on("click", function (e) {
e.preventDefault();
set("form.htm", "#e3");
clearInterval(auto_refresh);
load();
});
$(document).ready(function () {
load();
auto_refresh = setRefresh();
});
I'm guessing that maybe those setInterval calls should actually be setTimeout calls? Why would you want to bind a "click" event handler over and over again?
EDIT #1: Switched to jQuery's currently preferred on method from the bind method, included use of event data parameter to further abstract event handling code.