jQWidgets Forums

This topic contains 3 replies, has 2 voices, and was last updated by Peter Stoev 11 years, 6 months ago.

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

Author

ScrollView – jqxScrollView – Unable to scroll vertically Posts

September 13, 2013 at 2:13 am ScrollView – jqxScrollView – Unable to scroll vertically #28895

Member

Hi Experts,
Good morning.
I’m currently using one of widgets, which is jqxScrollView, but I realize as times my content is getting more and long, and require to scroll vertically, I’m unable to do it, can you help to advise if I can bypass it?

Thank you.

Regards,
Alan Yeo

September 13, 2013 at 4:15 am ScrollView – jqxScrollView – Unable to scroll vertically #28897

Peter Stoev

Keymaster

Hi Alan Yeo,

The widget unfortunately does not have such feature. We cannot offer you a solution about that.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

September 13, 2013 at 4:21 am ScrollView – jqxScrollView – Unable to scroll vertically #28900

alanyeo

Member

Hi Peter,
Thank you for your prompt reply. However, to bypass the issue, can the widget to get the heightest div height among all div tag in the widget?

Thank you.

September 13, 2013 at 4:39 am ScrollView – jqxScrollView – Unable to scroll vertically #28903

Peter Stoev

Keymaster

Hi alanyeo,

If your target is to display content that overflows, please look at the sample below:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jQuery ScrollView, ScrollView Widget, ScrollView, Mobile ScrollView" />
    <meta name="description" content="jqxScrollView represents a widget which can be used for viewing content which is wider than the visible area outlined by the device's screen. Specific item can be chosen using drag movements or clicking/tapping on the buttons at the bottom of the jqxScrollView." />
    <title id="Description">jqxScrollView represents a widget which can be used for viewing content which is wider than the visible area outlined by the device's screen. Specific item can be chosen using drag movements or clicking/tapping on the buttons at the bottom of the jqxScrollView.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css"/>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.arctic.css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollview.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript">
        $(function () {
            var theme = getDemoTheme();
            $('#photoGallery').jqxScrollView({ width: 600, height: 450, buttonsOffset: [0, 0], theme: theme });
            $('#StartBtn').jqxButton({ theme: theme });
            $('#StopBtn').jqxButton({ theme: theme });
            $('#StartBtn').click(function () {
                $('#photoGallery').jqxScrollView({ slideShow: true });
            });
            $('#StopBtn').click(function () {
                $('#photoGallery').jqxScrollView({ slideShow: false });
            });
        });
    </script>
    <style type="text/css">
        .photo
        {
            width: 600px;
            height: 450px;
            background-color: #000;
            background-position: center;
            background-repeat: no-repeat;
        }
    </style>
</head>
<body class="default">
    <div id="photoGallery">
        <div style="overflow: auto;"><div style="white-space: normal; width: 570px; color: white;">
        Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
        Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
        Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
        Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
        Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
        Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
        Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
        Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
        Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
        Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
        Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
        Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
        Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
        Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
        Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
        Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
        Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
        Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
         </div></div>
        <div><div class="photo" style="background-image: url(../../images/imageNature2.jpg)"></div></div>
        <div><div class="photo" style="background-image: url(../../images/imageNature3.jpg)"></div></div>
        <div><div class="photo" style="background-image: url(../../images/imageNature4.jpg)"></div></div>
        <div><div class="photo" style="background-image: url(../../images/imageNature5.jpg)"></div></div>
    </div>
    <div style='margin-top: 20px;'>
        <br />
        <div>
            <input type="button" value="Start Slideshow" id="StartBtn" />
            <input type="button" value="Stop Slideshow" id="StopBtn" />
        </div>
    </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.