jQWidgets Forums

Tagged: jqxScrollView, jqxwindow, Scroll view, scrollview, window

This topic contains 4 replies, has 2 voices, and was last updated by Dimitar 11 years, 11 months ago.

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

Author

Scroll view changing view Posts

May 8, 2013 at 7:38 am Scroll view changing view #20731

Mhanna AbuTareef

Participant

Hi,

I’m using jqxScrollView inside jqxWindow, i want to change the views only by a button.

What is really happening:

1. That i can change a view also by dragging using the mouse.

2. When resizing the window i see part of the next view, actually i don’t wanna see it.

Regards,

Mhanna

May 8, 2013 at 7:50 am Scroll view changing view #20733

Dimitar

Participant

Hello Mhanna,

1) This is the default behaviour of jqxScrollView. It cannot be altered.

2) We could not reproduce the reported behaviour. Please post a sample code which demonstrates it and remember to update your version of jQWidgets to 2.8.3.

Best Regards,
Dimitar

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

May 8, 2013 at 11:43 am Scroll view changing view #20765

Mhanna AbuTareef

Participant

Hi,

Try to resize the window from the right side.
1) Looks like the picture gonna be changed
2) if you try to resize from the right to the left side:
a. the window will resize.
b. the picture will change

<!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.classic.css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.8.3.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" src="../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript">
        $(function () {
		var theme = getDemoTheme();
		
		 $('#customWindow').jqxWindow({ width: 600, height: 450, theme: theme});
				
            
            $('#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="customWindow">
		<div id="customWindowHeader">
			Window
		</div>
		<div id="customWindowContent" style="overflow: hidden">
			<div id="photoGallery">
				<div><div class="photo" style="background-image: url(../../images/imageNature1.jpg)"></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>
    </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>

May 8, 2013 at 11:54 am Scroll view changing view #20766

Mhanna AbuTareef

Participant

Hi,
Why the scroll view can’t be fit to the whole window’s content?

May 9, 2013 at 5:17 am Scroll view changing view #20809

Dimitar

Participant

Hi Mhanna,

The scroll view’s width and height can be set to 100% to fit the window’s content. However, the reported issue is still present. We will try to fix it as soon as possible.

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.