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

Having trouble with transferring information from JQuery to PHP

What advantages does event delegation in JavaScript offer compared to using jQuery's event handling?

Fade-in effect on one DIV element impacting the values of other div

Guidance on uploading a file with AJAX in PHP following the display of a Sweet Alert

Can CSS be used to generate these shadows?

Using jQuery to Activate Genuine Events

What steps do I need to take to ensure that this Regex pattern only recognizes percentages?

What's causing these divs to be misaligned in various directions?

Relocating scripts that have already been loaded

Modifying the font style and color of text within the table header - Material Table version 0.19.4

Tips for eliminating extra line breaks within image tags

"We encountered an error with the external script while trying to load file content using jQuery's ajax function. It

Firefox not clearing Highcharts points properly

Incomplete data retrieval issue encountered during .ajax call

Tips on modifying the maxlength attributes for all "field answer" class elements

Content in a div with a transparency level set at 50%

The duplication of the Javascript code is creating a conflict within the slider functionality

Keep your eyes peeled for updates in jquery movements

Choose a different PHP value when the selection changes

Conceal Content from Onsite Search