created (very hacky) function to get window.innerWidth - scrollbar widths

lib/ComicBook.js

@@ -13,7 +13,6 @@
 		- write bin scripts to minify & join all js
 
 	Nice 2 have:
-		- when toggling to double page mode make sure the pages are in the correct left / right order
 		- enable menu items via config, allow for custom items
 		- decouple controls from reader api
 		- split out classes into seperate files
@@ -96,10 +95,36 @@ function ComicBook(id, srcs, opts) {
 	var is_double_page_spread = false;
 	var controlsRendered = false; // have the user controls been inserted into the dom yet?
 	var page_requested = false; // used to request non preloaded pages
+	var shiv = false;
 
 	// the current page, can pass a default as a url hash
 	var pointer = (parseInt(location.hash.substring(1),10) - 1) || 0;
 
+	/**
+	 * Gets the window.innerWidth - scrollbars
+	 */
+	function windowWidth() {
+	
+		var height = window.innerHeight + 1;
+	
+		if (shiv === false) {
+			shiv = $(document.createElement("div"))
+				.attr("id", "cb-width-shiv")
+				.css({
+					width: "100%",
+					position: "absolute", 
+					top: 0,
+					zIndex: "-1000"
+				});
+		
+			$("body").append(shiv);
+		}
+		
+		shiv.height(height);
+		
+		return shiv.innerWidth();
+	}
+
 	/**
 	 * enables the back button
 	 */
@@ -389,9 +414,9 @@ function ComicBook(id, srcs, opts) {
 		init();
 
 		// resize navigation controls
-		$(".cb-control.cb-navigate").height(window.innerHeight);
+		$(".cb-control.cb-navigate").outerHeight(window.innerHeight);
-		$("#cb-toolbar").width(window.innerWidth);
+		$("#cb-toolbar").outerWidth(windowWidth());
-		$("#cb-loading-overlay").width(window.innerWidth).height(window.innerHeight);
+		$("#cb-loading-overlay").outerWidth(windowWidth()).height(window.innerHeight);
 		
 		// preload images if needed
 		if (pages.length !== no_pages) {
@@ -538,9 +563,9 @@ function ComicBook(id, srcs, opts) {
 			case "fitWidth":
 				document.body.style.overflowX = "hidden";
 				
-				zoom_scale = (window.innerWidth > width)
+				zoom_scale = (windowWidth() > width)
-					? ((window.innerWidth - width) / window.innerWidth) + 1 // scale up if the window is wider than the page
+					? ((windowWidth() - width) / windowWidth()) + 1 // scale up if the window is wider than the page
-					: window.innerWidth / width; // scale down if the window is narrower than the page
+					: windowWidth() / width; // scale down if the window is narrower than the page
 
 				// update the interal scale var so switching zoomModes while zooming will be smooth
 				scale = zoom_scale
@@ -559,16 +584,12 @@ function ComicBook(id, srcs, opts) {
 		canvas_height = page_height;
 
 		// make sure the canvas is always at least full screen, even if the page is more narrow than the screen
-		canvas.width = (canvas_width < window.innerWidth) ? window.innerWidth : canvas_width;
+		canvas.width = (canvas_width < windowWidth()) ? windowWidth() : canvas_width;
 		canvas.height = (canvas_height < window.innerHeight) ? window.innerHeight : canvas_height;
 
-		// disable scrollbars if not needed
-		document.body.style.overflowX = (canvas_width < window.innerWidth) ? "hidden" : "auto";
-		document.body.style.overflowY = (canvas_height < window.innerHeight) ? "hidden" : "auto";
-
 		// work out a horizontal position that will keep the pages always centred
-		if (canvas_width < window.innerWidth && options.zoomMode === "manual") {
+		if (canvas_width < windowWidth() && options.zoomMode === "manual") {
-			offsetW = (window.innerWidth - page_width) / 2;
+			offsetW = (windowWidth() - page_width) / 2;
 			if (options.displayMode === "double") { offsetW = offsetW - page_width / 2; }
 		}