JQuery Mobile panel positionFixed Option - Coding

jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops.

In this article, we will be using the jQuery Mobile panel positionFixed option to set whether the specified panel has fixed positioning or not to check whether the contents are in view even if the page is scrolled down. This option also allows the page to scroll while the panel stays fixed. It is recommended not to enable this feature when panels are used within Android apps because of poor performance and display issues.

Syntax:

Initializing the panel with the positionFixed option.

$( ".selector" ).panel({ positionFixed: true });

Setting the positionFixed option.

$( ".selector" ).panel( "option", "positionFixed", true );

Getting the positionFixed option.

var theme = $( ".selector" ).panel( "option", "positionFixed" );

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

<link rel=”stylesheet” href=”//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css”>
<script src=”//code.jquery.com/jquery-3.2.1.min.js”></script>
<script src=”//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js”></script>

Example: This example describes the jQuery Mobile panel positionFixed option.

HTML

<!doctype html> 
<html lang="en"> 
  
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet"
          href= 
"//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css"> 
    <script src= 
"//code.jquery.com/jquery-3.2.1.min.js"> 
  </script> 
    <script src= 
"//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"> 
    </script> 
</head> 
  
<body> 
    <center> 
        <div data-role="page"> 
            <h1 style="color:green;"> 
                GeeksforGeeks 
            </h1> 
            <h3>jQuery Mobile panel positionFixed Option</h3> 
            <div role="main"> 
                <a href="#divID" data-role="button" 
                   data-inline="true" 
                   data-icon="bars">GeeksforGeeks</a> 
            </div> 
            <div data-role="panel" id="divID" data-theme="b"> 
                <div class="panel-content"> 
                    <h3>GeeksforGeeks</h3> 
                    <p>It is a computer science portal.</p> 
  
                    <a href="#demo-links" data-rel="close" 
                       data-role="button" data-theme="c" 
                       data-icon="delete"
                       data-inline="true">Close this panel</a> 
                </div> 
            </div> 
            <input type="button" id="Button" 
                   value="Value of the positionFixed option"> 
            <div id="log"></div> 
        </div> 
    </center> 
    <script> 
        $(document).ready(function () { 
            $("#divID").panel({ 
                positionFixed: true 
            }); 
            $("#divID").panel("option", "positionFixed", true); 
            $("#Button").on('click', function () { 
                var a = $("#divID").panel("option", "positionFixed"); 
                $("#log").html(a); 
            }); 
        }); 
    </script> 
</body> 
  
</html>

Output:

jQuery Mobile panel positionFixed Option

Reference: https://api.jquerymobile.com/panel/#option-positionFixed

Reffered: https://www.geeksforgeeks.org

JQuery

Related
jQuery Mobile Pagecontainer beforeload Event
jQuery Mobile Controlgroup container() Method
jQuery Mobile Page bindRemove() Method
jQuery Mobile Page removeContainerBackground() Method
jQuery Mobile Pagecontainer beforechange Event

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	7