jQuery Mobile Toolbar position Option

Last Updated : 10 Feb, 2022

jQuery Mobile is a web-based technology used to create websites and apps which are responsive and accessible on devices of various screen sizes like mobile, tablets, and desktops.

In this article, we will use the jQuery Mobile Toolbar position option. When the position option is set to "fixed" the toolbar floats above the content using CSS property "position: fixed".

Syntax:

Initialize toolbar with the specified position option:

$( ".selector" ).toolbar({
  position: "fixed"
});

Get or set the position option, after initialization:

// Getter
var position = $( ".selector" ).toolbar( "option", "position" );
 
// Setter
$( ".selector" ).toolbar( "option", "position", "fixed" );

CDN Links: First, add jQuery Mobile scripts needed for your project.

<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>

Example: In this example, we will set the position option to "fixed" so the toolbar will float over the content.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href=
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/>
    <script src="https://code.jquery.com/jquery-2.1.3.js">
    </script>
    <script src=
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js">
    </script>

    <script>
        $(document).ready(function () {
            $("#divID").toolbar({
                position: "fixed",
            });
        });
    </script>
</head>

<body>
    <div data-role="page">
        <center>
            <h2 style="color:green">
                GeeksforGeeks
            </h2>
            <h3>jQuery Mobile Toolbar position option</h3>
            
            <h2>What is GeekforGeeks?</h2>
            <p style="padding:0px 20px;">
                GeeksforGeeks is a computer science portal 
                for geeks by geeks. Here you can find 
                articles on various computer science topics 
                like Data Structures, Algorithms and many 
                more.... GeekforGeeks was founded by Sandeep 
                Jain in 2009. GeeksforGeeks also provide 
                courses, you can find the courses at
                <a href="https://www.geeksforgeeks.org/courses">
                    https://www.geeksforgeeks.org/courses
                </a> For cracking interviews of top product 
                based companies, you need to have good and 
                deep understanding of topics like DSA, System 
                design etc. GeeksforGeeks provide you quality 
                content so that you can prepare for the 
                interviews. GeeksforGeeks also have a practice
                portal where you can practice problems and 
                brush on your skills. You can visit the 
                practice portal at
                <a href="https://practice.geeksforgeeks.org">
                    https://practice.geeksforgeeks.org</a>
            </p>


        </center>
        <div id="divID" data-role="header">
            <h1>Toolbar</h1>
        </div>
    </div>
</body>

</html>