Keypress Event Does Not Work in Chrome For Escape Key

It is very common these days to allow your web page to respond to your website users using key shortcuts. Recently I was working on a project to display an overlay on top of a page (lightbox style), and the third party that I used is called iBox. It worked great and very light weight, but it had a problem with “Escape” key to get user back to the web page, i.e., hide the overlay. This is what the coder used (slightly modified version):

    window.addEventListener('keypress', function(e){
        if (e.keyCode == (window.event ? 27 : e.DOM_VK_ESCAPE)) {
            Overlay.hide();
        }
    });

The code is simple, We just want when user presses the “Escape” key on the keyboard to hide the overlay that was displayed on the screen. This worked in latest FF, but not in Chrome. And looks like it does not work for all the keys on the first line of my keyboard (I use Mac keyboard, not sure whether this is the cause of the issue or not).

In order to capture the this event, I need to use “keydown” instead:

    window.addEventListener('keydown', function(e){
        if (e.keyCode == (window.event ? 27 : e.DOM_VK_ESCAPE)) {
            Overlay.hide();
        }
    });

Problem solved, but not an obvious one. Hope this helps.

Javascript Array Map With ParseInt Function

When you want to turn all elements in an array from strings to integers, it comes to common sense that you want to use the Array.prototype.map function with Javascript’s built-in function parseInt:

 

 

 

 

 

 

var numbers = ["1", "2", "3"];
var new_numbers = numbers.map(parseInt);

However, this will give you unexpected output of:

[ 1, NaN, NaN ]

Why?

Well, this is because “map” passes more arguments into the callback function:

callback(item, index, array);

This works fine if your callback function only accepts one arguments, which will be “item”. However, “parseInt” function receives two arguments:

parseInt(string, base)

So in our case the actual value of “index” got interpreted as “base” in the parseInt function, and of course it will give you very unexpected result.

The solution is to create a small function which wraps the “parseInt”:

var numbers = ["1", "2", "3"];
var new_numbers = numbers.map(function(x) { return parseInt(x, 10) })

This should get you green lights in your test cases :).

onTouchMove Caused iFrame Scrolling Slow in iPad

In the last few days I needed to build a modal which loads a iFrame inside to display a third party content, and the target devices includes desktops, mobiles and tablets.

There is no problems to display the content on desktop, scrolling works, modal popup works. However, the frustration comes when testing on iPad and mobiles. Even when I have added “overflow: hidden” to the body tag, iPad and mobile browsers still allow users to scroll the background when modal is popped up. To fix this, I need to disable the “touchmove” event at the document level:

document.ontouchmove = function(e) { e.preventDefault(); };

This actually works on iPad, though not entirely in Android. However, this actually caused another issue which causes the scrolling in the iframe very slow. It took me quite a while to find the root cause.

In the end I had to remove the “touchmove” event handling because this scrolling slowness issue is far more serious than the background content scrolling when modal is in place (my modal is about 100% over the background anyway).

Redirect page in Javascript

I have encountered quite a few times when a page need to refresh itself or redirect to another page in a certain amount of time, and one of my friend also ask me this question before. So I think it would be good to put this code in an article so that it can be referenced later on very easily. The following javascript code can be used to redirect a page in 5 seconds.

Copy and past them between script tags and change the (*Page URL*) as required.

var seconds = 5;

var milliseconds = seconds * 1000;

window.onload = function()
{
    // Call the function 5 seconds after the page is loaded.
    setTimeout("refresh_page()", milliseconds)
}


function refresh_page()
{
    window.location.href="http://(*Page URL*)";
    // Refresh after 5 seconds
    setTimeout("refresh_page()", milliseconds)
}