Scroll

Prevent navigation for a specified duration

Follow
Summary This article describes how to prevent navigation for a specified duration in askiadesign for web screens by using javascript.
Applies to askiadesign
Written for Scriptwriters and survey authors
Keywords navigation; next; prevent; duration; script; javascript; design; askiadesign

To hide the next button, add the following line to the properties of the next button

id="cmdNext" style="visibility:hidden;"

To hide the previous button, add the following line to the properties of the previous button

id="cmdPrevious" style="display:none;" 

JavaScript to add on the page:

<script type="text/javascript">

function addEvent(elem, event, fn) {
    // allow the passing of an element id string instead of the DOM elem
    if (typeof elem === "string") {
        elem = document.getElementById(elem);
    }

    function listenHandler(e) {
        var ret = fn.apply(this, arguments);
        if (ret === false) {
            e.stopPropagation();
            e.preventDefault();
        }
        return(ret);
    }

    function attachHandler() {
        // normalize the target of the event
        window.event.target = window.event.srcElement;
        // make sure the event is passed to the fn also so that works the same too
        // set the this pointer same as addEventListener when fn is called
        var ret = fn.call(elem, window.event);
        // support an optional return false to be cancel propagation and prevent default handling
        // like jQuery does
        if (ret === false) {
            window.event.returnValue = false;
            window.event.cancelBubble = true;
        }
        return(ret);
    }

    if (elem.addEventListener) {
        elem.addEventListener(event, listenHandler, false);
    } else {
        elem.attachEvent("on" + event, attachHandler);
    }
}

function enterKey(e) {
    if (!e) {
        e = window.event;  // Get event details for IE
        e.which = e.keyCode; // assign which property (so rest of the code works using e.which)
    }
    var elt = (e.target) ? e.target : e.srcElement;
    var key = e.which || e.keyCode;
    if (key == 13 && elt.tagName !== "TEXTAREA" && elt.type !== "submit") {
        return false;
    }
}
NavigatorHandler.keydown = function(e){
    var event = e;
    enterKey(event);
    return true;
}
var elem = document.documentElement || document.body;
addEvent(elem,"keydown",enterKey);

var ONE_SECOND=1000;            //One second in millisecond
var ONE_MINUTE=ONE_SECOND * 60; //One minute in millisecond
var m_IsPageUnLocked=false;     //Indicates that the page is unlocked (locked by default)

///Display the navigation buttons
function showNavigationButtons(){
    //Unlock the page
    m_IsPageUnLocked=true;
    //Display the button next
    document.getElementById("cmdNext").style.visibility="visible";
    //If the button previous was hide removes the comments
    //Display the button previous
    //document.getElementById("cmdPrevious").style.visibility="visible";
}

function verifySubmit(e){
    if (!e)e=window.event;
    e.returnValue=m_IsPageUnLocked;
    return m_IsPageUnLocked;
}

//Start the timer to wait (30seconds)
//You can change the second argument of call (ONE_SECOND * 30) to change the time to wait.
//You can also use the ONE_MINUTE * n to wait some minutes
setTimeout("showNavigationButtons();", ONE_SECOND * 30);
//Attach the submit event on the document to prevent use of the enter key
document.documentElement.onsubmit=verifySubmit;
</script>
Have more questions? Submit a request

Comments

  • Avatar
    Tom Cliff

    Hello Jerome,

    Thank you very much for these instructions. I think this code still allows respondents to press enter to continue to the next page while the next button is hidden. Is there a way to disable this as well?

  • Avatar
    Jérôme Duparc

    Hi Tom,

    Just updated the script. This one doesn't allow the Enter key too.

    Best Regards