New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

resetActivePageHeight() isn't called on pageshow #7386

Closed
DzenisevichK opened this Issue May 9, 2014 · 6 comments

Comments

Projects
None yet
2 participants
@DzenisevichK

Related to commit:
65ad2f9

loadDeferred is never resolved on Chrome (34.0.1847.131 m) on Windows 7 SP1 x64:

    $.mobile.window.load( function() {

        // Resolve and null the deferred
        loadDeferred.resolve();
        loadDeferred = null;
    });

so resetActivePageHeight is never called on pageshow:

        $.mobile.document.bind( "pageshow", function() {

            // We need to wait for window.load to make sure that styles have already been rendered,
            // otherwise heights of external toolbars will have the wrong value
            if ( loadDeferred ) {
                loadDeferred.done( $.mobile.resetActivePageHeight );
            } else {
                $.mobile.resetActivePageHeight();
            }
        });

@DzenisevichK DzenisevichK changed the title from resetActivePageHeight() doesn't called on pageshow to resetActivePageHeight() isn't called on pageshow May 9, 2014

@DzenisevichK

This comment has been minimized.

Show comment
Hide comment
@DzenisevichK

DzenisevichK May 9, 2014

I found that there are no problems on http://view.jquerymobile.com/master/demos/pages-multi-page/ standard example.

In my case I don't use autoInitializePage and trigger initializePage when requirejs finish loading.

I found that there are no problems on http://view.jquerymobile.com/master/demos/pages-multi-page/ standard example.

In my case I don't use autoInitializePage and trigger initializePage when requirejs finish loading.

@DzenisevichK

This comment has been minimized.

Show comment
Hide comment
@DzenisevichK

DzenisevichK May 9, 2014

A test page to reproduce the problem:
http://view.jquerymobile.com/master/demos/backbone-requirejs/backbone-require.html

Here $.mobile.resetActivePageHeight is never called on pageshow

A test page to reproduce the problem:
http://view.jquerymobile.com/master/demos/backbone-requirejs/backbone-require.html

Here $.mobile.resetActivePageHeight is never called on pageshow

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof May 9, 2014

Contributor

OK, I think I understand the problem. If you do not initialize the page, navreadyDeferred isn't resolved, which means loadDeferred isn't attached to load until after load() has already fired. I guess it would be better to check document.readyState before attaching to load() to make sure it's not yet "complete".

Contributor

gabrielschulhof commented May 9, 2014

OK, I think I understand the problem. If you do not initialize the page, navreadyDeferred isn't resolved, which means loadDeferred isn't attached to load until after load() has already fired. I guess it would be better to check document.readyState before attaching to load() to make sure it's not yet "complete".

@DzenisevichK

This comment has been minimized.

Show comment
Hide comment
@DzenisevichK

DzenisevichK May 13, 2014

@gabrielschulhof

What do you think also about introducing new event: pageresize and trigger it from resetActivePageHeight after setting min-height?

This even may be used to expand a widget height (for example textarea,ui-textinput) to fill all not used space in .ui-content...

This idea even better then autogrow option and universal (independent from widget type - may be applied to any tag).

@gabrielschulhof

What do you think also about introducing new event: pageresize and trigger it from resetActivePageHeight after setting min-height?

This even may be used to expand a widget height (for example textarea,ui-textinput) to fill all not used space in .ui-content...

This idea even better then autogrow option and universal (independent from widget type - may be applied to any tag).

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof May 20, 2014

Contributor

@DzenisevichK this is not a bad idea. However, this involves a bit of re-thinking, so I have framed this as a feature request.

Contributor

gabrielschulhof commented May 20, 2014

@DzenisevichK this is not a bad idea. However, this involves a bit of re-thinking, so I have framed this as a feature request.

@DzenisevichK

This comment has been minimized.

Show comment
Hide comment
@DzenisevichK

DzenisevichK May 20, 2014

I use this code for implementing .ui-fullheight behaviour:

$(window.document).on("pageinit", function (event) {
    var $page = $(event.target),
        $fullHeight = $page.find(".ui-fullheight");
    if (!$fullHeight.length) {
        // Improve performance by skipping pages from processing
        // which initially don't have fullheight widgets
        return;
    }
    $page.on("pageresize updatelayout", function () {
        $fullHeight
            // Only the first visible fullheight widget may be expanded
            .filter(":visible:first")
            .each(function () {
                var $element = $(this),
                    initHeight = $element.jqmData("init-height");
                if (!initHeight) {
                    // Save initial height
                    initHeight = $element.height();
                    $element.jqmData("init-height", initHeight);
                }
                $element
                    // Reset height to calculate correct extra space in content
                    .height(0)
                    .height(
                        Math.max(
                            initHeight,
                            // Calculate extra space
                            $page.outerHeight() -
                                $page.find(".ui-header").outerHeight() -
                                $page.find(".ui-content").outerHeight()
                        )
                    );
            });
    });
});

I use this code for implementing .ui-fullheight behaviour:

$(window.document).on("pageinit", function (event) {
    var $page = $(event.target),
        $fullHeight = $page.find(".ui-fullheight");
    if (!$fullHeight.length) {
        // Improve performance by skipping pages from processing
        // which initially don't have fullheight widgets
        return;
    }
    $page.on("pageresize updatelayout", function () {
        $fullHeight
            // Only the first visible fullheight widget may be expanded
            .filter(":visible:first")
            .each(function () {
                var $element = $(this),
                    initHeight = $element.jqmData("init-height");
                if (!initHeight) {
                    // Save initial height
                    initHeight = $element.height();
                    $element.jqmData("init-height", initHeight);
                }
                $element
                    // Reset height to calculate correct extra space in content
                    .height(0)
                    .height(
                        Math.max(
                            initHeight,
                            // Calculate extra space
                            $page.outerHeight() -
                                $page.find(".ui-header").outerHeight() -
                                $page.find(".ui-content").outerHeight()
                        )
                    );
            });
    });
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment