Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App

Related Articles

jQWidgets jqxPanel getHScrollPosition() Method

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

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 jqxPanel is used to illustrate a jQuery panel widget which is a holder for different widgets or elements. Moreover, it intuitively appends horizontal as well as vertical scrollbars, in case the stated content is not completely viewable.

The getHScrollPosition() method returns the position of the horizontal scrollbar from the displayed jqxPanel. It does not accept any parameter and returns a number.


var position = $("#Selector").jqxPanel('getHScrollPosition');

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-1.11.1.min.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxpanel.js”></script>  

Example: The below example illustrates the jqxPanel getHScrollPosition() method in jQWidgets.


<!DOCTYPE html>
<html lang="en">
    <link rel="stylesheet" 
          type="text/css" />
    <script type="text/javascript" 
    <script type="text/javascript" 
    <script type="text/javascript" 
    <script type="text/javascript" 
    <script type="text/javascript" 
        <h1 style="color:green">
        <h3>jQWidgets jqxPanel getHScrollPosition() method </h3>
        <div id='jqxp' 
             style="font-size:15px; font-family:Verdana; float:center;">
            <div style='margin-top: 12px;'>
                <h3>Topics covered by GeeksforGeeks</h3>
            <div style="white-space: nowrap; text-align: left;">
                    <li>Theory Of Computation</li>
                    <li>C Programming</li>
            <input type="button" id="jqxBtn" 
                style="margin-top: 25px" value="Click here" />
        <div id="log"></div>
    <script type="text/javascript">
        $(document).ready(function () {
                width: "180px",
                height: "170px",
                theme: 'energyblue'
                width: "180px",
                height: "30px",
                theme: 'energyblue',
            $("#jqxBtn").on("click", function () {
                $('#jqxp').jqxPanel('scrollTo', 20, 35);
                var hsp = $('#jqxp').jqxPanel('getHScrollPosition');
                $('#log').text("Position of horizontal scrollbar: " + hsp);




My Personal Notes arrow_drop_up
Last Updated : 05 May, 2022
Like Article
Save Article
Similar Reads
Related Tutorials