Permalink
Browse files

fixed examples, iphone tuneups, transform offset fix

  • Loading branch information...
1 parent 5638ba4 commit 5d9b415863a49b70ae9688ce9f83214dfb5f88fa @jaukia committed Aug 7, 2012
View
@@ -1,3 +1,4 @@
build
node_modules
+start-test-server.sh
@@ -7,31 +7,18 @@
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="../../jquery.zoomooz.min.js"></script>
- <script type="text/javascript">
- $(document).ready(function() {
- $(".zoom").click(function(evt) {
- evt.stopPropagation();
- $(this).zoomTo();
- });
- $(window).click(function(evt) {
- evt.stopPropagation();
- $("body").zoomTo();
- });
- $("body").zoomTo();
- });
- </script>
</head>
- <body>
- <div id="a" class="zoom level0">
- <div id="a1" class="zoom level1">
- <div id="a11" class="zoom level2">a11</div>
- <div id="a12" class="zoom level2">a12</div>
- <div id="a13" class="zoom level2">a13</div>
- <div id="a14" class="zoom level2">a14</div>
+ <body class="zoomContainer">
+ <div id="a" class="zoomTarget level0">
+ <div id="a1" class="zoomTarget level1">
+ <div id="a11" class="zoomTarget level2">a11</div>
+ <div id="a12" class="zoomTarget level2">a12</div>
+ <div id="a13" class="zoomTarget level2">a13</div>
+ <div id="a14" class="zoomTarget level2">a14</div>
</div>
- <div id="a2" class="zoom level1">a2</div>
- <div id="a3" class="zoom level1">a3</div>
- <div id="a4" class="zoom level1">a4</div>
+ <div id="a2" class="zoomTarget level1">a2</div>
+ <div id="a3" class="zoomTarget level1">a3</div>
+ <div id="a4" class="zoomTarget level1">a4</div>
</div>
</body>
@@ -1,4 +1,4 @@
-.zoom {
+.level0, .level1, .level2 {
margin-left:10px;
margin-top:10px;
border:1px solid black;
@@ -44,14 +44,6 @@
$("body").zoomTo({targetsize:1.0});
$(".cover").show();
-
- $("input").change(function(evt) {
- if(evt.target.name=="color") {
- $("cube").removeClass("red green blue").addClass(evt.target.value);
- } else if(evt.target.name=="size") {
- $("cube").removeClass("small medium large").addClass(evt.target.value);
- }
- });
});
</script>
</head>
@@ -1,32 +0,0 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
-<html>
- <head>
- <title>Zoomooz.js</title>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <link rel="stylesheet" href="style.css" type="text/css" media="screen">
-
- <script type="text/javascript" src="../../lib/jquery.masonry.min.js"></script>
-
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
- <script type="text/javascript" src="../../jquery.zoomooz.min.js"></script>
-
- <script type="text/javascript">
- $(document).ready(function() {
- $("div,body").click(function(evt) {
- $(this).zoomTo({targetsize:0.95, duration:600, debug:true});
- evt.stopPropagation();
- });
- });
- </script>
- </head>
- <body>
-
- <!-- the problem is caused by the first content element having
- margin-top -->
-
- <div id="title1">
- First title
- </div>
-
- </body>
-</html>
@@ -1,13 +0,0 @@
-html {
- background-color:red;
-}
-
-body {
- background-color:#eee;
-}
-
-#title1 {
- margin-top:300px;
- -xx-webkit-transform:translateY(300px);
- border:1px solid red;
-}
@@ -5,56 +5,63 @@
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
- <!--<script type="text/javascript" src="../../jquery.zoomooz.min.js"></script>-->
+
+ <script type="text/javascript" src="../../jquery.zoomooz.min.js"></script>
+
+ <!--
+ <script type="text/javascript" src="../../src/js/jquery.zoomooz-helpers.js"></script>
<script type="text/javascript" src="../../src/js/jquery.zoomooz-anim.js"></script>
<script type="text/javascript" src="../../src/js/jquery.zoomooz-core.js"></script>
<script type="text/javascript" src="../../src/js/purecssmatrix.js"></script>
<script type="text/javascript" src="../../src/js/sylvester.src.stripped.js"></script>
+ <script type="text/javascript" src="../../src/js/jquery.zoomooz-zoomTarget.js"></script>
+ <script type="text/javascript" src="../../src/js/jquery.zoomooz-zoomContainer.js"></script>
+ -->
<script type="text/javascript">
- var zoomTargetElements = ["#container","#item1","#item2","#item2b","#item3","#item3b","#item4"];
- var zoomTargetIndex = 0;
+ var zoomElemElements = ["#container","#item1","#item2","#item2b","#item3","#item3b","#item4"];
+ var zoomElemIndex = 0;
$(document).ready(function() {
- $.zoomMooz.setup({root:$("#container"),targetsize:0.8});
+ $.zoomooz.setup({root:$("#container"),targetsize:0.8});
- $(".zoomTarget").click(function(evt) {
+ $(".zoomElem").click(function(evt) {
evt.stopPropagation();
$(this).zoomTo({debug:true});
});
$("#container").zoomTo();
$("#next").click(function(evt) {
- zoomTargetIndex++;
- if(zoomTargetIndex>=zoomTargetElements.length) {
- zoomTargetIndex-=zoomTargetElements.length;
+ zoomElemIndex++;
+ if(zoomElemIndex>=zoomElemElements.length) {
+ zoomElemIndex-=zoomElemElements.length;
}
- $(zoomTargetElements[zoomTargetIndex]).zoomTo({debug:true});
+ $(zoomElemElements[zoomElemIndex]).zoomTo({debug:true});
});
$("#prev").click(function(evt) {
- zoomTargetIndex--;
- if(zoomTargetIndex<0) {
- zoomTargetIndex+=zoomTargetElements.length;
+ zoomElemIndex--;
+ if(zoomElemIndex<0) {
+ zoomElemIndex+=zoomElemElements.length;
}
- $(zoomTargetElements[zoomTargetIndex]).zoomTo({debug:true});
+ $(zoomElemElements[zoomElemIndex]).zoomTo({debug:true});
});
});
</script>
</head>
<body>
<h3>Zooming inside a container</h3>
<div id="outerContainer">
- <div id="container" class="zoomTarget">
- <div id="item1" class="zoomTarget"></div>
- <div id="item2" class="zoomTarget"></div>
- <div id="item2b" class="zoomTarget"></div>
- <div id="item3" class="zoomTarget">
- <div id="item3b" class="zoomTarget"></div>
+ <div id="container" class="zoomElem">
+ <div id="item1" class="zoomElem"></div>
+ <div id="item2" class="zoomElem"></div>
+ <div id="item2b" class="zoomElem"></div>
+ <div id="item3" class="zoomElem">
+ <div id="item3b" class="zoomElem"></div>
</div>
- <div id="item4" class="zoomTarget"></div>
+ <div id="item4" class="zoomElem"></div>
</div>
</div>
<div id="navigation">
@@ -5,13 +5,7 @@
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
- <!--<script type="text/javascript" src="../../jquery.zoomooz.min.js"></script>-->
-
- <script type="text/javascript" src="../../src/js/jquery.zoomooz-helpers.js"></script>
- <script type="text/javascript" src="../../src/js/jquery.zoomooz-anim.js"></script>
- <script type="text/javascript" src="../../src/js/jquery.zoomooz-core.js"></script>
- <script type="text/javascript" src="../../src/js/purecssmatrix.js"></script>
- <script type="text/javascript" src="../../src/js/sylvester.src.stripped.js"></script>
+ <script type="text/javascript" src="../../jquery.zoomooz.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
@@ -7,37 +7,36 @@
<link href='http://fonts.googleapis.com/css?family=Fjord+One' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
+
<!--<script type="text/javascript" src="../../jquery.zoomooz.min.js"></script>-->
<script type="text/javascript" src="../../src/js/jquery.zoomooz-helpers.js"></script>
<script type="text/javascript" src="../../src/js/jquery.zoomooz-anim.js"></script>
<script type="text/javascript" src="../../src/js/jquery.zoomooz-core.js"></script>
<script type="text/javascript" src="../../src/js/purecssmatrix.js"></script>
<script type="text/javascript" src="../../src/js/sylvester.src.stripped.js"></script>
+ <script type="text/javascript" src="../../src/js/jquery.zoomooz-zoomTarget.js"></script>
+ <script type="text/javascript" src="../../src/js/jquery.zoomooz-zoomContainer.js"></script>
+
- <script type="text/javascript">
- $(document).ready(function() {
- $(".item").makeZooming({root:$("#content"),targetsize:0.7,duration:400,debug:true});
- });
- </script>
</head>
<body>
- <div id="viewport">
- <div id="content">
- <div class="item">Lorem ipsum dolor sit amet.</div>
- <div class="item">Donec faucibus pharetra vestibulum.</div>
- <div class="item">Fusce nec sapien sit amet nisi dictum iaculis.</div>
- <div class="item">Curabitur non urna sollicitudin diam feugiat dapibus a eget ipsum.</div>
- <div class="item">Donec a tincidunt lorem.</div>
- <div class="item">Cras faucibus egestas blandit.</div>
- <div class="item">Curabitur orci augue, cursus a sodales ac, tincidunt ut eros.</div>
- <div class="item">Mauris sagittis condimentum dapibus.</div>
- <div class="item">Quisque interdum sollicitudin nisi, sit amet hendrerit quam suscipit iaculis.</div>
- <div class="item">Morbi mollis enim non orci scelerisque at venenatis libero sodales</div>
- <div class="item">Sed lorem mauris, semper quis placerat quis, ultrices at ligula.</div>
- <div class="item">Vestibulum ante ipsum primis in faucibus.</div>
- <div class="item">Etiam fringilla, nisl id bibendum feugiat, leo sem sollicitudin libero.</div>
- <div class="clearer"></div>
+ <div id="viewport" class="zoomViewport">
+ <div id="content" class="zoomContainer">
+ <div class="zoomTarget">Lorem ipsum dolor sit amet.</div>
+ <div class="zoomTarget">Donec faucibus pharetra vestibulum.</div>
+ <div class="zoomTarget">Fusce nec sapien sit amet nisi dictum iaculis.</div>
+ <div class="zoomTarget">Curabitur non urna sollicitudin diam feugiat dapibus a eget ipsum.</div>
+ <div class="zoomTarget">Donec a tincidunt lorem.</div>
+ <div class="zoomTarget">Cras faucibus egestas blandit.</div>
+ <div class="zoomTarget">Curabitur orci augue, cursus a sodales ac, tincidunt ut eros.</div>
+ <div class="zoomTarget">Mauris sagittis condimentum dapibus.</div>
+ <div class="zoomTarget">Quisque interdum sollicitudin nisi, sit amet hendrerit quam suscipit iaculis.</div>
+ <div class="zoomTarget">Morbi mollis enim non orci scelerisque at venenatis libero sodales</div>
+ <div class="zoomTarget">Sed lorem mauris, semper quis placerat quis, ultrices at ligula.</div>
+ <div class="zoomTarget">Vestibulum ante ipsum primis in faucibus.</div>
+ <div class="zoomTarget">Etiam fringilla, nisl id bibendum feugiat, leo sem sollicitudin libero.</div>
+ <span class="clearer"></span>
</div>
</div>
</body>
@@ -5,14 +5,18 @@ html {
.clearer {
clear:both;
+ height:20px;
+ display:block;
+}
+
+#viewport, #content {
+ width:800px;
}
#viewport {
background-color: white;
-
- width:800px;
height:600px;
-
+
/* this needs to have some kind of positioning, absolute
or relative, to have the pos of elements inside it calculated correctly,
since otherwise the computeTotalTransformation does not work correctly
@@ -25,9 +29,10 @@ html {
-moz-box-shadow: 0 0px 10px rgba(0,0,0,0.2);
overflow-y:scroll;
+ overflow-x:hidden;
}
-.item {
+.zoomContainer div {
float:left;
background-color:#eeeedf;
width:250px;
View
@@ -7,39 +7,15 @@
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="../../jquery.zoomooz.min.js"></script>
- <script type="text/javascript">
- $(document).ready(function() {
- $(".zoomTarget").click(function(evt) {
- evt.stopPropagation();
- evt.preventDefault();
- $(this).zoomTo({debug:true});
- });
-
- $(window).click(function(evt) {
- evt.stopPropagation();
- $("body").zoomTo({targetsize:1.0});
- });
-
- // for iPhone
- $("#container").click(function(evt) {
- evt.stopPropagation();
- $("body").zoomTo({targetsize:1.0});
- });
-
- $("body").zoomTo({targetsize:1.0});
- });
- </script>
</head>
- <body>
- <div id="container">
- <div id="item1" class="zoomTarget"></div>
- <div id="item2" class="zoomTarget"></div>
- <div id="item3" class="zoomTarget">
- <div id="item3b" class="zoomTarget"></div>
- </div>
- <div id="item2b" class="zoomTarget"></div>
- <div id="item4" class="zoomTarget"></div>
+ <body class="zoomTarget" data-debug="true">
+ <div id="item1" class="zoomTarget" data-debug="true"></div>
+ <div id="item2" class="zoomTarget" data-debug="true"></div>
+ <div id="item3" class="zoomTarget" data-debug="true">
+ <div id="item3b" class="zoomTarget" data-debug="true"></div>
</div>
+ <div id="item2b" class="zoomTarget" data-debug="true"></div>
+ <div id="item4" class="zoomTarget" data-debug="true"></div>
</body>
<!--************************
@@ -5,7 +5,7 @@ html {
overflow:hidden;
}
-#container {
+body {
background-color:white;
margin:0;
padding:0;
View
@@ -7,32 +7,9 @@
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="../../jquery.zoomooz.min.js"></script>
- <script type="text/javascript">
- $(document).ready(function() {
- $(".zoomTarget").click(function(evt) {
- evt.stopPropagation();
- $(this).zoomTo({debug:true});
- });
-
- $(window).click(function(evt) {
- evt.stopPropagation();
- $("body").zoomTo({targetsize:1.0,debug:true});
- });
-
- // for iPhone
- $("#container").click(function(evt) {
- evt.stopPropagation();
- $("body").zoomTo({targetsize:1.0,debug:true});
- });
-
- $("body").zoomTo({targetsize:1.0,debug:true});
- });
- </script>
</head>
- <body>
- <div id="container">
- <div id="item4" class="zoomTarget"></div>
- </div>
+ <body class="zoomTarget">
+ <div id="item4" class="zoomTarget"></div>
</body>
<!--************************
Oops, something went wrong.

0 comments on commit 5d9b415

Please sign in to comment.