I have a session time out functionality implemented, in which user is presented with pop-up window (that your session is about to expire) in case no activity is done for 30-mins.
Need help on:
When this pop up opens up and let say user has locked his desktop and doesn't provide input. Then what I want is that - if user doesn't provide any input in 1 min then this pop-up will close and new popup will display that "Session is exprired"
Can anyone please help.
Should be fairly easy to implement. Use the action listeners to detect the user action.
var userActionDetected = false;
var x = document.getElementById('yourID');
x.onclick = function (){
// some more stuff you wanna do
userActionDetected = true;
};
setTimeout(
function() {
if(!userActionDetected){
//close popups etc.
}
},
60000
)
if the popup has been created by window.open, then you can can just use .close() method like this:
var popup = window.open('some url', 'name_of_the_window');
setTimeout(function(){
popup.close();
}, 60000);
here I am just closing popup after 1 minute without any checks of input, so you need to somehow check the input.
If the question is about how to check inputs, I can provide another answer.
You can't do this with plain alert() boxes, however there are at least two options:
Show an alert, with a note that the session will expire one minute after it showed up (maybe show the exact time it will expire). If the user clicks "OK" after the time is up, it will come back and say "Sorry, your session expired."
Custom alert boxes. This can be achieved very easily by having an element cover the screen and another show the information:
Example:
<div id="mask"><div id="alert">Your session will expire soon</div></div>
CSS:
#mask {
position: fixed;
left: 0; right: 0; top: 0; bottom: 0;
/* fallback for browsers that don't support rgba() */
background: #cccccc;
background: rgba(255,255,255,0.75);
}
#alert {
position: fixed;
left: 50%;
width: 200px;
margin-left: -100px; /* half the width */
top: 20%;
background: white;
color: black;
}
You can of course customise this further with buttons and so on. jQuery provides some libraries for this, but I made a fully-customisable box (unlimited buttons with custom text and callbacks) in just 40 lines of raw JavaScript. To each his own...
Related
Is there a way to announce a Successful message using an alert/status role without showing anything visible on the screen for the user?
I tried creating an alert div dynamically but the user could see the success text displaying on the screen. I need it to just be announced and don't give any visual feedback to the user.
var newAlert = document.createElement("div");
newAlert.setAttribute("role", "alert");
newAlert.setAttribute("id", "alert");
var msg = document.createTextNode('You have Successfully updated your phone number');
newAlert.appendChild(msg);
document.body.appendChild(newAlert);
You can hide it from the screen using CSS, with the off-screen technique.
If you are using bootstrap, there's a .sr_only class doing that. Otherwise, you can easily find the corresponding CSS code.
Basically it looks something like this:
.sr_only {
width: 1px;
height: 1px;
overflow: hidden;
position: absolute;
left: -2px;
top: -2px;
}
Don't use display:none, visibility:hidden or width/height:0, as those are also going to hide the message for screen readers, and as a consequence, the alert won't be spoken.
Note that you can't hide the message from the screen reader's display as known as virtual buffer. If you want to do so, the best you can do is removing the element from the DOM after a few seconds.
You must wait long enough for the message to be spoken entirely, as with some screen readers, speech is cut when the element is removed.
use css
.alert{
display: none;
}
or
.alert{
z-index: -100;
}
When a user presses the close button on the browser or tab, I want to action an overlay, wait for a second, then close. I know its not a done practice and I've stood on my soap box and cried about what is acceptable to the user and such but, they want it...
I know that the browsers close action is pretty explicit in what it can do, so where do I start?
Thanks
you could hook the onbeforeunload event, and have a overlay element hidden, then show it inside the event
overlay element
<div id="dark-overlay" style=""></div>
css
#dark-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.6;
z-index: 1000;
display: none;
}
javascript
<script type="text/javascript">
window.onbeforeunload = function(event){
var overlayelement = document.getElementById('dark-overlay');
overlayelement.style.display = 'block';
return 'are you sure you want to quit?';
}
</script>
note this won't exactly achieve what you asked: it will show an overlay, along with a browser confirm dialog containing the text you returned.
I couldn't think of a way to wait a second before exiting, except putting a loop that exits after the defined amount of time which is terribly inefficient.
I know that the browsers close action is pretty explicit in what it can do
Correct.
It can pause while asking the user if they really want to close the window or not using a standard UI.
… and that's it.
so where do I start?
But telling your client that browsers don't provide any way to do what they want.
I have made a website, something like a control panel that controls different devices connected to microcontroller (the website itself is hosted on microcontroller).
I encounter this problem: If user change state of some check box (you can think of them like on/off buttons) and immediately after that sends some other command, my system crashes. To avoid this I need to introduce delay that would disable user for clicking any other button on website for specific amount of time (in my case 5 seconds). I am using JavaScript to communicate http requests to/and from my microcontroller so I am looking for JavaScript based solution.
Hope I made myself clear and thank you for your help.
Since the post states the website itself is hosted on a micro-controller, jQuery may be inappropriate (storage constraints) for the answer. The general theme however is still the same. When a user changes an appropriate control show a modal div with a 'please wait' or some other message.
You don't mention the browser you want to target so I'm assuming a chrome or firefox version.
CSS:
.modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.3);
z-index: 1001;
display: none;
}
.modal.active {
display: block;
}
HTML (Place this div somewhere in the root of body, and only once):
<div id="modal" class="modal">
<h3>Please wait...</h3>
</div>
JavaScript:
// get your elements
var element = document.getElementById("myField");
var modal = document.getElementById("modal");
// opens the modal
function openModal() {
modal.classList.add("active");
}
// closes the modal
function closeModal() {
modal.classList.remove("active");
}
// opens the modal, then closes it after a timeout period
function openTemporaryModal(var timeout) {
openModal();
setTimeout(function() {
closeModal();
}, timeout);
}
// used as an event callback
function modalForFiveSeconds() {
openTemporaryModal(5000);
}
// Attach the event callback to the element/event you want to open the modal:
element.addEventListener('change', modalForFiveSeconds);
References:
MDN: document.getElementById
MDN: element.classList
MDN: window.setTimeout
MDN: element.addEventListener
You can use below step.
Create one HTML Div
Make that div as Visible false or display:none
Set height and width for Div. make it screen.Width and screen.Height
when user click on Checkbox - set that div visible=true or display:block for 5 Seconds.
After 5 Seconds make it invisible.
First of all you will need to attached an EVENT to all of the checkboxes you have.
Something like this:
$.("input[type='checkbox']").change(disableScreen);
Create a div that would disable the screen
<div id="disablingDiv" ></div>
Then we have to create a new function called disableScreen.
function disableScreen() {
var $disablingDiv= $("#disablingDiv");
$body.addClass("disablingDiv");
window.setTimeout(function () {
$body.removeClass("disablingDiv");
}, 5000);
}
.disablingDiv
{
/* Do not display it on entry */
display: none;
/* Display it on the layer with index 1001.
Make sure this is the highest z-index value
used by layers on that page */
z-index:1001;
/* make it cover the whole screen */
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
/* make it white but fully transparent */
background-color: white;
opacity:.00;
filter: alpha(opacity=00);
}
Hiding div solution was taken from "Disable all page elements with transparent div"
In recent versions of the Google Chrome browser, javascript Alert dialogs, and Confirm dialogs, are not very visible. They don't make a sound when appearing, they're positioned near the top of the screen, and they're white so they blend in too easily with most websites.
This causes users to not realize the Alert is there, and since the Alert freezes the browser until dismissed, users can easily think their browser is frozen.
What are some ways to make the javascript Alert stand out more?
One option is to create your own Alert, using div overlays. However, doing that for Confirm dialogs would be more difficult, since you often want all execution to stop until the user chooses OK or Cancel on the Confirm dialog.
A great option is the following, which allows you to continue using the browser's Alert and Confirm dialogs:
Create these functions (uses Jquery but can be modified to Javascript):
function alrt(msg) {
var tint = $('<div class="PopupBgTint"></div>');
tint.appendTo('body');
alert(msg);
tint.remove();
}
function cnfrm(msg) {
var tint = $('<div class="PopupBgTint"></div>');
tint.appendTo('body');
var rtrn = confirm(msg);
tint.remove();
return rtrn;
}
In your CSS file, define PopupBgTint like so:
.PopupBgTint
{
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: black;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
z-index:99999;
}
Then, instead of calling
alert('Hello World') or confirm('Continue?')
instead call alrt('Hello World') or cnfrm('Continue?')
That's all there is to it. This will create a temporary tinted overlay covering your entire page, with the Alert/Confirm dialog on top of it, making the dialog MUCH more visible.
See example at:
http://jsfiddle.net/wcU3f/1/
(jsfiddle uses frames though, which negates part of the effect, but you get the idea how it'd function on a full webpage.)
I have a div pop up window which appears on button click event. I want to disable the screen when the pop up is shown to the user and enable again when user closes the pop up by escape key or close button on div, like a regular dialog box. How can I do this by java script.
JQuery UI makes your life easier.
Have a look at jquery UI dialog
You can use jQuery dialog and use the attribute modal:true
$("#fileuploadfun").dialog({ modal: true });
If you use modal:false then you can click on background
You can create a "cover" element that covers the screen preventing input from the user, except with whatever is on top (or inside) the cover.
$('#button').click(function() { $('body').append('<div class="cover"></div>'); } );
.cover { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: rgba(0, 0, 0, 0.5); }
You then assign events to the cover so when the user clicks it or presses a specific key, the cover is hidden.
$('.cover').click(function() { $(this).hide(); });
I highly recommend using a modal plugin/script, as doing it yourself requires significant effort and is time consuming (trust me).