fixed jQuery 1.8+ issue

CSS-Tricks · Oct 31, 2012 · 7b7368b · 7b7368b
1 parent 79b364a
commit 7b7368b
Show file tree

Hide file tree

Showing 10 changed files with 37 additions and 19 deletions.
diff --git a/README.markdown b/README.markdown
@@ -11,6 +11,16 @@
 
 ## Changelog
 
+### Version 2.2 (10/31/2012)
+* Fixed an issue with jQuery v1.8+:
+  * jQuery 1.8 changed how the [box-sizing measured the width](http://blog.jquery.com/2012/08/16/jquery-1-8-box-sizing-width-csswidth-and-outerwidth/). Which returned a width of zero for the inner zoom content.
+  * Changed the plugin to measure the width of the content children, so a zoom window should have its content wrapped or it may return an incorrect value.
+  * See [issue #7](https://github.com/CSS-Tricks/AnythingZoomer/issues/7).
+* Added a `delay` option:
+  * Setting a delay, in milliseconds, will delay the time until the zoom window opens.
+  * This is useful when a user quickly scrolls through the zoom area. 
+  * See [issue #8](https://github.com/CSS-Tricks/AnythingZoomer/issues/8) for this feature request.
+
 ### Version 2.1.1 (7/3/2012)
 * Fixed calendar demo links. The shortcut method was previously ignoring jQuery selectors: `$('#zoom').anythingZoomer('.day[rel=2009-08-26]');`.
 

diff --git a/double.html b/double.html
@@ -12,7 +12,7 @@
 
 	<!-- anythingZoomer required -->
 	<link rel="stylesheet" href="css/anythingzoomer.css">
-	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
+	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
 	<script src="js/jquery.anythingzoomer.js"></script>
 	<script>
 	$(function() {
@@ -50,7 +50,7 @@ <h1>AnythingZoomer<sup>2</sup></h1>
 		<li><a href="text.html">Text</a></li>
 		<li><a class="current" href="double.html">Double</a></li>
 		<li><a class="use" href="use.html">Usage</a></li>
-		<li><a class="play" href="http://jsfiddle.net/Mottie/KwvjL/">Playground</a></li>
+		<li><a class="play" href="http://jsfiddle.net/Mottie/6sp2b/">Playground</a></li>
 		<li><a class="issue" href="https://github.com/CSS-Tricks/AnythingZoomer/issues">Issues</a></li>
 	</ul>
 

diff --git a/image.html b/image.html
@@ -10,7 +10,7 @@
 	<link rel="stylesheet" href="demo/style.css">
 	<link rel="stylesheet" href="css/anythingzoomer.css">
 
-	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
+	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
 	<script src="js/jquery.anythingzoomer.js"></script>
 	<script>
 	$(function() {
@@ -55,7 +55,7 @@ <h1>AnythingZoomer<sup>2</sup></h1>
 		<li><a href="text.html">Text</a></li>
 		<li><a href="double.html">Double</a></li>
 		<li><a class="use" href="use.html">Usage</a></li>
-		<li><a class="play" href="http://jsfiddle.net/Mottie/KwvjL/">Playground</a></li>
+		<li><a class="play" href="http://jsfiddle.net/Mottie/6sp2b/">Playground</a></li>
 		<li><a class="issue" href="https://github.com/CSS-Tricks/AnythingZoomer/issues">Issues</a></li>
 	</ul>
 

diff --git a/index.html b/index.html
@@ -10,8 +10,7 @@
 	<link rel="stylesheet" href="demo/style.css">
 	<link rel="stylesheet" href="css/anythingzoomer.css">
 
-	<!-- TODO: Calendar demo failing w/ jQuery 1.8 -->
-	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
+	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
 	<script src="js/jquery.anythingzoomer.js"></script>
 	<script>
 	$(function() {
@@ -59,7 +58,7 @@ <h1>AnythingZoomer<sup>2</sup></h1>
 		<li><a href="text.html">Text</a></li>
 		<li><a href="double.html">Double</a></li>
 		<li><a class="use" href="use.html">Usage</a></li>
-		<li><a class="play" href="http://jsfiddle.net/Mottie/KwvjL/">Playground</a></li>
+		<li><a class="play" href="http://jsfiddle.net/Mottie/6sp2b/">Playground</a></li>
 		<li><a class="issue" href="https://github.com/CSS-Tricks/AnythingZoomer/issues">Issues</a></li>
 	</ul>
 

diff --git a/js/jquery.anythingzoomer.js b/js/jquery.anythingzoomer.js
@@ -159,11 +159,11 @@
 			// get height from either the inner content itself or the children of the inner content since span will need
 			// a "display:block" to get an accurate height, but adding that messes up the width
 			base.$zoom.show();
-			base.largeDim = [ base.$lgInner.width(), Math.max( base.$lgInner.height(), base.$lgInner.children().height() ) ];
+			base.largeDim = [ base.$lgInner.children().width(), Math.max( base.$lgInner.height(), base.$lgInner.children().height() ) ];
 			base.zoomDim = base.last = [ base.$zoom.width(), base.$zoom.height() ];
 			base.$zoom.hide();
 
-			base.smallDim = [ base.$smInner.width(), base.$small.height() ];
+			base.smallDim = [ base.$smInner.children().width(), base.$small.height() ];
 			base.$overlay = $('<div class="' + n.overly + '" style="position:absolute;left:0;top:0;" />').prependTo(base.$small);
 			base.ratio = [
 				base.largeDim[0] / (base.smallDim[0] || 1),

diff --git a/js/jquery.anythingzoomer.min.js b/js/jquery.anythingzoomer.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "AnythingZoomer",
-    "version": "2.1.1",
+    "version": "2.2",
     "title": "AnythingZoomer",
     "author": {
         "name": "Chris Coyier",

diff --git a/swap.html b/swap.html
@@ -10,7 +10,7 @@
 	<link rel="stylesheet" href="demo/style.css">
 	<link rel="stylesheet" href="css/anythingzoomer.css">
 
-	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
+	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
 	<script src="js/jquery.anythingzoomer.js"></script>
 	<style>
 	/* FOR IMAGE DEMO */
@@ -53,7 +53,7 @@ <h1>AnythingZoomer<sup>2</sup></h1>
 		<li><a href="text.html">Text</a></li>
 		<li><a href="double.html">Double</a></li>
 		<li><a class="use" href="use.html">Usage</a></li>
-		<li><a class="play" href="http://jsfiddle.net/Mottie/KwvjL/">Playground</a></li>
+		<li><a class="play" href="http://jsfiddle.net/Mottie/6sp2b/">Playground</a></li>
 		<li><a class="issue" href="https://github.com/CSS-Tricks/AnythingZoomer/issues">Issues</a></li>
 	</ul>
 

diff --git a/text.html b/text.html
@@ -10,7 +10,7 @@
 	<link rel="stylesheet" href="demo/style.css">
 	<link rel="stylesheet" href="css/anythingzoomer.css">
 
-	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
+	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
 	<script src="js/jquery.anythingzoomer.js"></script>
 	<script>
 	$(function() {
@@ -58,7 +58,7 @@ <h1>AnythingZoomer<sup>2</sup></h1>
 		<li><a class="current" href="text.html">Text</a></li>
 		<li><a href="double.html">Double</a></li>
 		<li><a class="use" href="use.html">Usage</a></li>
-		<li><a class="play" href="http://jsfiddle.net/Mottie/KwvjL/">Playground</a></li>
+		<li><a class="play" href="http://jsfiddle.net/Mottie/6sp2b/">Playground</a></li>
 		<li><a class="issue" href="https://github.com/CSS-Tricks/AnythingZoomer/issues">Issues</a></li>
 	</ul>
 

diff --git a/use.html b/use.html
@@ -8,7 +8,7 @@
 
 	<link href="http://fonts.googleapis.com/css?family=Merienda+One" rel="stylesheet">
 	<link rel="stylesheet" href="demo/style.css">
-	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
+	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
 	<script src="demo/page.js"></script>
 
 	<!-- Syntax highlighting -->
@@ -31,7 +31,7 @@ <h1 id="top">AnythingZoomer<sup>2</sup></h1>
 		<li><a href="text.html">Text</a></li>
 		<li><a href="double.html">Double</a></li>
 		<li><a class="current" class="use" href="use.html">Usage</a></li>
-		<li><a class="play" href="http://jsfiddle.net/Mottie/KwvjL/">Playground</a></li>
+		<li><a class="play" href="http://jsfiddle.net/Mottie/6sp2b/">Playground</a></li>
 		<li><a class="issue" href="https://github.com/CSS-Tricks/AnythingZoomer/issues">Issues</a></li>
 	</ul>
 
@@ -47,14 +47,15 @@ <h2 id="basics">Basics</h2>
 		work correctly, so read on. The full list of parameters is also below.</p>
 
 	<pre class="html">&lt;link rel="stylesheet" href="css/anythingzoomer.css"&gt;
-&lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js&quot;&gt;&lt;/script&gt;
 &lt;script src=&quot;js/jquery.anythingzoomer.js&quot;&gt;&lt;/script&gt;
 &lt;script&gt;
   $(function(){
     $(&quot;#zoom&quot;).anythingZoomer();
   });
 &lt;/script&gt;
 </pre>
+<small>* The minimum supported jQuery version is 1.3.2.</small>
 
 		<h2 id="html">The HTML</h2>
 
@@ -197,6 +198,7 @@ <h2 id="parameters">All Parameters</h2>
 
   // functionality
   switchEvent : 'dblclick', // event that allows toggling between small and large elements - default is double click
+  delay       : 0,          // time to delay before revealing the zoom window
 
   // edit mode
   edit        : false,      // add x,y coordinates into zoom window to make it easier to find coordinates
@@ -267,6 +269,13 @@ <h4>switchEvent</h4>
 				<li>Default value is <code>dblclick</code>.</li>
 			</ul>
 
+			<h4>delay</h4>
+			<ul>
+				<li>Time to delay (in milliseconds) before revealing the zoom window.</li>
+				<li>This is useful if you don't want the zoom window to open when the user is quickly passing over the content.</li>
+				<li>Default value is <code>0</code>.</li>
+			</ul>
+
 			<h4>edit</h4>
 			<ul>
 				<li>When true, this option will add x,y coordinates into zoom window to make it easier to find coordinates.</li>