My Java path: javaScript

Tuesday, 30 December 2014

JavaScript that disables "browser back" functionality

Here the code, note that "addEventListener" works only from IE9, if you need also support of earlier IE, just change "addEventListener" to the "onkeydown" event.

  var handleBackSpace = function handleBackSpaceFunction(evt) {  
    switch (evt.target.tagName.toLowerCase()) {  
       case "input":  
         if (evt.target.type.toLowerCase() == "text" || evt.target.type.toLowerCase() == "password") {  
            disableIfNeeded(evt);  
            break;  
            //case of checkboxes  
         } else {  
            evt.preventDefault();  
         }  
       case "textarea":  
         disableIfNeeded(evt)  
         break;  
       default:  
         disableBackspace(evt)  
         break;  
    }  
  }  
  document.addEventListener('keydown', handleBackSpace, false);  
  function disableIfNeeded(evt) {  
    if (evt.target.readOnly == true) {  
       evt.preventDefault();  
    }  
  }  
  function disableBackspace(evt) {  
    var key;  
    if (typeof evt.keyIdentifier !== "undefined") {  
       key = evt.keyIdentifier;  
    } else if (typeof evt.keyCode !== "undefined") {  
       key = evt.keyCode;  
    }  
    if (key === 'U+0008' ||  
       key === 'Backspace' ||  
       key === 8) {  
       evt.preventDefault();  
    }  
  }

Monday, 15 September 2014

JavaScript waiting message and page blocking

Sometime when submitting the for cause the long operation we need to show some message that user should wait and block all controls. The following html will do it for you:

 <?xml version="1.0" encoding="UTF-8"?>  
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
 <html xmlns="http://www.w3.org/1999/xhtml">  
      <head>  
           <title>Waiting message</title>  
           <style type="text/css">  
                #loading-div-background {  
                     display: none;  
                     position: fixed;  
                     top: 0;  
                     left: 0;  
                     width: 100%;  
                     height: 100%;  
                     background-color: rgba(255, 255, 255, 0.5);  
                }  
                #loading-div {  
                     width: 300px;  
                     height: 200px;  
                     text-align: center;  
                     position: absolute;  
                     left: 50%;  
                     top: 30%;  
                     margin-left: -150px;  
                     margin-top: -100px;  
                }  
           </style>  
           <script type="text/javascript">  
                function showProgress() {  
                     document.getElementById("loading-div-background").style.display = 'block';  
                     var pb = document.getElementById("loading-div");  
                     <!--We inserting the gif, because of well-know IE bug http://stackoverflow.com/questions/780560/animated-gif-in-ie-stopping-->  
                     pb.innerHTML =  
                               '<img src="https://d13yacurqjgara.cloudfront.net/users/157197/screenshots/968023/framely.gif" width="200" height ="200"/><h2>Please wait.... We are working on the hard task</h2>';  
                     pb.style.display = 'block';  
                }  
           </script>  
      <head>  
      <body>  
      <form>  
           <input type="button" value="start job" id="show" onclick="showProgress();"/>  
      </form>  
      <div id="loading-div-background">  
           <div id="loading-div">  
                <!--Here we will insert inner html by the java script-->  
           </div>  
      </div>  
      </body>  
 </html>

If the gif is not available just find another in the internet.
And... wait for it... Happy coding.