Permalink
Browse files

Version 1.2.5 -- updated autofocusing.

  • Loading branch information...
1 parent d0c5d97 commit 703c76c0f9623fdcde7e4d5222d7971b0b776a1b @pickhardt committed May 28, 2012
Showing with 66 additions and 23 deletions.
  1. +31 −7 README.html
  2. +2 −2 README.md
  3. 0 guiders-1.2.4.css → guiders-1.2.5.css
  4. +33 −14 guiders-1.2.4.js → guiders-1.2.5.js
View
@@ -7,9 +7,12 @@
}
#clock {
- position: absolute;
- top: 300px;
- left: 250px;
+ border: 2px solid #333;
+ height: 200px;
+ margin-left: 100px;
+ position: relative;
+ text-align: center;
+ width: 300px;
}
.stopper {
@@ -20,14 +23,35 @@
<!-- guiders.js requires jQuery as a prerequisite. Be sure to load guiders.js AFTER jQuery. -->
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
- <script type="text/javascript" src="guiders-1.2.4.js"></script>
- <link rel="stylesheet" href="guiders-1.2.4.css" type="text/css" />
+ <script type="text/javascript" src="guiders-1.2.5.js"></script>
+ <link rel="stylesheet" href="guiders-1.2.5.css" type="text/css" />
</head>
<body>
- <span id="clock" style="border: 2px solid #333; width: 300px; height: 200px; text-align: center;" onclick="guiders.next();">
+ <br />
+ <br />
+ <br />
+ <br />
+ <br />
+ <br />
+ <br />
+ <br />
+ <br />
+ <br />
+ <br />
+ <br />
+ <br />
+ <br />
+ <div id="clock" onclick="guiders.next();">
<br />
<img src="clock.gif" width=150 height=150 />
- </span>
+ </div>
+ <br />
+ <br />
+ <br />
+ <br />
+ <br />
+ <br />
+ <br />
<script type="text/javascript">
/**
View
@@ -1,4 +1,4 @@
-Guiders.js (version 1.2.4)
+Guiders.js (version 1.2.5)
==========================
Guiders are a user experience design pattern for introducing users to a web application.
@@ -45,7 +45,7 @@ The parameters for creating guiders are:
~~~
attachTo: (optional) selector of the html element you want to attach the guider to
-autoFocus: (optional) if you do not wish the browser to scroll to the position of the guider, set this to false
+autoFocus: (optional) if you want the browser to scroll to the position of the guider, set this to true
buttons: array of button objects
{
name: "Close",
File renamed without changes.
@@ -1,7 +1,7 @@
/**
* guiders.js
*
- * version 1.2.4
+ * version 1.2.5
*
* Developed at Optimizely. (www.optimizely.com)
* We make A/B testing you'll actually use.
@@ -25,7 +25,7 @@ var guiders = (function($) {
guiders._defaultSettings = {
attachTo: null, // Selector of the element to attach to.
- autoFocus: true, // Determines whether or not the browser scrolls to the element.
+ autoFocus: false, // Determines whether or not the browser scrolls to the element.
buttons: [{name: "Close"}],
buttonCustomHTML: "",
classString: null,
@@ -82,6 +82,7 @@ var guiders = (function($) {
"left": 9,
"leftTop": 10
};
+ guiders._windowHeight = 0;
guiders._addButtons = function(myGuider) {
// Add buttons
@@ -415,27 +416,45 @@ var guiders = (function($) {
if (myGuider.onShow) {
myGuider.onShow(myGuider);
}
-
guiders._attach(myGuider);
-
myGuider.elem.fadeIn("fast").data('locked', false);
-
- var windowHeight = $(window).height();
+
+ guiders._currentGuiderID = id;
+
+ var windowHeight = guiders._windowHeight = $(window).height();
var scrollHeight = $(window).scrollTop();
var guiderOffset = myGuider.elem.offset();
var guiderElemHeight = myGuider.elem.height();
-
- if (myGuider.autoFocus && (guiderOffset.top - scrollHeight < 0 ||
- guiderOffset.top + guiderElemHeight + 40 > scrollHeight + windowHeight)) {
- // Scroll to the guider's position.
- window.scrollTo(0, Math.max(guiderOffset.top + (guiderElemHeight / 2) - (windowHeight / 2), 0));
+
+ var isGuiderBelow = (scrollHeight + windowHeight < guiderOffset.top + guiderElemHeight); /* we will need to scroll down */
+ var isGuiderAbove = (guiderOffset.top < scrollHeight); /* we will need to scroll up */
+
+ if (myGuider.autoFocus && (isGuiderBelow || isGuiderAbove)) {
+ // Sometimes the browser won't scroll if the person just clicked,
+ // so let's do this in a setTimeout.
+ setTimeout(guiders.scrollToCurrent, 10);
}
-
- guiders._currentGuiderID = id;
- $(myGuider.elem).trigger('guiders.show');
+
+ $(myGuider.elem).trigger("guiders.show");
return guiders;
};
+ guiders.scrollToCurrent = function() {
+ var currentGuider = guiders._guiders[guiders._currentGuiderID];
+ if (typeof currentGuider === "undefined") {
+ return;
+ }
+
+ var windowHeight = guiders._windowHeight;
+ var scrollHeight = $(window).scrollTop();
+ var guiderOffset = currentGuider.elem.offset();
+ var guiderElemHeight = currentGuider.elem.height();
+
+ // Scroll to the guider's position.
+ var scrollToHeight = Math.round(Math.max(guiderOffset.top + (guiderElemHeight / 2) - (windowHeight / 2), 0));
+ window.scrollTo(0, scrollToHeight);
+ };
+
return guiders;
}).call(this, jQuery);

0 comments on commit 703c76c

Please sign in to comment.