jQWidgets Forums

Tagged: end position, getHScrollPosition, getVScrollPosition, jqxpanel, panel

This topic contains 9 replies, has 2 voices, and was last updated by Nadezhda 10 years, 8 months ago.

Viewing 10 posts - 1 through 10 (of 10 total)

Author

i JQXpanel scroll Need to place at the end of the position. Posts
October 14, 2014 at 11:00 am i JQXpanel scroll Need to place at the end of the position. #61097

Siva
Participant

Hi JQXteam,

i JQXpanel scroll Need to place at the end of the position.

i have one radio button based on check condition show and hide div.
while checked radio button i show that div ,but scrool bar does not
place at end postion(Scroll bar get extended but scroll bar does not
come end position.

i saw ur $(‘#jqxPanel’).jqxPanel(‘scrollTo’, 10, 20); properties
it will static content while we do this properties it will work,
But i useing runtime control set (show and hide) at time it will not
work as we expected.

i place my radio button change event this code

if Checked:

$(‘#jqxPanel’).jqxPanel(‘scrollTo’,
$(“#jqxPanel”).jqxPanel(‘getHScrollPosition’),
$(‘#jqxPanel’).jqxPanel(‘getVScrollPosition’)+20);

if unChecked:

$(‘#jqxPanel’).jqxPanel(‘scrollTo’,
$(“#jqxPanel”).jqxPanel(‘getHScrollPosition’),
$(‘#jqxPanel’).jqxPanel(‘getVScrollPosition’)+20);

-Please me to come out this issue

Thanks,
Siva

October 14, 2014 at 11:01 am i JQXpanel scroll Need to place at the end of the position. #61098

Siva
Participant

Sorry.

if Checked:

$(‘#jqxPanel’).jqxPanel(‘scrollTo’,
$(“#jqxPanel”).jqxPanel(‘getHScrollPosition’),
$(‘#jqxPanel’).jqxPanel(‘getVScrollPosition’)+20);

if unChecked:

$(‘#jqxPanel’).jqxPanel(‘scrollTo’,
$(“#jqxPanel”).jqxPanel(‘getHScrollPosition’),
$(‘#jqxPanel’).jqxPanel(‘getVScrollPosition’)-20);

October 14, 2014 at 12:19 pm i JQXpanel scroll Need to place at the end of the position. #61106

Nadezhda
Participant

Hello Siva,

Here is an example which shows how to place scroll bars to the end position of jqxPanel: http://jsfiddle.net/5rse8ojw/.

Best Regards,
Nadezhda

jQWidgets team
http://www.jqwidgets.com/

October 16, 2014 at 9:42 am i JQXpanel scroll Need to place at the end of the position. #61236
Siva
Participant
Hi Nadezhda,
Thanks For Ur Reply. i tried you gave this idea ,it was working good.But if i using this two properties in my panel we could not achieve as we expected behavior.
autoUpdate: true,
sizeMode: “fixed”

if we remove this two properties .it will work.in my project i need this properties for panel area

Here is Example i attached u:(Please use this if u want)
—If u remove this two properties from panel is working fine:autoUpdate: true,
sizeMode: “fixed”

——————————————-Example FYR——————————————

<div id=’jqxPanel’ style=”font-size: 13px; font-family: Verdana; float: left;”>
<div style=’margin: 10px;’>
<h3>Early History of the Internet</h3>

</div>

<!–Content–>
<div style=’white-space: nowrap;’>
- 1961 First packet-switching papers
- 1966 Merit Network founded
- 1966 ARPANET planning starts
- 1969 ARPANET carries its first packets
- 1970 Mark I network at NPL (UK)
- 1970 Network Information Center (NIC)
- 1971 Merit Network’s packet-switched network operational
- 1971 Tymnet packet-switched network
- 1972 Internet Assigned Numbers Authority (IANA) established
- 1973 CYCLADES network demonstrated
- 1974 Telenet packet-switched network
- 1976 X.25 protocol approved
- 1979 Internet Activities Board (IAB)
- 1980 USENET news using UUCP
- 1980 Ethernet standard introduced
- 1981 BITNET established
</div>
<div id=’Test’>
asdasdasdasda
asdasdasdasd
asdasdasdasd
asdasdasdasdas
asdsadasdasdasda
dasdasdasdasd
asda
sda
sdas
d
asd
asd
as
das
d
asd
as
d
asd
as
</div>

</div>
<div>
<input style=”margin-left: 20px;” type=”button” id=’jqxButton’ value=”Scroll” />
<input style=”margin-left: 20px;” type=”button” id=’jqxTest’ value=”Test” />
</div>

$(“#jqxPanel”).jqxPanel({
width: 250,
height: 250,
theme: ‘energyblue’,
autoUpdate: true,
sizeMode: “fixed”

});

console.log($(‘#jqxPanel’).jqxPanel(‘height’));
console.log($(‘#jqxPanel’).jqxPanel(‘width’));
$(“#jqxButton”).jqxButton({
height: ’30px’,
width: ‘120px’,
theme: ‘energyblue’

});
$(‘#Test’).hide();
$(“#jqxTest”).jqxButton({
height: ’30px’,
width: ‘120px’,
theme: ‘energyblue’
});
$(‘#jqxButton’).on(‘click’, function () {
$(‘#jqxPanel’).jqxPanel(‘scrollTo’, 100, 100);
});

$(‘#jqxTest’).on(‘click’, function () {

$(‘#Test’).show();
var height = $(‘#jqxPanel’).jqxPanel(‘height’);
var width = $(‘#jqxPanel’).jqxPanel(‘width’);
$(‘#jqxPanel’).jqxPanel(‘scrollTo’, width, height);
console.log(height);
console.log(width);
});

Thanks,
Shiva
October 16, 2014 at 11:27 am i JQXpanel scroll Need to place at the end of the position. #61242
Nadezhda
Participant
Hi Shiva,

Here is an example with your additional functionality (test and scroll buttons) and it works on our side.
Please, make sure all your jQWidgets files are updated to version 3.5.0.
```
<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <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="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            $("#jqxPanel").jqxPanel({
                width: 250,
                height: 250,
                theme: 'energyblue',
                autoUpdate: true,
                sizeMode: "fixed"
            });

            console.log($('#jqxPanel').jqxPanel('height'));
            console.log($('#jqxPanel').jqxPanel('width'));
            $('#Test').hide();
            $('#jqxTest').jqxButton({
                height: '30px',
                width: '60px',
                theme: 'energyblue'
            });
            $('#jqxButton').jqxButton({
                height: '30px',
                width: '60px',
                theme: 'energyblue'
            });

            $('#jqxTest').on('click', function () {
                var height = $('#jqxPanel').jqxPanel('height');
                var width = $('#jqxPanel').jqxPanel('width');
                $('#jqxPanel').jqxPanel('scrollTo', width, height);
                console.log(height);
                console.log(width);
            })

            $('#jqxButton').on('click', function () {
                var height = $('#jqxPanel').jqxPanel('height');
                var width = $('#jqxPanel').jqxPanel('width');
                $('#jqxPanel').jqxPanel('scrollTo', width - 150, height - 150);
            });

        });
    </script>
</head>
<body class='default'>
    <div id='jqxPanel' style="font-size: 13px; font-family: Verdana;">
        <div style='margin: 10px;'>
            <h3>Early History of the Internet</h3>
        </div>
        
        <div style='white-space: nowrap;'>
            <ul>
                <li>1961 First packet-switching papers</li>
                <li>1966 Merit Network founded</li>
                <li>1966 ARPANET planning starts</li>
                <li>1969 ARPANET carries its first packets</li>
                <li>1970 Mark I network at NPL (UK)</li>
                <li>1970 Network Information Center (NIC)</li>
                <li>1971 Merit Network's packet-switched network operational</li>
                <li>1971 Tymnet packet-switched network</li>
                <li>1972 Internet Assigned Numbers Authority (IANA) established</li>
                <li>1973 CYCLADES network demonstrated</li>
                <li>1974 Telenet packet-switched network</li>
                <li>1976 X.25 protocol approved</li>
                <li>1979 Internet Activities Board (IAB)</li>
                <li>1980 USENET news using UUCP</li>
                <li>1980 Ethernet standard introduced</li>
                <li>1981 BITNET established</li>
            </ul>
        </div>
        <span id="Test">asdasdasdasda asdasdasdasd asdasdasdasd asdasdasdasdas asdsadasdasdasda dasdasdasdasd asda sda sdas d asd asd as das d asd as d asd as
        </span>
    </div>
    <br />
    <div>
        <input style="margin-left: 20px;" type="button" id="jqxButton" value="Scroll" />
        <input style="margin-left: 20px;" type="button" id="jqxTest" value="Test" />
    </div>
</body>
</html>
```
Best Regards,
Nadezhda

jQWidgets team
http://www.jqwidgets.com/
October 16, 2014 at 11:58 am i JQXpanel scroll Need to place at the end of the position. #61243

Siva
Participant

Hi Nadezhda,

Thanks for ur reply.
As u Create span Id by initial hide that id like eg($(‘#Test’).hide()) while Click event u need to show ($(‘#Test’).show()) then u try to place ur cursor at the end position .its not working .i previously uploaded code haveing that example.

in ur button click event u r just set cursor position.But i need runtime ,i need to show and hide control at the time Cursor is not pointing at end position.thats what i detailed explained and send u code sample.

UR Code:

$(‘#jqxTest’).on(‘click’, function () {
var height = $(‘#jqxPanel’).jqxPanel(‘height’);
var width = $(‘#jqxPanel’).jqxPanel(‘width’);
$(‘#jqxPanel’).jqxPanel(‘scrollTo’, width, height);
console.log(height);
console.log(width);
})

My Code :previously i send that

$(‘#jqxTest’).on(‘click’, function () {

$(‘#Test’).show();
var height = $(‘#jqxPanel’).jqxPanel(‘height’);
var width = $(‘#jqxPanel’).jqxPanel(‘width’);
$(‘#jqxPanel’).jqxPanel(‘scrollTo’, width, height);
console.log(height);
console.log(width);
});

See my Above code FYR

i hope u understand my problem….Run time while we (hide and show) any DIV or span using that two properties its not working.

please help me to come out

thanks,
Siva

October 16, 2014 at 12:17 pm i JQXpanel scroll Need to place at the end of the position. #61244

Nadezhda
Participant

Hi Siva,

Could you, please, provide us a complete sample so we can determine the source of the issue. Remember to format your code by selecting it and pressing the code button in the toolbar.

Best Regards,
Nadezhda

jQWidgets team
http://www.jqwidgets.com/

October 16, 2014 at 12:26 pm i JQXpanel scroll Need to place at the end of the position. #61245
Siva
Participant
Hi Nadezhda,

<!DOCTYPE html>
<html lang=”en”>
<head>
<title></title>
<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=”../../scripts/demos.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxpanel.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {

$(“#jqxPanel”).jqxPanel({
width: 250,
height: 250,
theme: ‘energyblue’,
autoUpdate: true,
sizeMode: “fixed”

});

console.log($(‘#jqxPanel’).jqxPanel(‘height’));
console.log($(‘#jqxPanel’).jqxPanel(‘width’));
$(“#jqxButton”).jqxButton({
height: ’30px’,
width: ‘120px’,
theme: ‘energyblue’

});
$(‘#Test’).hide();
$(“#jqxTest”).jqxButton({
height: ’30px’,
width: ‘120px’,
theme: ‘energyblue’
});
$(‘#jqxButton’).on(‘click’, function () {
$(‘#jqxPanel’).jqxPanel(‘scrollTo’, 100, 100);
});

$(‘#jqxTest’).on(‘click’, function () {

$(‘#Test’).show();
var height = $(‘#jqxPanel’).jqxPanel(‘height’);
var width = $(‘#jqxPanel’).jqxPanel(‘width’);
$(‘#jqxPanel’).jqxPanel(‘scrollTo’, width, height);
console.log(height);
console.log(width);
});

});
</script>
</head>
<body class=’default’>
<div id=’jqxPanel’ style=”font-size: 13px; font-family: Verdana;”>
<div style=’margin: 10px;’>
<h3>Early History of the Internet</h3>
</div>
<!–Content–>
<div style=’white-space: nowrap;’>
- 1961 First packet-switching papers
- 1966 Merit Network founded
- 1966 ARPANET planning starts
- 1969 ARPANET carries its first packets
- 1970 Mark I network at NPL (UK)
- 1970 Network Information Center (NIC)
- 1971 Merit Network’s packet-switched network operational
- 1971 Tymnet packet-switched network
- 1972 Internet Assigned Numbers Authority (IANA) established
- 1973 CYCLADES network demonstrated
- 1974 Telenet packet-switched network
- 1976 X.25 protocol approved
- 1979 Internet Activities Board (IAB)
- 1980 USENET news using UUCP
- 1980 Ethernet standard introduced
- 1981 BITNET established
</div>
<div id=’Test’>
asdasdasdasda
asdasdasdasd
asdasdasdasd
asdasdasdasdas
asdsadasdasdasda
dasdasdasdasd
asda
sda
sdas
d
asd
asd
as
das
d
asd
as
d
asd
as
</div>
</div>
<br />
<div>
<input style=”margin-left: 20px;” type=”button” id=”jqxButton” value=”Scroll” />
<input style=”margin-left: 20px;” type=”button” id=”jqxTest” value=”Test” />
</div>
</body>
</html>
October 16, 2014 at 12:27 pm i JQXpanel scroll Need to place at the end of the position. #61246
Siva
Participant
Sorry…!!!!!
```
<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <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="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
   <script type="text/javascript">
       $(document).ready(function () {

           $("#jqxPanel").jqxPanel({
               width: 250,
               height: 250,
               theme: 'energyblue',
               autoUpdate: true,
               sizeMode: "fixed"
   
           });

           console.log($('#jqxPanel').jqxPanel('height'));
           console.log($('#jqxPanel').jqxPanel('width'));
           $("#jqxButton").jqxButton({
               height: '30px',
               width: '120px',
               theme: 'energyblue'

           });
           $('#Test').hide();   
           $("#jqxTest").jqxButton({
               height: '30px',
               width: '120px',
               theme: 'energyblue'
           });
           $('#jqxButton').on('click', function () {
               $('#jqxPanel').jqxPanel('scrollTo', 100, 100);
           });

           $('#jqxTest').on('click', function () {

               $('#Test').show();
               var height = $('#jqxPanel').jqxPanel('height');
               var width = $('#jqxPanel').jqxPanel('width');
               $('#jqxPanel').jqxPanel('scrollTo', width, height);
               console.log(height);
               console.log(width);
           });

       });
</script>
</head>
<body class='default'>
    <div id='jqxPanel' style="font-size: 13px; font-family: Verdana;">
        <div style='margin: 10px;'>
            <h3>Early History of the Internet</h3>
        </div>
        
        <div style='white-space: nowrap;'>
            <ul>
                <li>1961 First packet-switching papers</li>
                <li>1966 Merit Network founded</li>
                <li>1966 ARPANET planning starts</li>
                <li>1969 ARPANET carries its first packets</li>
                <li>1970 Mark I network at NPL (UK)</li>
                <li>1970 Network Information Center (NIC)</li>
                <li>1971 Merit Network's packet-switched network operational</li>
                <li>1971 Tymnet packet-switched network</li>
                <li>1972 Internet Assigned Numbers Authority (IANA) established</li>
                <li>1973 CYCLADES network demonstrated</li>
                <li>1974 Telenet packet-switched network</li>
                <li>1976 X.25 protocol approved</li>
                <li>1979 Internet Activities Board (IAB)</li>
                <li>1980 USENET news using UUCP</li>
                <li>1980 Ethernet standard introduced</li>
                <li>1981 BITNET established</li>
            </ul>
        </div>
        <div id=’Test’>
			asdasdasdasda
			asdasdasdasd
			asdasdasdasd
			asdasdasdasdas
			asdsadasdasdasda
			dasdasdasdasd
			asda
			sda
			sdas
			d
			asd
			asd
			as
			das
			d
			asd
			as
			d
			asd
			as
	</div>
    </div>
    <br />
    <div>
        <input style="margin-left: 20px;" type="button" id="jqxButton" value="Scroll" />
        <input style="margin-left: 20px;" type="button" id="jqxTest" value="Test" />
    </div>
</body>
</html>
```
October 16, 2014 at 1:45 pm i JQXpanel scroll Need to place at the end of the position. #61252

Nadezhda
Participant

Hi Siva,

You can create new div tag with id(for example “myDivTagID”) and put your content into the new div and use the statement var height = $("#myDivTagID").height() to get the height of the content.
With ‘scrollTo’ method you can scroll the scrollbars to specific position on the pannel. If you want to use the height from above statement just put it as parameter of ‘scrollTo’.

Best Regards,
Nadezhda

jQWidgets team
http://www.jqwidgets.com/
Author

Posts

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.