I have some JavaScript to control browser window change, if the user change the tab or window a JavaScript countdown is reseted.
But in my content have a iframe then need be accessed and the countdown can't be reseted during the access.
If the user click on the iframe content the countdown is reseted, but its not can happen.
How can I control this?
Above my script:
<script type="text/javascript">
var isActive;
var g_timer = null;
var numero = 90;
window.onfocus = function () {
isActive = true;
};
window.onblur = function () {
isActive = false;
};
setInterval(function () {
window.isActive ? decCount() : resetCount();
}, 1000);
function decCount(){
if(numero > 0){
document.getElementById('timers').innerHTML = --numero;
}
}
function resetCount(){
numero = 91;
clearTimeout(g_timer);
startTimer();
}
function startTimer() {
g_timer = window.setTimeout(function() {
window.location.href = '/office/tasks/secure/';
}, 92000);
}
function timersfocus(){
$('#timers').focus();
}
</script>
You can use blur() event from jquery
$(window).blur(function() {
//your code here when window/tab changes
});
Related
I have tried this before and it worked well but here i dont know...
<div onclick="choose(this)">
<div class="choose">
<button><a>click</a></button>
</div>
</div>
my JavaScript:
function choose(obj) {
obj = obj || document.activeElement;
var res_item = obj.querySelector(".choose");
res_item.classList.add("choosed_item");
var close = obj.querySelector(".choose button a");
close.addEventListener("click", function closemodal() {
if (res_item.classList.contains("choosed_item")) {
res_item.classList.remove("choosed_item");
}
});
}
choose and choosed_item have custom style
This is strange, but if i change remove to add and choose another class it works well !
The event is not updated because its child of onclick function. Thats why I integrated an interval. That will help to update the eventlistener:
function choose(obj) {
obj = obj || document.activeElement;
var interval;
var res_item = obj.querySelector(".choose");
res_item.classList.add("choosed_item");
var close = obj.querySelector(".choose button a");
close.addEventListener("click", function closemodal() {
if (res_item.classList.contains("choosed_item")) {
interval = setInterval(function () {
res_item.classList.remove("choosed_item");
stopInterval();
}, 0);
function stopInterval() {
clearInterval(interval);
}
}
});
}
Hope I could help!
I am using articulate.js(http://www.jqueryscript.net/demo/Lightweight-jQuery-Based-Text-To-Speech-Engine-Articulate-js/) to read content from page and speak it. It is working fine, just not works if it is speaking something and I have press tab then it stops but not reads tab selected content.
some pre-define functions
<script>
function speak(obj) {
$(obj).articulate('speak');
};
function pause() {
$().articulate('pause');
};
function resume() {
$().articulate('resume');
};
function stop() {
$().articulate('stop');
};
</script>
what I have tried
<script>
$(document).ready(function() {
var counter = 0;
setTimeout(function(){
counter +=1;
if (counter == 1){
explode();
}
},1000);
function explode(){
//$('body').articulate('speak'); // Default for play whole content
$('h1').articulate('speak');
}
$('body').keyup(function (e) {
$().articulate('stop');
if (e.which == 9) { // on tab press start speaking selected element
var i=document.activeElement.id;
$('#'+i).articulate('pause').articulate('stop').articulate('speak');
}
else{ // trying to speak what key has been pressed except tab, but not working
var i=document.activeElement.id;
$('#'+i).val().articulate('speak');
}
});
});
</script>
I am also trying to make it audible(to speak keypress) on text box, which is not working
I have make some changes now it is working, but it has certain limitation like it not reads backspace, ctrl, space etc but speak a to z,1 to 0, very well. please improve it
<script>
$(document).ready(function() {
var counter = 0;
setTimeout(function(){
counter +=1;
if (counter == 1){
explode();
}
},1000);
function explode(){
//$('body').articulate('speak'); // Default for play whole content
$('h1').articulate('speak');
}
$('body').keyup(function (e) {
var speaking = $().articulate('isSpeaking');
var paused = $().articulate('isPaused');
// $().articulate('stop');
if (e.which == 9) {
if (speaking) {
$().articulate('pause');
$().articulate('stop');
}
var check =0;
setTimeout(function(){
check +=1;
if (check == 1){
comeback();
}
},1000);
function comeback() {
var i=document.activeElement.id;
$('#'+i).articulate('speak');
}
}
else{
var i=document.activeElement.id;
var m=0;
setTimeout(function () {
m+=1;
if(m==1){
magic();
}
},500);
function magic() {
var tempval=$('#'+i).val();
var lastChar = tempval.substr(tempval.length - 1);
var ht ='<div>'+lastChar+'</div>';
$(ht).articulate('speak');
}
}
});
});
</script>
i created a countdown feature where it only counts if the user is in the current window of the browser, and it works very well, the only problem is when i insert my code in angularjs controller. It stops working, above i leave my code to everybody have a idea what is wrong.
js:
var span = angular.element('#count');
var counter = 30;
var timer;
var startTimer = function() {
// do nothing if timer is already running
if (timer) return;
timer = setInterval(function() {
counter--;
if (counter >= 0) {
span.innerHTML = counter;
}
// Display 'counter' wherever you want to display it.
if (counter === 0) {
alert('this is where it happens');
stopTimer();
}
}, 1000);
};
var stopTimer = function() {
clearInterval(timer);
timer = null;
};
var onBlur = function() {
stopTimer();
};
var onFocus = function() {
startTimer();
};
var onLoad = function() {
startTimer();
};
angular.element(window).load(onLoad);
angular.element(window).blur(onBlur);
angular.element(window).focus(onFocus);
html:
<a class="btn btn-medium btn-orange" href="">
In<span id="count">30</span></a>
Don't use non angular functions like setTimeout or setInterval inside angular code. These functions won't be part of the digest cycle and your view won't change.
Take a look at this example for creating a timer with angular.
https://codeforgeek.com/2014/09/refresh-div-angularjs-interval/
This question already has answers here:
How can I use setInterval and clearInterval?
(5 answers)
Closed 8 years ago.
http://jsfiddle.net/x5MY8/2/
HTML
<div id="easy">easy</div>
<div id="hard">hard</div>
JS
function test(mode) {
var asd = this;
this.mode = mode;
setInterval(function () {
alert(asd.mode);
}, 1000);
}
$(document).ready(function () {
$('#easy').on('click', function () {
var stuff = new test('easy');
});
$('#hard').on('click', function () {
var stuff = new test('hard');
});
});
Upon pressing the easy button, an event launches that alerts easy every second. If I press hard afterwards, it will start another event, and it will alert easy, hard, easy, hard.., but I want it to alert only what was pressed at the moment, so I have to clear the previous interval somehow. How can I do that? Somehow, I need to call clearInterval when a button is pressed on the other object, but I don't really know how to.
http://jsfiddle.net/x5MY8/3/
You need to store and clear the interval like so
var interval;
function test(mode) {
var asd = this;
this.mode = mode;
if (interval) {
clearInterval(interval);
}
interval = setInterval(function () {
alert(asd.mode);
}, 1000);
}
Store it in a variable:
var interval = setInterval(function(){
//your code
},1000);
Now, you can clear using clearInterval:
clearInterval(interval);
clear the value when every clicked
var clear=0;
function test(mode) {
var asd = this;
this.mode = mode;
clear=setInterval(function () {
alert(asd.mode);
}, 1000);
}
$(document).ready(function () {
$('#easy').on('click', function () {
clearInterval(clear);
var stuff = new test('easy');
});
$('#hard').on('click', function () {
clearInterval(clear);
var stuff = new test('hard');
});
});
i currently am using the below javascript code below,
<script type="text/javascript">
function PrintWindow()
{
window.print();
CheckWindowState();
}
function CheckWindowState()
{
if(document.readyState=="complete")
{
window.close();
}
else
{
setTimeout("CheckWindowState()", 2000)
}
}
PrintWindow();
//window.onfocus = function() { window.close(); }
// Trying to auto refresh the page after 3 seconds of no use.
function setIdle(cb, seconds) {
var timer;
var interval = seconds * 1000;
function refresh() {
clearInterval(timer);
timer = setTimeout(cb, interval);
};
$(document).on('keypress, click', refresh);
refresh();
}
setIdle(function() {
location.href = location.href;
}, 3);
</script>
My original question was how to go home when the print box was finished but was told this was impossible, so i am now wondering how to auto refresh the page after so many seconds have passed, i have added in code to do this but it is not working
i have now managed to fix it, if any one is wondering :
var timer = null;
function goAway() {
clearTimeout(timer);
timer = setTimeout(function() {
window.location = 'http://localhost:8080/fileuploadWithPreview';
}, 5);
}
window.addEventListener('mousemove', goAway, true);
goAway(); // start the first timer off
This when the window is closed takes me to the home page so it is possible to do