Mercurial > hg > digilib-old

changeset 762:aab01da232ef jquery

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
small preparations for SVG
author hertzhaft
date Thu, 10 Feb 2011 09:20:56 +0100
parents 16778bd2de7c
children f640f1fe8f80
files client/digitallibrary/jquery/jquery-test-embedded.html client/digitallibrary/jquery/jquery-test-full.html client/digitallibrary/jquery/svg/svgBasics.html
diffstat 3 files changed, 76 insertions(+), 24 deletions(-) [+]
line wrap: on
line diff
--- a/client/digitallibrary/jquery/jquery-test-embedded.html	Wed Feb 09 10:22:29 2011 +0100
+++ b/client/digitallibrary/jquery/jquery-test-embedded.html	Thu Feb 10 09:20:56 2011 +0100
@@ -15,6 +15,11 @@
                 /* width: 220px; */
             }
 
+            div.svg {
+                position: absolute;
+                background: transparent;
+            }
+
             td {
                 vertical-align: top;
                 }
--- a/client/digitallibrary/jquery/jquery-test-full.html	Wed Feb 09 10:22:29 2011 +0100
+++ b/client/digitallibrary/jquery/jquery-test-full.html	Thu Feb 10 09:20:56 2011 +0100
@@ -9,6 +9,26 @@
                  background: silver;
             }
 
+            div.digilib {
+                /* padding for buttons and bird-div */
+                padding-right: 18px;
+                padding-bottom: 100px;
+                /* width: 220px; */
+            }
+
+            div.svg {
+                position: absolute;
+                background: transparent;
+            }
+
+            td {
+                vertical-align: top;
+                }
+
+            div#test:hover {
+                background-color: cornsilk;
+                }
+
             #debug {
                 background-color: beige;
                 position: absolute;
@@ -21,6 +41,17 @@
                 font-size: 9px;
                 }
 
+            div._log {
+                color: grey;
+                }
+
+            div._debug {
+                color: darkgreen;
+                }
+
+            div._error {
+                color: red;
+                }
         </style>
 
         <script type="text/javascript" src="jquery-1.4.4.js"></script>
--- a/client/digitallibrary/jquery/svg/svgBasics.html	Wed Feb 09 10:22:29 2011 +0100
+++ b/client/digitallibrary/jquery/svg/svgBasics.html	Thu Feb 10 09:20:56 2011 +0100
@@ -1,19 +1,28 @@
+
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
      "http://www.w3.org/TR/html4/strict.dtd">
 <html>
-<head>
-<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
-<title>jQuery SVG Basics</title>
-<style type="text/css">
+    <head>
+        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
+        <title>jQuery SVG Basics</title>
+        <style type="text/css">
 @import "jquery.svg.css";
 
-#svgbasics { width: 400px; height: 300px; border: 1px solid #484; }
-</style>
-<script type="text/javascript" src="../jquery-1.4.4.js"></script>
-<script type="text/javascript" src="jquery.svg.js"></script>
-<script type="text/javascript">
+#svgbasics { position: absolute; border: 1px solid blue; }
+#img img {width: 400px; }
+
+        </style>
+        <script type="text/javascript" src="../dlGeometry.js"></script>
+        <script type="text/javascript" src="../jquery-1.4.4.js"></script>
+        <script type="text/javascript" src="jquery.svg.js"></script>
+        <script type="text/javascript">
 $(function() {
-	$('#svgbasics').svg({onLoad: drawInitial});
+    var geom = dlGeometry();
+    var svg = $('#svgbasics');
+    var $div = $('#img img');
+    var divrect = geom.rectangle($div);
+    divrect.addPosition({x: -1, y: -1}).adjustDiv(svg);
+    svg.svg({onLoad: drawInitial});
 	$('button').click(drawShape);
 });
 
@@ -22,6 +31,7 @@
 	var g = svg.group({stroke: 'black', 'stroke-width': 2});
 	svg.line(g, 15, 75, 135, 75);
 	svg.line(g, 75, 15, 75, 135);
+	svg.configure({viewPort: '0 0 100 100', overflow: 'visible' }, false);
 }
 
 var colours = ['purple', 'red', 'orange', 'yellow', 'lime', 'green', 'blue', 'navy', 'black'];
@@ -51,24 +61,30 @@
 	else if (shape == 'clear') {
 		svg.clear();
 	}
+	else if (shape == 'zoom') {
+		svg.clear();
+	}
+	
 }
 
 function random(range) {
 	return Math.floor(Math.random() * range);
 }
 </script>
-</head>
-<body>
-<h1>jQuery SVG Basics</h1>
-<p>This page demonstrates the very basics of the <a href="http://keith-wood.name/svg.html">jQuery SVG plugin</a>.
-	It contains the minimum requirements for using the plugin and
-	can be used as the basis for your own experimentation.</p>
-<p>The page creates an SVG document in the area below and draws an initial display.
-	The buttons then add randomly sized and coloured shapes on demand.</p>
-<p>For more detail see the <a href="http://keith-wood.name/svgRef.html">documentation reference</a> page.</p>
-<div id="svgbasics"></div>
-<p><button id="rect">Add rectangle</button> <button id="line">Add line</button>
-	<button id="circle">Add circle</button> <button id="ellipse">Add ellipse</button>
-	<button id="clear">Clear</button></p>
-</body>
+    </head>
+    <body>
+        <h1>jQuery SVG</h1>
+        <div id="img">
+            <img src="peterskuppel.jpg" />
+        </div>
+        <div id="svgbasics"></div>
+        <p>
+            <button id="rect">Add rectangle</button>
+            <button id="line">Add line</button>
+            <button id="circle">Add circle</button>
+            <button id="ellipse">Add ellipse</button>
+            <button id="zoom">Zoom</button>
+            <button id="clear">Clear</button>
+        </p>
+    </body>
 </html>