I have made a resizable YoWindow widget for my website, using jQuery UI, and it seems to work well so I made this sample web page for anyone who wants to try it.
I had to modify the widget code to make it work, so you should edit the parameters manually (to change the location or landscape etc.) instead of pasting a fresh copy of the code over the modified one.
Don
Code: Select all
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>YoWindow - Living Weather - Resizable</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function () {
"use strict";
$("#resizable").resizable({maxWidth: 1200, maxHeight: 800, minWidth: 150, minHeight: 100, aspectRatio: true, handles: "se"});});
</script>
<link rel="StyleSheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/smoothness/jquery-ui.css" type="text/css" />
<style>
.ui-resizable-se {
cursor: se-resize;
width: 16px;
height: 16px;
right: -25px;
bottom: -25px;
}
.ui-icon {
width: 16px;
height: 16px;
background-position: 16px 16px;
}
.ui-icon-gripsmall-diagonal-se {
background-position: -80px -224px;
}
</style>
</head>
<body>
<div id="resizable" style="height: 200px; width: 300px; margin-left: auto; margin-right: auto;">
<object style="height: 100%; width: 100%;" type="application/x-shockwave-flash" data="http://swf.yowindow.com/yowidget3.swf">
<param name="movie" value="http://swf.yowindow.com/yowidget3.swf"/>
<param name="allowfullscreen" value="true"/>
<param name="wmode" value="opaque"/>
<param name="bgcolor" value="#FFFFFF"/>
<param name="flashvars" value="location_id=gn:2643741&location_name=City%20of%20London&landscape=airport&time_format=12&unit_system=us&background=#FFFFFF©right_bar=false"/>
<a href="http://WeatherScreenSaver.com?client=widget&link=copyright" style="width:220px;height:150px;display: block;text-indent: -50000px;font-size: 0px;background:#DDF url(http://yowindow.com/img/logo.png) no-repeat scroll 50% 50%;">Screen Saver</a>
</object>
<span style="float:left; font-size: 14px; font-family: Arial,Helvetica,sans-serif;"><a target="_top" href="http://WeatherScreenSaver.com?client=widget&link=copyright" style="color: #2fa900; font-weight:bold; text-decoration:none;" title="Screen Saver">ScreenSaver</a></span>
<span style="float:right; font-size: 14px; font-family: Arial,Helvetica,sans-serif;"><a href="http://yr.no" style="color: #2fa900; text-decoration:none;">yr.no</a></span>
</div>
<div class="font10px" style="height: 16px; width: 466px; margin-top: 35px; margin-left: auto; margin-right: auto;font-size: 14px; font-family: Arial,Helvetica,sans-serif; text-align: center;">Drag the triangle at the lower right corner of the widget to change it's size.</div>
</body>
</html>
