Reside-Menu for jQuery Mobile – Part 2


In my previous article regarding “Reside-Menu”, I have explained how to create it but I haven’t explained how to properly use it in navigating between pages. The trick is simple and can be achieved in many ways.

When “Reside-Menu” is active, many styles are added to both body and active page. Those styles will prevent jQM from applying an appropriate transition/navigation between pages. Therefore, navigating to a new page should commence after closing “Reside-Menu” and removing all styles.

To do so, we need to again listen to transitionEnd events of closing “Reside-Menu” before we navigate to a page programmatically $.mobile.pageContainer.pagecontainer("change", "#pageID or URL").

Here is the updated code and demo.

$(document).one("pagecreate", function () {

    /* create reside-menu */
    $("#content").enhanceWithin().hide();

    /* open function */
    function openMenu() {
        var activePage = $("body").pagecontainer("getActivePage");
        $("body").css({
            "overflow-y": "hidden"
        });
        activePage.height($(window).height() - 88);
        activePage.addClass("panel-animate panel-open");
        $("#content").show();
    }

    /* close function */
    function closeMenu() {
        var activePage = $("body").pagecontainer("getActivePage");
        $(".ui-page-active").addClass("panel-close").removeClass("panel-open");
        $("#content").css("z-index", "-9999");
    }

    /* change page */
    $("#content").on("click", "a:not(.panel-close-btn)", function (e) {
        e.preventDefault();
        var page = $(this).attr("href");
        closeMenu();
        $(document).one("webkitTransitionEnd oTransitionEnd otransitionend transitionend msTransitionEnd", ".panel-close", function (e) {
            $("body").pagecontainer("change", page, {
                transition: "flip"
            });
        });
    });

    /* open */
    $(".panel").on("click", openMenu);

    /* close */
    $(".panel-close-btn").on("click", closeMenu);

    /* remove animation and extra styles */
    $(document).on("webkitTransitionEnd oTransitionEnd otransitionend transitionend msTransitionEnd", ".panel-open, .panel-close", function (e) {
        var activePage = $("body").pagecontainer("getActivePage");
        if ($(this).hasClass("panel-open")) {
            $("#content").css("z-index", "9999");
        }
        if ($(this).hasClass("panel-close")) {
            $("#content").hide();
            $("body").removeAttr("style");
            activePage.removeAttr("style");
            $(this).removeClass("panel-animate panel-close").css({
                padding: "44px 0"
            });
            $.mobile.resetActivePageHeight();
        }
    });
});
Advertisements

One thought on “Reside-Menu for jQuery Mobile – Part 2

Drop me a line or two ;)

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s