jQWidgets jqxListBox ensureVisible() Method

Last Updated : 14 Sep, 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 jqxListBox is used to illustrate a jQuery ListBox widget which comprises a list of electable elements.

The ensureVisible() method is used to ensure if the stated item is visible. This method scrolls towards the item if necessary. Moreover, in place of the index, the value of the item can also be passed. It supports an optional boolean parameter which states whether to prepare the stated item to be the highest visible item in the stated list. It does not return anything.

Syntax:

$("#jqxListBox").jqxListBox('ensureVisible', index);  
$("#jqxListBox").jqxListBox('ensureVisible', "value of the Index");

Parameter:

item: The stated item of type number, string, or object.

Linked Files: Download jQWidgets from the 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/jqx-all.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/jqxlistbox.js”></script>

Example: The below example illustrates the jqxListBox ensureVisible() method in jQWidgets.

HTML

<html> 
    <head> 
        <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/jqx-all.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/jqxlistbox.js"> 
        </script> 
    </head> 
    <body> 
        <center> 
            <h1 style="color: green;"> 
                GeeksforGeeks 
            </h1> 
            <h3> 
                jQWidgets jqxListBox ensureVisible() Method 
            </h3> 
            <div id="jqxLB"></div> 
            <br /> 
            <input type="button" id="jqxBtn" 
                   style="padding: 5px 20px;"
                   value="Move to the fifth element" /> 
        </center> 
        <script type="text/javascript"> 
            $(document).ready(function () { 
                var data = [ 
                "Computer Science", 
                "C Programming", 
                "CSS",  
                "Java Programming",  
                "Python Programming", 
                "Scala"]; 
  
                $("#jqxLB").jqxListBox({ 
                    source: data, 
                    width: "200px", 
                    height: "100px", 
                }); 
                $("#jqxLB").jqxListBox("disableAt", 3); 
                $("#jqxBtn").on("click", function () { 
                    $("#jqxLB").jqxListBox("ensureVisible", 5); 
                }); 
            }); 
        </script> 
    </body> 
</html>