Issue 161: overlay apple effect with fixed positioning now stays in v…

…iewport while window is scrolled
jquerytools · Sep 17, 2010 · 12f70d5 · 12f70d5
1 parent 43e1db5
commit 12f70d5
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 11 deletions.
diff --git a/src/overlay/overlay.apple.js b/src/overlay/overlay.apple.js
@@ -44,7 +44,8 @@
 			 trigger = this.getTrigger(),
 			 self = this,
 			 oWidth = overlay.outerWidth({margin:true}),
-			 img = overlay.data("img");  
+			 img = overlay.data("img"),
+			 position = conf.fixed ? 'fixed' : 'absolute';  
 
 
 		// growing image is required.
@@ -77,7 +78,7 @@
 
 		// initialize background image and make it visible
 		img.css({
-			position: 'absolute',
+			position: position,
 			top: itop, 
 			left: ileft,
 			width: 0,
@@ -88,21 +89,14 @@
 		// put overlay into final position
 		pos.top += w.scrollTop();
 		pos.left += w.scrollLeft();		
-		pos.position = 'absolute';
+		pos.position = position;
 		overlay.css(pos);
 
 		// begin growing
 		img.animate({
 			top: overlay.css("top"), 
 			left: overlay.css("left"), 
-			width: oWidth}, conf.speed, function() { 
-
-			if (conf.fixed) {
-				pos.top -= w.scrollTop();
-				pos.left -= w.scrollLeft();
-				pos.position = 'fixed';
-				img.add(overlay).css(pos);
-			}
+			width: oWidth}, conf.speed, function() {
 
 			// set close button and content over the image
 			overlay.css("zIndex", conf.zIndex + 1).fadeIn(conf.fadeInSpeed, function()  { 

diff --git a/test/overlay/events.htm b/test/overlay/events.htm
@@ -54,6 +54,7 @@
 		mask: '#561',
 		oneInstance: false, 
 		lazyload: true,
+		fixed: true,
 
 		onLoad: function() {
 			console.info("apple done");
@@ -76,6 +77,7 @@
 </p>
 
 <div style="position:relative;top:400px;left:200px">
+
 <div class="overlay" id="overlay">
 
 	<div class="content" style="background-image:url(../img/6481762_3d2c7e79f7.jpg)">  
@@ -93,3 +95,6 @@
 	</div>
 
 </div>
+
+
+<div style="height:2000px"></div>
diff --git a/test/validator/minimal.htm b/test/validator/minimal.htm
@@ -25,6 +25,49 @@
 }
 </style>
 
+<form action="#">
+
+	<label>
+		requred text 
+		<input type="text" required="required" />
+	</label>
+
+	<label>
+		pattern
+		<input type="text" pattern="\d+" />
+	</label>
+
+	<label>
+		URL
+		<input type="url" value="http://www.spa.gov.sa/NewsHeadlines.php?pg=2&joku+paha" />
+	</label>
+
+	<label>
+		date 
+		<input type="date" title="Use format yyyy-mm-dd" name="day" />
+	</label>
+
+	<label>
+		email 
+		<input type="email" />
+	</label>
+
+	<label>
+		terms
+		<input type="checkbox" required="required" name="terms" data-message="Accept the terms" />
+	</label>
+
+	<label>
+		required
+		<select required="required">
+			<option value="">-- choose one --</option>
+			<option value="8">jotain</option>
+		</select>
+	</label>
+
+	<button>Submit</button>
+
+</form>
 <form action="#">
 
 	<label>