diff --git a/lib/ComicBook.js b/lib/ComicBook.js index fb1694d..3ec0209 100755 --- a/lib/ComicBook.js +++ b/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-toolbar").width(window.innerWidth); - $("#cb-loading-overlay").width(window.innerWidth).height(window.innerHeight); + $(".cb-control.cb-navigate").outerHeight(window.innerHeight); + $("#cb-toolbar").outerWidth(windowWidth()); + $("#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) - ? ((window.innerWidth - width) / window.innerWidth) + 1 // scale up if the window is wider than the page - : window.innerWidth / width; // scale down if the window is narrower than the page + zoom_scale = (windowWidth() > width) + ? ((windowWidth() - width) / windowWidth()) + 1 // scale up if the window is wider 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") { - offsetW = (window.innerWidth - page_width) / 2; + if (canvas_width < windowWidth() && options.zoomMode === "manual") { + offsetW = (windowWidth() - page_width) / 2; if (options.displayMode === "double") { offsetW = offsetW - page_width / 2; } }