Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

New version! Guiders.js 1.2.4 released. Includes minor bug fixes and …

…new optional parameters.
  • Loading branch information...
commit d0c5d979e61aa2fca5c10cc23025e3b87500b825 1 parent 2e05576
@jeff-optimizely authored
View
4 README.html
@@ -20,8 +20,8 @@
<!-- 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.3.js"></script>
- <link rel="stylesheet" href="guiders-1.2.3.css" type="text/css" />
+ <script type="text/javascript" src="guiders-1.2.4.js"></script>
+ <link rel="stylesheet" href="guiders-1.2.4.css" type="text/css" />
</head>
<body>
<span id="clock" style="border: 2px solid #333; width: 300px; height: 200px; text-align: center;" onclick="guiders.next();">
View
8 README.md
@@ -1,4 +1,4 @@
-Guiders.js (version 1.2.3)
+Guiders.js (version 1.2.4)
==========================
Guiders are a user experience design pattern for introducing users to a web application.
@@ -45,6 +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
buttons: array of button objects
{
name: "Close",
@@ -60,8 +61,9 @@ offset: fine tune the position of the guider, e.g. { left:0, top: -10 }
onShow: (optional) additional function to call before the guider is shown
onHide: (optional) additional function to call when the guider is hidden
overlay: (optional) if true, an overlay will pop up between the guider and the rest of the page
-position: (optional / required if using attachTo) clock position at which the guider should be attached to the html element
+position: (optional / required if using attachTo) clock position at which the guider should be attached to the html element. Can also use a description keyword (such as "topLeft" for 11 or "bottom" for 6)
title: title of the guider
+useFixedPosition: (optional) if your guider isn't attached to anything, toggle this to use position fixed instead of absolute
width: (optional) custom width of the guider (it defaults to 400px)
xButton: (optional) if true, a X will appear in the top right corner of the guider, as another way to close the guider
~~~
@@ -88,7 +90,7 @@ In Closing
Guiders are a great way to improve the user experience of your web application. If you're interested in optimizing user experience through A/B testing, check out [Optimizely](http://www.optimizely.com). We're the people who built Guiders in the first place.
-If you have questions about Guiders or Optimizely, email us at `jeff+pickhardt@optimizely.com` or `hello@optimizely.com`.
+If you have questions about Guiders, you can email me (Jeff Pickhardt) at `jeff+pickhardt@optimizely.com`. Optimizely inquiries should be directed to `support@optimizely.com` or `sales@optimizely.com`.
License
View
0  guiders-1.2.3.css → guiders-1.2.4.css
File renamed without changes
View
36 guiders-1.2.3.js → guiders-1.2.4.js
@@ -1,7 +1,7 @@
/**
* guiders.js
*
- * version 1.2.3
+ * version 1.2.4
*
* Developed at Optimizely. (www.optimizely.com)
* We make A/B testing you'll actually use.
@@ -9,8 +9,11 @@
* Released under the Apache License 2.0.
* www.apache.org/licenses/LICENSE-2.0.html
*
- * Questions about Guiders or Optimizely?
- * Email us at jeff+pickhardt@optimizely.com or hello@optimizely.com.
+ * Questions about Guiders?
+ * You may email me (Jeff Pickhardt) at jeff+pickhardt@optimizely.com
+ *
+ * Questions about Optimizely should be sent to:
+ * sales@optimizely.com or support@optimizely.com
*
* Enjoy!
*/
@@ -58,13 +61,27 @@ var guiders = (function($) {
].join("");
guiders._arrowSize = 42; // = arrow's width and height
+ guiders._buttonElement = "<a/>";
+ guiders._buttonAttributes = {"href": "#"};
guiders._closeButtonTitle = "Close";
guiders._currentGuiderID = null;
guiders._guiders = {};
guiders._lastCreatedGuiderID = null;
guiders._nextButtonTitle = "Next";
- guiders._buttonElement = "<a/>";
- guiders._buttonAttributes = {"href": "#"};
+ guiders._offsetNameMapping = {
+ "topLeft": 11,
+ "top": 12,
+ "topRight": 1,
+ "rightTop": 2,
+ "right": 3,
+ "rightBottom": 4,
+ "bottomRight": 5,
+ "bottom": 6,
+ "bottomLeft": 7,
+ "leftBottom": 8,
+ "left": 9,
+ "leftTop": 10
+ };
guiders._addButtons = function(myGuider) {
// Add buttons
@@ -123,6 +140,11 @@ var guiders = (function($) {
return;
}
+ if (guiders._offsetNameMapping[myGuider.position]) {
+ // As an alternative to the clock model, you can also use keywords to position the guider.
+ myGuider.position = guiders._offsetNameMapping[myGuider.position];
+ }
+
var myHeight = myGuider.elem.innerHeight();
var myWidth = myGuider.elem.innerWidth();
@@ -139,7 +161,7 @@ var guiders = (function($) {
var attachToHeight = attachTo.innerHeight();
var attachToWidth = attachTo.innerWidth();
- /* Corrects positioning if body has a top margin set on it.*/
+ // Corrects positioning if body has a top margin set on it.
var top_margin_of_body = $("body").outerHeight(true) - $("body").outerHeight(false);
var top = base.top - top_margin_of_body;
var left = base.left;
@@ -161,7 +183,7 @@ var guiders = (function($) {
12: [-bufferOffset - myHeight, attachToWidth/2 - myWidth/2]
};
- offset = offsetMap[myGuider.position];
+ var offset = offsetMap[myGuider.position];
top += offset[0];
left += offset[1];
Please sign in to comment.
Something went wrong with that request. Please try again.