I have a content that will show when we scroll.
when the content show, user can close it. If user choose to close it and then refresh the page. Even user scroll up the page, the content will not show up until 10 minutes.
heres my code:
var popUp= document.getElementById("popup");
var closePopUp= document.getElementsByClassName('popup-close');
var halfScreen= document.body.offsetHeight/2;
var showOnce = true;
var delay;
function slideUp(){
popUp.style.maxHeight="400px";
popUp.style.padding="10px 20px";
popUp.style.opacity="1";
if(popUp.className==="closed"){
popUp.className="";
}
}
function slideDown(){
popUp.style.maxHeight="0";
popUp.style.padding="0 20px";
popUp.style.opacity="0";
// add class closed for cache
if(popUp.className===""){
popUp.className="closed";
localStorage.setItem('closed', 'true'); //store state in localStorage
}
}
I set the interval for user that close the content than refresh the page
// start interval
function startDelay() {
delay = setInterval(slideUp, 1000);
}
// clear interval
function clearDelay() {
window.clearTimeout(delay);
}
// check if cache heve class close
window.onload = function() {
var closed = localStorage.getItem('closed');
if(closed === 'true'){
popUp.className="closed";
}
}
here, I put 2 arguments for first time visit and multiple time
// show popup when scroll 50%
window.onscroll = function scroll(ev) {
// first time visited
if ((popUp.className==="closed" && window.innerHeight+window.scrollY) >= halfScreen && showOnce){
startDelay();
showOnce = false;
}
// same user multiple time visited the site
else if((popUp.className==="" && window.innerHeight+window.scrollY) >= halfScreen && showOnce){
slideUp();
showOnce = false;
}
};
// close button when click close
for(var i = 0; i<closePopUp.length; i++){
closePopUp[i].addEventListener('click', function(event) {
slideDown();
});
}
when I first time open the page, the content show up, and it gets closed class when I choose to close the content (it's correct). But after I scroll to top refresh the page, its show with interval (correct too).
problem:
1. if i refresh not on top of page, the content will show immediatly.
2. after i refresh and scroll and close the content. the content show again.
its like it read the function again? please help
Related
Hello,
can't find a code :x Can someone post, or explain how can i make a Popup after 10minutes of inactive ?
When member is inactive of 10minutes after Page is loaded, the members will get a Popup with some Buttons and Text
<div>
<p>Away from keyboard?</p>
<ul class="button">
<li>I'm Back!</li>
</ul>
</div>
var seconds = 0;
var timeoutCounter = setInterval(function(){
seconds++;
if(sec == 600) {
// do stuff to launch popup
clearInterval(timeoutCounter);
}
}, 1000);
$(document).mousemove(function (e) {
clearInterval(timeoutCounter);
seconds = 0;
setInterval(timeoutCounter);
});
$(document).keypress(function (e) {
clearInterval(timeoutCounter);
seconds = 0;
setInterval(timeoutCounter);
});
This basically runs every second - and if it's the 600th second, it quits after running your code.
Source for idle checking
Attach the events to the document object along with the setTimeout method to display the popup. One way to do it is
var popupTimer,
TIME_OUT = 600;
// function that displays the popup
function displayPopup() {
// display the popup here
}
// Set the timeout to display the popup
popupTimer = setTimeout(displayPopup, TIME_OUT);
// attch events to the document object
// you can add more events here based on
// what events you want to track
$(document).on('click change keypress', function() {
// clear the timeout whenever the event is handled
clearTimeout(popupTimer);
// Reset the timer
popupTimer = setTimeout(displayPopup, TIME_OUT);
});
So ive been trying to make automatic logout, but i cannot find a way to logout after like 10secs after the alertbox (alertbox asks if you wanna logout if you havent still left the site but are browsing for some information and dont wanna log out) shows up automatically. Basically i wanna make it automatically logout if you dont press anything on the alertbox after chosen time like 10secs.
Heres the code!
var refresh_rate = 5; // <-- In seconds, change to your needs
var reset_rate = 7; // <-- In seconds logs out after not pressing OK or cancel in automatic logout
var last_user_action = 0;
var has_focus = false;
var lost_focus_count = 0;
var focus_margin = 10; // If we lose focus more then the margin we want to refresh
function reset() {
last_user_action = 0;
console.log("Reset");
}
function windowHasFocus() {
has_focus = true;
}
function windowLostFocus() {
has_focus = false;
lost_focus_count++;
console.log(lost_focus_count + " <~ Lost Focus");
}
setInterval(function () {
last_user_action++;
refreshCheck();
}, 1000);
function refreshCheck() {
var focus = window.onfocus;
if ((last_user_action >= refresh_rate && !has_focus && document.readyState == "complete") || lost_focus_count > focus_margin) {
var answer = confirm("Session About To Timeout\n\n You will be automatically logged out.\n Confirm to remain logged in.")
if (answer){
refresh_rate = 10;
}
else{
window.location.reload(); // If this is called no reset is needed
reset(); // We want to reset just to make sure the location reload is not called.
}
}
}
I hope someone can help me with this problem!
You can't, if you use confirm (or alert or prompt, any of those relics of the 1990s). They bring the main JavaScript thread to a screeching halt (mostly, there's nuance around this now), meaning you can't do anything else (mostly).
To do this, you need to replace the confirm with a DOM element showing the message instead, which won't block the main JavaScript thread.
Hello,
can't find a code :x Can someone post, or explain how can i make a Popup after 10minutes of inactive ?
When member is inactive of 10minutes after Page is loaded, the members will get a Popup with some Buttons and Text
<div>
<p>Away from keyboard?</p>
<ul class="button">
<li>I'm Back!</li>
</ul>
</div>
var seconds = 0;
var timeoutCounter = setInterval(function(){
seconds++;
if(sec == 600) {
// do stuff to launch popup
clearInterval(timeoutCounter);
}
}, 1000);
$(document).mousemove(function (e) {
clearInterval(timeoutCounter);
seconds = 0;
setInterval(timeoutCounter);
});
$(document).keypress(function (e) {
clearInterval(timeoutCounter);
seconds = 0;
setInterval(timeoutCounter);
});
This basically runs every second - and if it's the 600th second, it quits after running your code.
Source for idle checking
Attach the events to the document object along with the setTimeout method to display the popup. One way to do it is
var popupTimer,
TIME_OUT = 600;
// function that displays the popup
function displayPopup() {
// display the popup here
}
// Set the timeout to display the popup
popupTimer = setTimeout(displayPopup, TIME_OUT);
// attch events to the document object
// you can add more events here based on
// what events you want to track
$(document).on('click change keypress', function() {
// clear the timeout whenever the event is handled
clearTimeout(popupTimer);
// Reset the timer
popupTimer = setTimeout(displayPopup, TIME_OUT);
});
I have a page which consists of ajax tabbed panel. Each tab uses same user control page. In those pages on button click event, I am placing the progressing image untill the page loads. This functionality is working only in one tab, but it is not working in another tabs.
Help me out in finding solution.
`<script type="text/javascript">
function ButtonClicked() {
// document.getElementById("formsubmitbutton").style.display = "none"; // to undisplay
document.getElementById("buttonreplacement").style.display = ""; // to display
return true;
}
var FirstLoading = true;
function RestoreSubmitButton() {
if (FirstLoading) {
FirstLoading = false;
return;
}
//document.getElementById("formsubmitbutton").style.display = ""; // to display
document.getElementById("buttonreplacement").style.display = "none"; // to undisplay
}
// To disable restoring submit button, disable or delete next line.
document.onfocus = RestoreSubmitButton;
`
I wrote a Jquery function that blacks out the screen after a certain amount of inactivity, creates a pop-up that allows the user to click a button to stay logged in, and logs them out (closing the application window) if they do not respond in time.
The environment is ASP.NET (VB). We don't technically use master pages, but we do have a parent page in which our header, footer and nav reside, and my Jquery code is called from that window, loaded via an IFrame.
I've got a function in the child window that reports activity (currently keydown, mousedown and blur) to the parent window, and resets the timer. My code seems to be working fine, except in one scenario. If the user is prompted with the timeout warning, and then they click the button to continue their session, if they take no action on the page (mouseclick, keydown, etc.) then the timeout code is not running a second time.
Here is my main jquery function:
function pop_init() {
// show modal div
$("html").css("overflow", "hidden");
$("body").append("<div id='popup_overlay'></div><div id='popup_window'></div>");
//$("#popup_overlay").click(popup_remove); // removed to make sure user clicks button to continue session.
$("#popup_overlay").addClass("popup_overlayBG");
$("#popup_overlay").fadeIn("slow");
// build warning box
$("#popup_window").append("<h1>Warning!!!</h1>");
$("#popup_window").append("<p id='popup_message'><center>Your session is about to expire. Please click the button below to continue working without losing your session.</center></p>");
$("#popup_window").append("<div class='buttons'><center><button id='continue' class='positive' type='submit'><img src='images/green-checkmark.png' alt=''/> Continue Working</button></center></div>");
// attach action to button
$("#continue").click(session_refresh);
// display warning window
popup_position(400, 300);
$("#popup_window").css({ display: "block" }); //for safari using css instead of show
$("#continue").focus();
$("#continue").blur();
// set pop-up timeout
SESSION_ALIVE = false;
window.setTimeout(popup_expired, WARNING_TIME);
}
Here is the code from the parent window:
<script language="javascript" type="text/javascript">
var timer = false;
window.reportChildActivity = function() {
if (timer !== false) {
clearTimeout(timer);
}
//SESSION_ALIVE = true;
timer = window.setTimeout(pop_init, SESSION_TIME);
}
</script>
Here is the code from the child window:
<script type="text/javascript">
$(document).ready(function() {
window.parent.reportChildActivity();
});
</script>
<script type="text/javascript">
$(document).bind("mousedown keydown blur", function() {
window.parent.reportChildActivity();
});
The last script runs in a file (VB.NET ascx file) that builds the header/menu options for every page in our system.
The last line in the pop_init function clearly should be re-starting the timer, but for some reason it doesn't seem to be working.
Thanks for any help and insight you may have.
Forgot to add my code for the session_refresh function:
function session_refresh() {
SESSION_ALIVE = true;
$(".buttons").hide();
$("#popup_message").html("<center><br />Thank you! You may now resume using the system.<br /></center>");
window.setTimeout(popup_remove, 1000);
$("#popup_window").fadeOut("slow", function() { $('#popup_window,#popup_overlay').trigger("unload").unbind().remove(); });
var timer = false;
window.reportChildActivity = function() {
if (timer !== false) {
clearTimeout(timer);
}
timer = window.setTimeout(pop_init, SESSION_TIME);
}
}
use this: http://www.erichynds.com/jquery/a-new-and-improved-jquery-idle-timeout-plugin/
You need to restart your timer after the user clicks the button.
Well, I seem to have fixed the problem by changing this:
var timer = false;
window.reportChildActivity = function() {
if (timer !== false) {
clearTimeout(timer);
}
timer = window.setTimeout(pop_init, SESSION_TIME);
}
to this:
if (timer !== false) {
clearTimeout(timer);
}
timer = window.setTimeout(pop_init, SESSION_TIME);
I didn't need to re-declare the reportChildActivity function as I was.