disable javascript running on pressing the button - javascript

I am using javascript for page refresh.
put a new button and
I want this refresh canceled when I press the button.
how can I do it.
<script type="text/javascript">
function waitfor() {
window.location.reload();
}
setInterval("waitfor()", 10000);
</script>

the setInterval function returns an ID, you can clear the interval using that ID:
<script type="text/javascript">
function waitfor() {
window.location.reload();
}
var intervalID = setInterval("waitfor()", 10000);
var btn = document.getElementById("myButton");
btn.addEventListener("click", function() {
clearInterval(intervalID);
});
</script>

get the button and make event listener when making click on the button the function will run
this function will use clearInterval() function to stop setInterval
<script type="text/javascript">
document.getElementById("stop").addEventListener("click", stopInterval);
function waitfor() {
window.location.reload();
}
var timer = setInterval(waitfor, 2000);
function stopInterval() {
// To cancel an interval, pass the timer to clearInterval()
clearInterval(timer);
}

$(document).ready(function () {
$("button").click(function () {
$("td").remove();
const panorama = new google.maps.StreetViewPanorama(
document.getElementById("map2"),
{
position: { lat: <%#Eval("Latitude").ToString().Replace(",",".") %> , lng: <%#Eval("Longtitude").ToString().Replace(",",".") %> },
addressControlOptions: {
position: google.maps.ControlPosition.BOTTOM_CENTER,
},
linksControl: true,
panControl: true,
enableCloseButton: true,
}
);
});
});

Related

popup close after back button is clicked

I am trying to achieve that if popup open and user cancel it and press back it should not again open popup inside it should get back!
<script>
window.onload = function() {
setTimeout(function() {
window.open( "#popup_flight_travlDil3" ,"_self")
}, 1000);
}
</script>
You can use sessionStorage
window.addEventListener("DOMContentLoaded", function() { // or $(function() { ... in jQuery
const popped = sessionStorage.getItem("popped");
if (popped) return;
setTimeout(function() {
window.open("#popup_flight_travlDil3", "_self")
sessionStorage.setItem("popped",true)
}, 1000);
})

Run a certain script JS after x seconds that the page is loaded

I have this script:
<script>
var Webflow = Webflow || [];
Webflow.push(function() {
MemberStack.onReady.then(function(member) {
if(member.memberPage){
window.location.replace(member.memberPage);
}else{
setTimeout(function() { location.reload(true); }, 3000);
}
})
});
</script>
I would like this script to run after 5 seconds after the page loads, how could it be solved?
How about window.onload along with setTimeout ?
Example:
window.onload = function() {
setTimeout(function () {
// Do stuff here
}, 5000);
}
or, you may also use event listeners
function delayAndExecute() {
setTimeout(function () {
// Do stuff here
}, 5000);
}
// Everything but IE
window.addEventListener("load", function() {
delayAndExecute();
}, false);
// IE
window.attachEvent("onload", function() {
delayAndExecute();
});
<script>
var Webflow = Webflow || [];
window.onload = function () {
setTimeout(function () {
Webflow.push(function () {
MemberStack.onReady.then(function (member) {
if (member.memberPage) {
window.location.replace(member.memberPage);
} else {
setTimeout(function () { location.reload(true); }, 10);
}
})
});
}, 5000);
}
</script>
So i I tried to do this but the script repeats itself every 5 seconds without taking setTimeout (function () {location.reload (true);}, 10)into consideration; I would like the script to start only the first time in 5 seconds later loading the script
5 seconds after window.onload you are pushing a function into the webflow Array.
But you are never calling it. Add webflow[0](); to your code;
var Webflow = Webflow || [];
window.onload = function () {
setTimeout(function () {
Webflow.push(function () {
MemberStack.onReady.then(function (member) {
if (member.memberPage) {
window.location.replace(member.memberPage);
} else {
setTimeout(function () { location.reload(true); }, 10);
}
})
});
webflow[0]();
}, 5000);
}

make realtime timer using flipclock

I want to make realtime timer using flipclock. I have code for that but not working properly. In Timer when start button click timer will be started in all tabs of chrome(realtime) and when stop button click timer will be stopped in all tabs. In page refresh if timer already started then started and if stopped then stopped.
Code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js"></script>
<script>
var socket = io.connect('//' + location.host + ':7878');
// var autostart;
var clock;
$(document).ready(function() {
clock = $('.clock').FlipClock(localStorage.getItem("timer") ? localStorage.getItem("timer") : 0, {
clockFaceOptions: {
autoStart: false
},
onStart: function() {
// autostart = true;
socket.emit('socket_timer', clock.getFaceValue());
},
onStop: function() {
// autostart = false;
},
onInterval: function () {
console.log(clock.getFaceValue());
localStorage.setItem("timer", clock.getFaceValue());
// socket.emit('socket_timer', clock.getFaceValue());
}
});
socket.on('server_socket_timer',function(data) {
clock.setFaceValue(data);
clock.start();
});
socket.on('server_clock_stop', function () {
clock.stop();
});
$('#start').click(function () {
clock.start();
});
$('#end').click(function () {
clock.stop();
socket.emit('clock_stop');
});
});
</script>
Please help me.
Thanks in advance!

Stopping a timer

I have this JSFiddle that I am working on, and when my mouse leaves the textarea, it closes. But, I can't find a way to cancel this timer if I hover back over it. I've even tried some examples from here. This is the code that closes the text box --
function close() {
setTimeout(function() {
$(Img).css("transform", "rotateX(0deg)");
$(Txt).css("transform", "rotateX(90deg)");
}, 1000);
}
$(Txt).on("mouseleave", function() {
close();
$(Txt).blur();
});
The link you posted from W3Schools has exactly what you need...
setTimeout() returns a reference value, which you can pass to clearTimeout() later to cancel the timer.
var timerID; //set outside the function
function close() {
timerID = setTimeout(function() {
$(Img).css("transform", "rotateX(0deg)");
$(Txt).css("transform", "rotateX(90deg)");
}, 1000);
}
$(Txt).on("mouseleave", function() {
close();
$(Txt).blur();
});
//somewhere else do this...
clearTimeout(timerID);
setTimeout function returns you the handler which you can later use to reset the timer.
For example,
var myVar;
function myFunction() {
myVar = setTimeout(function(){ alert("Hello") }, 3000);
}
function myStopFunction() {
clearTimeout(myVar);
}
Have you tried:
var myTimeout;
function close() {
myTimeout = setTimeout(function() {
$(Img).css("transform", "rotateX(0deg)");
$(Txt).css("transform", "rotateX(90deg)");
}, 1000);
}
$(Txt).on("mouseleave", function() {
close();
$(Txt).blur();
}).on("mouseenter", function() {
clearTimeout(myTimeout);
});

Stop timer on hover

I'm not a JS coder my any means. I know enough to make things do what I want, but couldn't code from scratch. My issue is:
We have a shopping cart that when you add a product the cart shows itself for 4 secs unless the customer hovers over the cart. I can't seem to get it to stop the timeout when the cursor is hovered over it.
$(document).ready(function () {
setTimeout(function () { $('#ctl00_ctl00_ctlHeader_divOrderProducts').hide(); }, 4000);
});
Store the return of setTimeout() in a variable, and use that to clearTimeout():
// t is a global scope variable.
// Probably a good idea to use something better than 't'
var t;
$(document).ready(function () {
// Store the return of setTimeout()
t = setTimeout(function () { $('#ctl00_ctl00_ctlHeader_divOrderProducts').hide(); }, 4000);
});
$('cart-selector').hover(function() {
if (t) {
// Call clearTimeout() on hover()
clearTimeout(t);
}
});
You need to set your timer to a variable:
var timer1 = setTimeout(function () { ... })
then use:
clearTimeout(timer1)
You need to save the return value of setTimeout() so you can later use it with clearTimeout(). One way to that is like this:
$(document).ready(function () {
var hideTimer = setTimeout(function () {
$('#ctl00_ctl00_ctlHeader_divOrderProducts').hide();
}, 4000);
$('#ctl00_ctl00_ctlHeader_divOrderProducts').hover(function() {
if (hideTimer) {
clearTimeout(hideTimer);
hideTimer = null;
}
});
});
If you want to re-enable the timer when the mouse leaves the cart again (assuming #ctl00_ctl00_ctlHeader_divOrderProducts is the cart), you can do so like this:
$(document).ready(function () {
var hideTimer;
function delayHideCart() {
if (!hideTimer) {
hideTimer = setTimeout(function () {
$('#ctl00_ctl00_ctlHeader_divOrderProducts').hide();
}, 4000);
}
}
delayHideCart();
$('#ctl00_ctl00_ctlHeader_divOrderProducts').hover(function() {
if (hideTimer) {
clearTimeout(hideTimer);
hideTimer = null;
}
}, function() {
delayHideCart();
});
});
This should do it:
$(document).ready(function () {
var timeout = setTimeout(function () { $('#ctl00_ctl00_ctlHeader_divOrderProducts').hide(); }, 4000);
$('#ctl00_ctl00_ctlHeader_divOrderProducts').mouseover(function() {
clearTimeout(timeout);
});
});
You save the timeout as a variable and then call clearTimeout when you mouseover the cart and pass in that timeout.
var timer = window.setTimeout(function () {
$('#ctl00_ctl00_ctlHeader_divOrderProducts').hide();
if(someCondition)clearTimeout(timer);
}

Categories