Determining the height of a jQuery mobile page

Question

Determining the height of a jQuery mobile page

Struggling for the last 24 hours to adjust the min-height styling on a jQuery mobile page specifically for mobile safari. Despite trying various methods like inline styles and overriding ui-page styles, I have not been successful in changing the height of data-role="page". My goal is to dynamically adjust the "page" height based on the content within it. Please refer to the illustration attached for a clearer understanding of the issue.

<div data-role="page">
     <div data-role="header">
             Header Elements
     </div>
     <div data-role="content" class="homeNav">
            <ul data-role="listview" data-inset="false" data-filter="false">
                <li><a href="expertise.html">Expertise</a></li>
                <li><a href="greatesthits.html">Greatest Hits</a></li>
                <li><a href="profile.html">Profile</a></li>
                <li><a href="mindset.html">Mindset</a></li>
                <li><a href="connect.html">Connect</a></li>
             </ul>  
     </div><!-- /content -->

     <div data-role="footer" data-position="fixed">
             Footer elements
     </div><!-- /footer -->
</div><!-- /page -->

jquery jquery-mobile css

Answer 1

Answer №1

By using JavaScript, the min-height for the data-role="page" element can be dynamically set within a resize event handling function associated with the window object. Users have the flexibility to customize their own resizing logic:

$(function () {
    $(window).bind('resize', function (event) {
        var content_height = $.mobile.activePage.children('[data-role="content"]').height(),
            header_height  = $.mobile.activePage.children('[data-role="header"]').height(),
            footer_height  = $.mobile.activePage.children('[data-role="footer"]').height(),
            window_height  = $(this).height();

        if (content_height < (window_height - header_height - footer_height)) {
            $.mobile.activePage.css('min-height', (content_height + header_height + footer_height));
            setTimeout(function () {
                $.mobile.activePage.children('[data-role="footer"]').css('top', 0);
            }, 500);
        }
        event.stopImmediatePropagation();
    }).trigger('resize');
});

Explore a live demonstration: http://jsfiddle.net/sAs5z/1/

An important aspect is utilizing the setTimeout method to adjust the positioning of the fixed-position-footer; potentially decreasing the delay interval could enhance user experience. This workaround tackles an issue where the jQuery Mobile Framework was readjusting the fixed-position-footer to the page's bottom erroneously. Refer to this example: http://jsfiddle.net/sAs5z/

Furthermore, it might be beneficial to solely reposition the fixed-position-footer while maintaining the original page min-height property. This adjustment ensures that the gradient backdrop extends across the entire screen without any spacing between the footer and content. Experiment with this approach in the following demonstration: http://jsfiddle.net/sAs5z/2/

Answer 2

By using JavaScript, the min-height for the data-role="page" element can be dynamically set within a resize event handling function associated with the window object. Users have the flexibility to customize their own resizing logic:

$(function () {
    $(window).bind('resize', function (event) {
        var content_height = $.mobile.activePage.children('[data-role="content"]').height(),
            header_height  = $.mobile.activePage.children('[data-role="header"]').height(),
            footer_height  = $.mobile.activePage.children('[data-role="footer"]').height(),
            window_height  = $(this).height();

        if (content_height < (window_height - header_height - footer_height)) {
            $.mobile.activePage.css('min-height', (content_height + header_height + footer_height));
            setTimeout(function () {
                $.mobile.activePage.children('[data-role="footer"]').css('top', 0);
            }, 500);
        }
        event.stopImmediatePropagation();
    }).trigger('resize');
});

Explore a live demonstration: http://jsfiddle.net/sAs5z/1/

An important aspect is utilizing the setTimeout method to adjust the positioning of the fixed-position-footer; potentially decreasing the delay interval could enhance user experience. This workaround tackles an issue where the jQuery Mobile Framework was readjusting the fixed-position-footer to the page's bottom erroneously. Refer to this example: http://jsfiddle.net/sAs5z/

Furthermore, it might be beneficial to solely reposition the fixed-position-footer while maintaining the original page min-height property. This adjustment ensures that the gradient backdrop extends across the entire screen without any spacing between the footer and content. Experiment with this approach in the following demonstration: http://jsfiddle.net/sAs5z/2/

Answer 3

Answer №2

Although this ticket is old, I have come up with a new solution that I find more preferable. My solution involves specifically unbinding the resize event using some jQuery internal techniques. I am not in favor of Jasper's solution as it relies on one event blocking another, and events should ideally be independent of each other without depending on the order in which they fire.

$(function() {
    // WARNING: Very advanced code ahead. This script hacks into jQuery mobile to reset page heights on resize.
    // We need to unbind the resize function ONLY and set all pages back to auto min-height.
    // This code works for jquery version 1.8.

    // First, reset all pages to default height
    $('[data-role="page"]').css('min-height', 'auto');

    // Check if we want to unbind this specific function
    var check = function(func) {
        var f = func.toLocaleString ? func.toLocaleString() : func.toString();
        // Verify if func.name matches or if the function body contains certain strings
        if(func.name === 'resetActivePageHeight' || (f.indexOf('padding-top') > -1 && f.indexOf('min-height'))) {
            return true;
        }
    };

    // Try to unbind the document pageshow event
    try {
        var dHandlers = $._data(document).events.pageshow;

        for(x = 0; x < dHandlers.length; x++) {
            if(check(dHandlers[x].handler)) {
                $(document).unbind('pageshow', dHandlers[x]);
                break;
            }
        }
    } catch(e) {}

    // Try to unbind the window handler
    try {
        var wHandlers = $._data(window).events.throttledresize;

        for(x = 0; x < wHandlers.length; x++) {
            if(check(wHandlers[x].handler)) {
                $(window).unbind('throttledresize', wHandlers[x]);
                break;
            }
        }
    } catch(e) {}
});

Answer 4

Although this ticket is old, I have come up with a new solution that I find more preferable. My solution involves specifically unbinding the resize event using some jQuery internal techniques. I am not in favor of Jasper's solution as it relies on one event blocking another, and events should ideally be independent of each other without depending on the order in which they fire.

$(function() {
    // WARNING: Very advanced code ahead. This script hacks into jQuery mobile to reset page heights on resize.
    // We need to unbind the resize function ONLY and set all pages back to auto min-height.
    // This code works for jquery version 1.8.

    // First, reset all pages to default height
    $('[data-role="page"]').css('min-height', 'auto');

    // Check if we want to unbind this specific function
    var check = function(func) {
        var f = func.toLocaleString ? func.toLocaleString() : func.toString();
        // Verify if func.name matches or if the function body contains certain strings
        if(func.name === 'resetActivePageHeight' || (f.indexOf('padding-top') > -1 && f.indexOf('min-height'))) {
            return true;
        }
    };

    // Try to unbind the document pageshow event
    try {
        var dHandlers = $._data(document).events.pageshow;

        for(x = 0; x < dHandlers.length; x++) {
            if(check(dHandlers[x].handler)) {
                $(document).unbind('pageshow', dHandlers[x]);
                break;
            }
        }
    } catch(e) {}

    // Try to unbind the window handler
    try {
        var wHandlers = $._data(window).events.throttledresize;

        for(x = 0; x < wHandlers.length; x++) {
            if(check(wHandlers[x].handler)) {
                $(window).unbind('throttledresize', wHandlers[x]);
                break;
            }
        }
    } catch(e) {}
});

Answer 5

Answer №3

Dealing with a similar problem, I found that using $.mobile.resetActivePageHeight() while displaying a popup solved the issue for me. Thank you for sharing this helpful tip!

Answer 6

Dealing with a similar problem, I found that using $.mobile.resetActivePageHeight() while displaying a popup solved the issue for me. Thank you for sharing this helpful tip!

Determining the height of a jQuery mobile page

Answer №1

Answer №2

Answer №3

Similar questions

cross-domain ajax response

Mastering the Art of Configuring Filters in Plupload

Adding data to a URL using jQuery Ajax

UI-Router: What is the best way to access a page within my project without adding it as a State?

The Jquery.ajax function is passing null values to the controller, but it functions properly when using pre-defined

Issue with Jquery event not triggering correctly following ajax data retrieval

An issue occurred while attempting to read words from JSON file

Tips for retrieving the text value on keyboard enter press without triggering form submission

"Utilize JSON autocomplete to transfer $_POST data to a separate webpage using

What steps can I take to eliminate the initial delay when it is first invoked?

An easy CSS conundrum when hovering

Discovering the following element containing an ID attribute with jQuery

Guide for showing an alert message after submitting a form using PHP and jQuery

Building an event management system using CodeIgniter and jQuery to create a seamless scheduling calendar

Adjusting the width of columns in a flex layout using Bootstrap 4

Stopping repeated content with endless scrolling ajax spinner

Tips on prefixing Bootstrap 4 classes to prevent conflicts with CSS classes

The concept of CSS inheritance within div elements

Replicating DIV element with input field

The fixed width setting for the alpha table column is not being recognized