jQWidgets jqxTouch orientationChangeEnabled Property

Last Updated : 14 Nov, 2021

jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful, optimized, platform-independent, and widely supported framework. The jqxTouch is used for identifying and triggering touch events such as ‘swipe’, ‘swipe left’, ‘swipe right’, ‘tap’, and ‘orientationchange’ on touch-enabled devices.

The orientationChangeEnabled property is used for indicating whether the orientationchange event is enabled or not for the specified jqxTouch widget. This property accepts two possible values that are true and false.

Syntax:

For setting the orientationChangeEnabled property:

$('#jqxTouch').jqxTouch({orientationChangeEnabled: true});

For getting the orientationChangeEnabled property:

var orientationChangeEnabled = $('#jqxTouch')
    .jqxTouch('orientationChangeEnabled');

Linked Files: Download jQWidgets from the given link. In the HTML file, locate the script files in the downloaded folder.

<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”scripts/jquery.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxtouch.js”></script>
<script type=”text/javascript” src=”scripts/jqx-all.js”></script>

Example: The below example illustrates the jQWidgets jqxTouch orientationChangeEnabled property. In the below example, the value for the orientationChangeEnabled property has been set to true.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <link rel="stylesheet" 
          href="jqwidgets/styles/jqx.base.css" 
          type="text/css"/> 
    <script type="text/javascript" 
            src="scripts/jquery.js"> 
    </script> 
    <script type="text/javascript" 
            src="jqwidgets/jqxcore.js"> 
    </script> 
    <script type="text/javascript" 
            src="jqwidgets/jqxtouch.js"> 
    </script> 
    <script type="text/javascript" 
            src="scripts/jqx-all.js"> 
    </script> 
</head> 
  
<body> 
    <center> 
        <h1 style="color: green;"> 
            GeeksforGeeks 
        </h1> 
        <h3> 
            jQWidgets jqxTouch orientationChangeEnabled Property 
        </h3> 
        <div id="jqx_Touch"> 
            <div style="height: 100px;  
                      width: 350px; 
                      color: black;  
                      border-radius: 10px; 
                      background: green;"> 
                <b>Swipe, Swipe Left, Swipe Right and Tap</b> 
            </div> 
        </div> 
        <input type="button" style="margin: 28px;"
               id="button_for_orientationChangeEnabled"
         value="Value of the orientationChangeEnabled property"/> 
        <div id="log"></div> 
        <script type="text/javascript"> 
            $(document).ready(function () { 
                $('#jqx_Touch').jqxTouch({ 
                    orientationChangeEnabled: true 
                }); 
                $('#jqx_Touch').on( 
                  'swipeleft', function () { 
                    $("#log").html("Swiped left"); 
                }); 
                $('#jqx_Touch').on( 
                  'swiperight', function () { 
                    $("#log").html("Swiped right"); 
                }); 
                $('#jqx_Touch').on( 
                  'tap', function () { 
                    $("#log").html("Tapped"); 
                }); 
                $('#jqx_Touch').on( 
                  'swipe', function () { 
                    $("#log").html("Swiped"); 
                }); 
                $("#button_for_orientationChangeEnabled"). 
                    jqxButton({ 
                        width: 350 
                    }); 
                $("#button_for_orientationChangeEnabled").click( 
                    function () { 
                        var orientationChangeEnabled_Value = 
                          $('#jqx_Touch'). 
                             jqxTouch('orientationChangeEnabled'); 
                     $("#log").html(orientationChangeEnabled_Value); 
                    }); 
            }); 
        </script> 
    </center> 
</body> 
  
</html>