CODEWITHSUNDEEP
jqueryjquery-mobile
Nick LaMarca
Nick LaMarca

Reputation: 8188

Hide Toolbar Jquery Mobile

What are various ways to hide a toolbar using jquery mobile. Ideally I would like to hide the toolbar above the header when no focus is on it. I started a fiddle with the basic layout

    <div data-role="navbar">
<ul>
    <li><a href="a.html">Settings</a></li>
    <li><a href="b.html">Whatever</a></li>
</ul>

http://jsfiddle.net/DMUwp/

Upvotes: 0

Views: 921

Answers (1)

Dim13i
Dim13i

Reputation: 2015

One solution could be to hide the navbar when you click on the header:

    $("div[data-role=header]").on("click", function () {
        $("div[data-role=navbar]").slideToggle(200);
    });

    $("div[data-role=navbar]").on("click", function (e) {
        e.stopPropagation();
    });

Here is a DEMO.

The other one could be to use data-position="fixed" and data-fullscreen="true" provided by the library which will hide/show your navbar at the bottom of the page when clicking/touching somewhere on the screen.

Here is a DEMO.

EDIT

For the first one there might be some problems when loading pages, so to avoid this issue you could take out the navbar from the header and put it above it like this:

    <div data-role="navbar">
        <ul>
            <li><a href="a.html">Settings</a>

            </li>
            <li><a href="b.html">Whatever</a>

            </li>
        </ul>
    </div>
    <div data-role="header">
         <h1>Hide the Toolbar</h1>
    </div>

And then adding this js code:

    $("div[data-role=header]").on("click", function () {
        $("div[data-role=navbar]").slideToggle(200);
    });

Here is a DEMO.

Upvotes: 2

Related Questions