demos: added inner iframe for draggable containment demo

jstroem · Dec 31, 2008 · d99415e · d99415e
1 parent 50b1aa2
commit d99415e
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 37 deletions.
diff --git a/demos/draggable/containment.html b/demos/draggable/containment.html
@@ -2,47 +2,15 @@
 <html lang="en">
 <head>
 	<title>jQuery UI Draggable - Containment</title>
-	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
-	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
-	<script type="text/javascript" src="../../ui/ui.core.js"></script>
-	<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
 	<link type="text/css" href="../demos.css" rel="stylesheet" />
-	<style type="text/css">
-	.ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }
+	<style type="text/css" media="screen">
+		body,html {
+			padding:0;margin:0;width:100%;height:100%;
+		}
 	</style>
-	<script type="text/javascript">
-	$(function() {
-		$("#draggable").draggable({ containment: 'window', scroll: false });
-		$("#draggable2").draggable({ containment: 'document' });
-		$("#draggable3").draggable({ containment: 'parent' });
-	});
-	</script>
 </head>
 <body>
-<div class="demo">
-
-<div id="draggable" class="ui-widget-content">
-	<p>I'm contained within the window</p>
-</div>
-
-<div id="draggable2" class="ui-widget-content">
-	<p>I'm contained within the document</p>
-</div>
-
-<div class="ui-widget-content">
-	<p id="draggable3" class='ui-widget-header'>I'm contained within my parent</p>
-</div>
-
-</div><!-- End demo -->
-
-<div class="demo-description">
-
-<p>
-<!-- Add description here -->
-</p>
-
-</div><!-- End demo-description -->
-<div style='width: 1px; height: 500px;'></div>
+<iframe frameborder='0' style='width: 100%; height: 99%;' src='containment_iframe.html'></iframe>	
 
 </body>
 </html>
diff --git a/demos/draggable/containment_iframe.html b/demos/draggable/containment_iframe.html
@@ -0,0 +1,48 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<title>jQuery UI Draggable - Containment</title>
+	<link type="text/css" href="../../themes/default/ui.all.css" rel="stylesheet" />
+	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
+	<script type="text/javascript" src="../../ui/ui.core.js"></script>
+	<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
+	<style type="text/css">
+	.ui-widget-content { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 5px; }
+	</style>
+	<script type="text/javascript">
+	$(function() {
+		$("#draggable").draggable({ containment: 'window', scroll: false });
+		$("#draggable2").draggable({ containment: 'document' });
+		$("#draggable3").draggable({ containment: 'parent' });
+	});
+	</script>
+</head>
+<body>
+<div class="demo">
+
+<div id="draggable" class="ui-widget-content">
+	<p>I'm contained within the window</p>
+</div>
+
+<div id="draggable2" class="ui-widget-content">
+	<p>I'm contained within the document</p>
+</div>
+
+<div class="ui-widget-content">
+	<p id="draggable3" class='ui-widget-header'>I'm contained within my parent</p>
+</div>
+
+</div><!-- End demo -->
+
+<div class="demo-description">
+
+<p>
+<!-- Add description here -->
+</p>
+
+</div><!-- End demo-description -->
+<div style='width: 1px; height: 500px;'></div>
+
+</body>
+</html>