jQuery event Hooks

jQuery event Hooks Stepan Suvorov Blog - http://js4.it/blog

by Stepan Suvorov

HTML

<p>Resize browser or change your device orientation</p>
<img src="http://static.bbci.co.uk/gel/0.2.16/img/mobile/mobile_portrait.png" id="portrait" />
<img src="http://static.bbci.co.uk/gel/0.2.16/img/mobile/mobile_landscape_redrawn.png" id="landscape" />

JavaScript

jQuery.event.fixHooks.orientationchange = jQuery.event.fixHooks.resize = {
    props: ["orientation"],
    filter: function normalizeOrientation(event, original) {
        if (event.orientation) {
            if([0, "0", 180, "180", "portrait"].indexOf(event.orientation)){
                event.orientation = "portrait";
            }
            else {
                event.orientation = "landscape";
            }
        }
        else {
            var win = jQuery(window);
            event.orientation = win.width() > win.height() ? "landscape" : "portrait";
        }

        return event;
    }
}

$(window).on("orientationchange resize", function(event) {
    console.log("resize/orientationchange test", event, event.orientation);
    $("img").hide();
    $("#" + event.orientation).show();
});