CODEWITHSUNDEEP
javascript
balboa
balboa

Reputation: 951

Prevent any user activity on website for specific period of time: javascript

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.

Upvotes: 0

Views: 816

Answers (3)

klyd
klyd

Reputation: 3979

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:

Upvotes: 1

Scription
Scription

Reputation: 645

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"

Upvotes: 1

prog1011
prog1011

Reputation: 3495

You can use below step.

  1. Create one HTML Div
  2. Make that div as Visible false or display:none
  3. Set height and width for Div. make it screen.Width and screen.Height
  4. when user click on Checkbox - set that div visible=true or display:block for 5 Seconds.
  5. After 5 Seconds make it invisible.

Upvotes: 1

Related Questions