Update hover example to use bind()

davidjbradshaw · Jun 7, 2015 · 38a9956 · 38a9956
1 parent f7cd771
commit 38a9956
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 26 deletions.
diff --git a/README.md b/README.md
@@ -315,9 +315,8 @@ If your page resizes via CSS `:hover` events, these won't be detected by default
 ```js
 function resize(){
 	if ('parentIFrame' in window) {
-		setTimeout(function(){ // Fix FireFox timing issue
-			parentIFrame.size();
-		},0);
+		// Fix race condition in FireFox with setTimeout
+		setTimeout(parentIFrame.size.bind(parentIFrame),0);
 	}
 }
 

diff --git a/example/frame.hover.html b/example/frame.hover.html
@@ -1,8 +1,8 @@
-<!DOCTYPE html> 
-<html> 
-	<head> 
-		<meta charset="utf-8"> 
-		<title>iFrame message passing test</title> 
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>iFrame message passing test</title>
 		<meta name="description" content="iFrame message passing test">
 		<meta http-equiv="X-UA-Compatible" content="IE=edge">
 		<style>
@@ -24,24 +24,23 @@
 		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
 		<script type="text/javascript" src="../js/iframeResizer.contentWindow.min.js"></script>
 
-		<div id="code">
-<style>
-    xmp{background-color: #eee;padding:0 20px;display:block;}
-    xmp:hover{border:#c33 solid 40px;}
-</style>
-<script>
-    (function(){
-        $('xmp').hover(function(){
-            if ('parentIFrame' in window) {
-                setTimeout(function(){ // Fix FireFox timing issue
-                    parentIFrame.size();
-                },0);
-            }
-        });
-    })();
-</script>
-		</div>
+<div id="code">
+    <style>
+        xmp{background-color: #eee;padding: 20px;display:block;}
+        xmp:hover{border:#c33 solid 40px;}
+    </style>
+    <script>
+        (function(){
+            $('xmp').hover(function(){
+                if ('parentIFrame' in window) {
+                    // Fix race condition in FireFox with setTimeout
+                    setTimeout(parentIFrame.size.bind(parentIFrame),0);
+                }
+            });
+        })();
+    </script>
+</div>
 
-		<script>$('xmp').text($('#code').html());</script>
+		<script>$('xmp').text('<xmp>'+$('#code').html()+'<xmp>');</script>
 	</body> 
 </html>