Window resize issue - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

This topic contains 3 replies, has 2 voices, and was last updated by Mhanna AbuTareef 11 years, 9 months ago.

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

Author

Window resize issue Posts

June 10, 2013 at 10:01 am Window resize issue #22864

Participant

Hi,

While using scroll view inside a window’s content, it’s impossible to set window’s width to value greater than 800. why?

Regards,

Mhanna

June 10, 2013 at 10:15 am Window resize issue #22868

Mhanna AbuTareef

Participant

Hi,

Follow is a sample which demonstrates the issue of the previous post

<!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: 1000, height: 450, theme: theme});
				
            
            $('#photoGallery').jqxScrollView({ width: 1000, 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>

June 11, 2013 at 2:41 pm Window resize issue #22972

Peter Stoev

Keymaster

Hi,

Actually that is how the widget is supposed to work. The maxWidth and maxHeight properties restrict the Resizing of the widget. You need to set these, too if you wish to resize a window above width=800px and height=600px.

Best Regards,
Peter Stoev

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

June 12, 2013 at 3:27 pm Window resize issue #23042

Mhanna AbuTareef

Participant

Hi,

Already using maxWidth and maxHeight limitations. but the real problem was because i used integer values in the dimensions.
when i changed it to string (with suffix ‘px’), it works!

Anyway, it looks that minWidth can’t be instring format, for Instance, the following code generates an error:

$('#customWindow').jqxWindow({ width: "600px", height: "400px", maxWidth: "1000px", minWidth: "300px", maxHeight: "500px", minHeight: "200px", theme: theme});

Regards,

Mhanna

Author

Posts

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

You must be logged in to reply to this topic.