jQM 1.4 - Append Header Dynamically

Extra padding is added to the page

by Omar X

HTML

<html>
    
    <head>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0-beta.1/jquery.mobile-1.4.0-beta.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script>
            $(document).on("mobileinit", function() {
                $.mobile.toolbar.prototype.options.addBackBtn = true;
                $.mobile.toolbar.prototype.options.backBtnText = "Volver";
                $.mobile.page.prototype.options.theme = "b";
                $.mobile.defaultPageTransition = "flip";
            });
        </script>
        <script src="http://code.jquery.com/mobile/1.4.0-beta.1/jquery.mobile-1.4.0-beta.1.min.js"></script>
    </head>
    
    <body>
        <div data-role="page" id="p1">
            <div data-role="content"> <a href="#p2">page2</a>

            </div>
            <div data-role="footer" data-position="fixed">
                 <h1>Footer
                </h1>

            </div>
        </div>
        <div data-role="page" id="p2">
            <div data-role="header" data-position="fixed">
                 <h1>Head - Page 2
                </h1>

            </div>
            <div data-role="content"><a href="#p3">page3</a>

            </div>
            <div data-role="footer" data-position="fixed">
                 <h1>Footer
                </h1>

            </div>
        </div>
        <div data-role="page" id="p3">
            <div data-role="header" data-position="fixed">
                 <h1>Head - Page 3
                </h1>

            </div>
            <div data-role="content"> <a href="#p1">Home</a>

            </div>
            <div data-role="footer" data-position="fixed">
                 <h1>Footer
                </h1>

            </div>
        </div>
    </body>

</html>

JavaScript

console.log('Height before: ' + $('#p1').outerHeight());

var header = $('<div/>', {
    'data-role': 'header',
        'class': 'dynamic',
        'data-position': 'fixed'
}).append('<h1>Dynamic Header</h1>');

setTimeout(function () {
    $('#p1').prepend(header).enhanceWithin();
    console.log('Height after: ' + $('#p1').outerHeight());
}, 1000);