jQuery Mobile Toolbar position Option
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= </script> <script src= </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> 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 </p> </center> <div id="divID" data-role="header"> <h1>Toolbar</h1> </div> </div></body></html> |
Output:
Toolbar floating on top of other content
Reference: https://api.jquerymobile.com/toolbar/#option-position
Please Login to comment...