CODEWITHSUNDEEP
htmljquery-mobilescroll
Jono
Jono

Reputation: 18108

jQuery: How to make header and footer not scroll?

I have a header and footer plus a listview in the main html5 body but the issue that I am having is that when the listView is large, it scrolls the whole page including the header.

what I am trying to achieve is to just make the listview scrollable and nothing else so that the header and footer is always visible.

Is this possible in html5/jquery?

edit:

Here is what I have tried.

<link href="src/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css" />
<script src="src/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="src/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<body>
    <div data-role="page" id="page">
        <div data-role="header" data-position="fixed">
            <a href="" onclick="history.back(-1); return false;">Back</a>
            <h1>Claim Items</h1>
        </div>
        <div data-role="content">
            <h3 style="margin-left:1em">The Demo Title</h3>
            <ul data-role="listview" id="itemList" data-inset="true" data-scroll="true">
                <li><a href="#page2">1: demo</a></li>
                <li><a href="#page2">2: demo</a></li>
                <li><a href="#page2">3: demo</a></li>
            </ul>
        </div>
        <div data-role="footer" data-position="fixed" class="ui-bar">
            <div data-role="navbar">
                <ul>
                    <li><a href="fdfd.html">Add an Item</a></li>
                    <li> <a href="">Remove an Item</a></li>
                    <li><a href="">Add comment</a></li>
                </ul>
            </div>
        </div>
    </div>
</body>

Upvotes: 0

Views: 2041

Answers (2)

abdu
abdu

Reputation: 667

<div data-role="header" data-position="fixed" data-id="header1" data-tap-toggle="false" style="border-bottom:4px solid #f57122;">
    <h1>Header</h1>
</div>

In my experience you need also to set data-tap-toggle to false, because you dont want the header to disappear if they click anywhere on the page. Also you need this data-id, if you have multiple pages you need the header on each page to have the same data-id so the jquery mobile will not replace current header of the active page.

EDIT: If you experience blinking during page transitions on the actual device you have to add this to your index html also 

<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

Upvotes: 1

Jonathan Naguin
Jonathan Naguin

Reputation: 14766

I think that you are asking for a fixed toolbar:

In browsers that support CSS position: fixed (most desktop browsers, iOS5+, Android 2.2+, BlackBerry 6, and others), toolbars that use the "fixedtoolbar" plugin will be fixed to the top or bottom of the viewport, while the page content scrolls freely in between. In browsers that don't support fixed positioning, the toolbars will remain positioned in flow, at the top or bottom of the page.

To enable this behavior on a header or footer, add the data-position="fixed" attribute to a jQuery Mobile header or footer element.

Fixed header markup example:

<div data-role="header" data-position="fixed">
    <h1>Fixed Header!</h1>
</div>

Fixed footer markup example:

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

Working demo here.

Upvotes: 2

Related Questions