jQuery Mobile Toolbar fullscreen Option

Last Updated : 13 Jan, 2023

jQuery Mobile is a set of HTML5 based user system interaction widget toolbox used for various purposes build on top of jQuery. It is designed to build fast and responsive sites accessible to mobile, tabs, and desktops.

In this article, we will use the jQuery Mobile Toolbar fullscreen option. When the fullscreen option is set to true, the toolbar will be hidden entirely when the page is tapped or clicked. The default value with which fullscreen option is initialized is false.

Syntax:

Initialize the toolbar with the fullscreen option specified:

$(".selector").toolbar({
    fullscreen: true
});

Get the fullscreen option, after initialization:

var fullscreen = $(".selector").toolbar("option", "fullscreen");

Set the fullscreen option, after initialization:

$(".selector").toolbar("option", "fullscreen", true);

CDN Links:

<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 fullscreen option to “true”.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <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 () {
            // Set the toolbar's fullscreen option to true
            $("#GFG").toolbar({
                fullscreen: true,
            });
        });
    </script>
</head>
 
<body>
    <div data-role="page">
        <div id="GFG" data-role="header"
             data-position="fixed">
            <h1>Toolbar</h1>
        </div>
        <center>
            <h2 style="color: green">GeeksforGeeks</h2>
            <h3>jQuery Mobile Toolbar fullscreen option</h3>
 
            <h2>What is GeeksforGeeks?</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.... GeeksforGeeks was founded by
                Sandeep Jain.
            </p>
 
        </center>
    </div>
</body>
 
</html>