YoWidget Resizable

YoWindow widget Questions, Suggestions and Bugs
Post Reply
User avatar
Don
Posts: 687
Joined: Tue Sep 14, 2010 12:14 am
Name: Don
Location: Roseville, California, United States of America

YoWidget Resizable

Post by Don » Wed May 01, 2013 8:16 pm

Hey everyone,

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&copyright_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>
Just some stuff that I find useful. --> http://home.surewest.net/donjr

User avatar
Mallorca
Posts: 1757
Joined: Sun Jul 11, 2010 8:59 am
Name: Werner Heidotting
Location: Son Servera, Mallorca, Spain
Contact:

Re: YoWidget Resizable

Post by Mallorca » Thu May 02, 2013 8:57 am

Hi Don,

great script :Yahoo!:
I put it on my testsite http://www.wetter3.toernover.com/index. ... /testseite

Thank you again :beer:
Werner

User avatar
Don
Posts: 687
Joined: Tue Sep 14, 2010 12:14 am
Name: Don
Location: Roseville, California, United States of America

Re: YoWidget Resizable

Post by Don » Thu May 02, 2013 10:03 am

Mallorca wrote:Hi Don,

great script :Yahoo!:
I put it on my testsite http://www.wetter3.toernover.com/index. ... /testseite

Thank you again :beer:
Werner
Hey Werner,

I'm glad you like it. :D

Don
Just some stuff that I find useful. --> http://home.surewest.net/donjr

User avatar
par
Posts: 8089
Joined: Mon Sep 21, 2009 11:56 am
Name: Pasha
Location: Saint-Petersburg, Russia
Contact:

Re: YoWidget Resizable

Post by par » Mon May 13, 2013 5:02 pm

Wow!
Great Job, Don!
Very professional and looks cool :good:
Get YoWindow weather app for your phone or tablet.

Image Image Image

Post Reply