<!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-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
>
</
head
>
<
body
>
<
center
>
<
h1
style
=
"color: green"
>
GeeksforGeeks
</
h1
>
<
h3
>jQWidgets jqxPanel getScrollWidth()
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
>
<
div
style
=
"margin-top: 15px; text-align: left;"
>
<
ul
>
<
li
>C Programming</
li
>
<
li
>Datastructure</
li
>
<
li
>javascript</
li
>
<
li
>Algorithm</
li
>
<
li
>Python</
li
>
<
li
>JQuery</
li
>
<
li
>Scala</
li
>
<
li
>Java</
li
>
<
li
>Html</
li
>
<
li
>C++</
li
>
<
li
>TOC</
li
>
</
ul
>
</
div
>
</
div
>
<
div
>
<
input
type
=
"button"
id
=
"jqxBtn"
style
=
"margin-top: 25px"
value
=
"Click here"
/>
</
div
>
<
br
>
<
div
id
=
"log"
></
div
>
</
center
>
<
script
type
=
"text/javascript"
>
$(document).ready(function () {
$("#jqxp").jqxPanel({
width: "200px",
height: "170px",
theme: 'energyblue'
});
$("#jqxBtn").jqxButton({
width: "180px",
height: "30px",
theme: 'energyblue',
});
$("#jqxBtn").on("click", function () {
var w = $('#jqxp').jqxPanel('getScrollWidth');
$('#log').text("Width of scrollable: " + w);
});
});
</
script
>
</
body
>
</
html
>