CODEWITHSUNDEEP
jquery-mobile
Priya
Priya

Reputation: 921

will data-position="fixed" work for divs other than header and footer

I've a div(phone-no) which need to be fixed and it is just above the footer. When we resize the window, user must be able to see the "phone-no" div. here is the image the blue bar which says "free trial" is the fixed bar and the bar below that is the footer.

When I tried data-position="fixed' on header and footer, it seems to work. but not on this. Any insight?? link to the page

Upvotes: 3

Views: 10934

Answers (2)

Ahmed Assaf
Ahmed Assaf

Reputation: 601

Try put this code in your document ready and it will disable disappearing when clicking and scrolling

$("[data-role=header]").fixedtoolbar({ tapToggle: false });
$("[data-role=footer]").fixedtoolbar({ tapToggle: false });

Best of luck

Upvotes: 3

Phill Pafford
Phill Pafford

Reputation: 85308

Live Example:

HTML:

<div data-role="page" data-theme="b" id="jqm-home"> 
    <div data-role="header" data-position="fixed"> 
        <h1>Header</h1> 
        <a href="#" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a> 
    </div>

    <div data-role="content"> 
        <p>Content</p>
    </div>

    <div data-role="footer" data-id="foo1" data-position="fixed"> 
        <div data-role="navbar"> 
            <ul> 
                <li></li> 
                <li></li>
                <li>Footer</li>
                <li></li> 
                <li>(888)444-8901</li> 
            </ul> 
        </div>
    </div>

</div>

Upvotes: 2

Related Questions