Question

I’m trying to re-position a fixed footer in jQuery Mobile after I hide an element.

I’ve done quite a bit of searching and it would seem that if I use

$.mobile.fixedToolbars.show()

then it should try to re- position everything (according to this anyway).

I’ve tried numerous approaches, including $(window).resize and $.updateLayout but still the footer does not re-position.

Anybody have a solution? Fiddle available here: http://jsfiddle.net/YZRj2/2/

Answer 1

First jQM doesn’t need document.ready() so remove it.

Docs on Layout events (updatelayout)

• http://jquerymobile.com/demos/1.0rc2/docs/api/events.html

Live Example:

• http://jsfiddle.net/YZRj2/15/

JS:

$('#no_thanks').tap(function() {
    $('#earn_more').slideUp(function() {
        $(this).trigger('updatelayout');
    });
});

HTML:

<div data-role="page" id="home" class="main_content">
    <div data-theme="b" data-role="header" role="banner">
        <h1 class="ui-title">My app</h1>
    </div>
    <div data-role="content">
        <p class="app_notice" id="earn_more">                                    
            Tell us more about yourself

                <a href="#" data-role="button" data-theme="d" data-icon="delete" data-iconpos="right" id="no_thanks">No thanks</a>
        </p>

    </div>
    <div data-role="footer" data-theme="c" data-position="fixed" class="footer">
        <div data-role="navbar">
            <ul>
                <li><a href="#" class="ui-btn-active">Home</a></li>                     
            </ul>
        </div>
    </div>
</div>