#6

js/InfoBox.js

@@ -28,22 +28,22 @@ export class InfoBox {
 				);
 			}
 			else {
-				Object.assign(this._popper._options, options);
-				this._popper._reference = referenceTag;
+				Object.assign(this._popper.options, options);
+				this._popper.reference = referenceTag;
 				this._popper.update();
 			}
-			return this._popper._getOffsets(this._popper._popper, this._popper._reference, this._popper._options.placement);
+		}
+		else {
+			const centerTag = document.querySelector("#maindiv");
+			const clientHeight = this._tag.clientHeight || 0,
+				clientWidth = this._tag.clientWidth || 0,
+				innerWidth = window.innerWidth || document.documentElement.clientWidth || 0,
+				innerHeight = window.innerHeight || document.documentElement.clientHeight || 0;
+			// console.log(`${clientHeight} ${clientWidth} ${innerWidth} ${innerHeight}`);
+			this._tag.style.left = (innerWidth / 2 - clientWidth / 2) + "px";
+			this._tag.style.top = (innerHeight / 2 - clientHeight / 2) + "px";
 		}
 
-		const centerTag = document.querySelector("#maindiv");
-		const clientHeight = this._tag.clientHeight || 0,
-			clientWidth = this._tag.clientWidth || 0,
-			innerWidth = window.innerWidth || document.documentElement.clientWidth || 0,
-			innerHeight = window.innerHeight || document.documentElement.clientHeight || 0;
-		// console.log(`${clientHeight} ${clientWidth} ${innerWidth} ${innerHeight}`);
-		this._tag.style.left = (innerWidth / 2 - clientWidth / 2) + "px";
-		this._tag.style.top = (innerHeight / 2 - clientHeight / 2) + "px";
-		return null;
 
 	}
 
@@ -61,7 +61,7 @@ export class InfoBox {
 		}
 		section.appendChild( document.createTextNode(description) );
 
-		return this._updatePosition( selector, popperOptions );
+		this._updatePosition( selector, popperOptions );
 
 	}
 

js/IntroGuide.js

@@ -239,8 +239,8 @@ export class IntroGuide {
 				this.scrollTo(this._scrollOffsetX, this._scrollOffsetY);
 				this._nav.updateGui(step, stepConfig);
 
-				var positionObj = this._infoBox.updateGui(stepConfig.title, stepConfig.description, stepConfig.selector, stepConfig.options); //this._infoBox._tag.style.position); //stepConfig.popperOptions);
-				var position = positionObj && positionObj.reference ? positionObj.reference : null;
+				this._infoBox.updateGui(stepConfig.title, stepConfig.description, stepConfig.selector, stepConfig.options);
+				var position = utils.getBoundingRect( document.querySelector(stepConfig.selector) );
 				if (position && position.top) {
 					const marginY = 200;	// TODO: Move to options?
 					const marginX = 0;		// TODO: Move to options?
@@ -396,10 +396,10 @@ export class IntroGuide {
 			// 	box.push( pos.top + $el.height() + marginTop + padding - marginRight);
 			// }
 
-			var left = box[0],
-				top = box[1],
-				right = box[2],
-				bottom = box[3];
+			var left = parseInt( box[0] ),
+				top = parseInt( box[1] ),
+				right = parseInt( box[2] ),
+				bottom = parseInt( box[3] );
 		}
 
 		c.width = winWidth;

js/utils.js

@@ -10,7 +10,8 @@ export function removeClass(el, className) {
 }
 
 export function tagIsVisible(el) {
-	return !!el && el.offsetParent !== null && el.style.display !== "none" && el.style.visibility !== "hidden";
+	return !(el.offsetWidth <= 0 && el.offsetHeight <= 0 || 
+		((el.style && el.style.display) || jQuery.css( el, "display" )) === "none");
 }
 
 export function getBrowser() {
@@ -25,4 +26,17 @@ export function getBrowser() {
 		ie10: ieVersion === 10,
 		ie11: ieVersion === 11
 	}
+}
+
+export function getBoundingRect(tag) {
+	if (!tag || !tag.getBoundingClientRect ) {
+		return null;
+	}
+	var _position = tag.getBoundingClientRect();		
+	// ClientRect (readonly) -> Object so we can modify its values
+	var position = {};
+	for (var k in _position) {
+		position[k] = _position[k];
+	}
+	return position;
 }

package.json

@@ -66,6 +66,6 @@
   },
   "dependencies": {
     "font-awesome": "^4.6.3",
-    "popper.js": "^0.4.2"
+    "popper.js": "1.0.0-alpha.3"
   }
 }

test/html5up-strata/index_global.html

@@ -18,6 +18,8 @@
 
 		<div id="intro"></div>
 
+		<button style="z-index: 2000; position: fixed; top: 20px; left: 20px;" class="button button-fixed">I am a static button</button>
+
 		<!-- Header -->
 			<header id="header">
 				<a href="#" class="image avatar"><img src="images/avatar.jpg" alt="" /></a>

test/js/initWithGlobal.js

@@ -20,6 +20,11 @@ var introConfig = {
 			description: 'Set element to highlight using a CSS selector',
 			selector: ".image.avatar"
 		},
+		{
+			title: "Element with fixed position",
+			description: 'Works with fixed positioned elements',
+			selector: "button.button-fixed"
+		},
 		{
 			title: "No selector?",
 			description: 'The text will be centered',