From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Fri, 21 Apr 2017 11:39:48 +0000 (+0200)
Subject: wip #1344 @5
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=e918b0dca3c06e1fe2641dab7a6511b092581b10;p=fluidbook-html5.git

wip #1344 @5
---

diff --git a/js/libs/fluidbook/fluidbook.desktop.js b/js/libs/fluidbook/fluidbook.desktop.js
index 8892433a..7260372c 100644
--- a/js/libs/fluidbook/fluidbook.desktop.js
+++ b/js/libs/fluidbook/fluidbook.desktop.js
@@ -1,7 +1,5 @@
 function FluidbookDesktop(fluidbook) {
     this.fluidbook = fluidbook;
-    this.origin = ['0%', '0%'];
-    this.updateDesktopScale(1);
     this.init();
 }
 
@@ -10,6 +8,7 @@ FluidbookDesktop.prototype = {
         var $this = this;
         $(document).on('click', '#links', function (e) {
             $this.clickZoom(e);
+            return false;
         });
         $(document).on('click', '#links .link', function (e) {
             e.stopPropagation();
@@ -27,103 +26,30 @@ FluidbookDesktop.prototype = {
         var x = 100 * e.pageX / $(window).width();
         var y = 100 * e.pageY / $(window).height();
 
-
-        this.origin = [x + '%', y + '%'];
-        if (this.desktopScale == 1) {
-            return;
-        } else {
-            $("#z").transform({
-                origin: this.origin
-            }, {
-                preserve: true
-            })
-        }
+        this.fluidbook.zoom.setOrigin(x + '%', y + '%')
     },
     clickZoom: function (e, way) {
         if (way == undefined) {
-            if (this.desktopScale == 1) {
-                way = 'in';
+            if (this.fluidbook.zoom.zoom == 1) {
+                way = 1;
             } else {
-                way = 'out';
-                this.zoomingOut = true;
+                way = -1;
             }
         }
         var newScale;
-        if (way == 'in') {
+        if (way == 1) {
             newScale = this.fluidbook.datas.zoom / 100;
-        } else if (way == 'out') {
+        } else if (way == -1) {
             newScale = 1;
         }
-        this.updateDesktopScale(newScale);
+        this.fluidbook.zoom.setZoom(newScale);
         return false;
     },
     wheelZoom: function (delta) {
         if ($("body").hasClass('view')) {
             return;
         }
-        this.updateDesktopScale(this.desktopScale + delta / 3, delta > 0);
+        this.fluidbook.zoom.setZoom(this.fluidbook.zoom.zoom + delta / 3, delta > 0 ? 1 : -1);
     },
-    updateDesktopScale: function (v, zoomIn) {
-        var $this = this;
-        if (this.fluidbook.viewMode()) {
-            v = 1;
-        }
-
-        var max = this.fluidbook.datas.zoomw / 100;
-
-        v = Math.max(Math.min(v, max), 1);
-
-        if (v > 1) {
-            $("#z").removeClass('nozoom')
-        }
-
-        if (zoomIn === true) {
-            if (v < 1.5) {
-                v = 2;
-            }
-        } else if (zoomIn === false) {
-            if (v < 1.5) {
-                v = 1;
-            }
-        }
-
-
-        if (v == this.desktopScale) {
-            return false;
-        }
-        this.desktopScale = v;
-
-        var animation = {
-            scale: [v, v]
-        };
-
-        if (this.desktopScale == 1) {
-            animation.origin = ['50%', '50%'];
-        } else {
-            animation.origin = this.origin;
-        }
-
-        if (this.desktopScale != 1) {
-            $("header,footer,#interface").addClass('hidden');
-
-        } else {
-            $("header,footer,#interface").removeClass('hidden');
-        }
-        $("#z").addClass('animate').transform(animation);
-        setTimeout(function () {
-            $("#z").removeClass('animate');
-            if (v == 1) {
-                $("#z").addClass('nozoom');
-            }
-        }, 600);
-
-        if (this.desktopScale > 1) {
-            $("body").addClass('zoomed');
-        } else {
-            $("body").removeClass('zoomed');
-        }
-
-        return true;
-    }
 
 };
\ No newline at end of file
diff --git a/js/libs/fluidbook/fluidbook.js b/js/libs/fluidbook/fluidbook.js
index 99aa67f8..76188f01 100644
--- a/js/libs/fluidbook/fluidbook.js
+++ b/js/libs/fluidbook/fluidbook.js
@@ -24,6 +24,8 @@ Fluidbook.prototype = {
     init: function (datas) {
         this.datas = datas;
         this.junk = datas.cacheDate;
+        this.zoom = new FluidbookZoom(this);
+        this.zoom.resetZoom();
         this.cache = new FluidbookCache(datas);
         this.service = new FluidbookService(this, datas.id);
         this.support = new FluidbookSupport(this);
@@ -34,7 +36,10 @@ Fluidbook.prototype = {
         this.waiters = [];
         this.viewport = new FluidbookViewport(this);
         this.viewport.updateViewport();
-        this.interact=new FluidbookInteract(this);
+        if (Modernizr.ftouch && this.support.transitions2d && this.datas.mobileTransitions != 'none') {
+            this.touch = new FluidbookTouch(this);
+        }
+        this.interact = new FluidbookInteract(this);
         this.background = new FluidbookBackground(this);
         this.l10n = new FluidbookL10N(this, $_GET['lang']);
         this.video = new FluidbookVideo(this);
@@ -42,15 +47,15 @@ Fluidbook.prototype = {
         this.index = new FluidbookIndex(this);
         this.tooltip = new FluidbookTooltip(this);
         this.audiodescription = new FluidbookAudioDescription(this);
+
         if (this.datas.form == 'bulle') {
             this.form = new FluidbookBulleForm(this);
         } else {
             this.form == false;
         }
-        this.privacy=new FluidbookPrivacy(this);
+        this.privacy = new FluidbookPrivacy(this);
         this.refw = 0;
         this.refh = 0;
-        this.zoom = 1;
         this.searchHintXHR = null;
         this.searchString = '';
         this.termsToHighlight = '';
@@ -126,11 +131,7 @@ Fluidbook.prototype = {
         this.ready();
         $("#main").css('visibility', 'visible');
         this.hideLoader(0, true);
-        // See bug #610
-        if (this.touch !== undefined && this.support.android) {
-            this.touch.enableUserScale();
-        }
-
+     
         if (this.support.transitions2d) {
             $("#splash").css('opacity', 0).one(this.support.getTransitionEndEvent(true), function () {
                 $(this).remove();
@@ -141,7 +142,7 @@ Fluidbook.prototype = {
             })
         }
 
-       $(this).trigger('fluidbookhidesplash');
+        $(this).trigger('fluidbookhidesplash');
 
     },
     ready: function () {
@@ -171,21 +172,6 @@ Fluidbook.prototype = {
             }
         });
     },
-    resetZoom: function () {
-        var $this = this;
-        if (this.support.iOS) {
-        } else if (!this.support.isMobile) {
-            this.desktop.updateDesktopScale(1);
-        }
-
-    },
-    setZoom: function (zoom) {
-        if (zoom) {
-            $("#pages").addClass('zoom');
-        } else {
-            $("#pages").removeClass('zoom');
-        }
-    },
     initPage: function (pageNr, doublePage, position) {
         if ($("#page_" + pageNr).length > 0) {
             return;
@@ -319,7 +305,7 @@ Fluidbook.prototype = {
             $($this).trigger('changePage', [page]);
             this.closeView(function () {
                 $this.pageTransition(page);
-                $this.resetZoom();
+                $this.zoom.resetZoom();
                 $this.stats.track(0, page);
                 $this.hideSplash();
             }, true);
@@ -328,7 +314,7 @@ Fluidbook.prototype = {
             this.openView(args[1], args[2], args[3], function () {
                 $this.hideSplash();
             });
-            this.resetZoom();
+            this.zoom.resetZoom();
         }
 
         return;
diff --git a/js/libs/fluidbook/fluidbook.resize.js b/js/libs/fluidbook/fluidbook.resize.js
index 079aaf74..a557a1c2 100644
--- a/js/libs/fluidbook/fluidbook.resize.js
+++ b/js/libs/fluidbook/fluidbook.resize.js
@@ -416,7 +416,7 @@ FluidbookResize.prototype = {
         this.fluidbook.displayOnePage = (this.orientation == 'portrait');
 
         if (changeOrientation) {
-            this.fluidbook.resetZoom();
+            this.fluidbook.zoom.resetZoom();
             this.fluidbook.pageTransition();
         }
     }
diff --git a/js/libs/fluidbook/fluidbook.touch.js b/js/libs/fluidbook/fluidbook.touch.js
new file mode 100644
index 00000000..1bb9341d
--- /dev/null
+++ b/js/libs/fluidbook/fluidbook.touch.js
@@ -0,0 +1,202 @@
+function FluidbookTouch(fluidbook) {
+    this.fluidbook = fluidbook;
+    this.interact = fluidbook.interact;
+    this.scale = 1;
+
+    this.startX = 0;
+    this.startY = 0;
+    this.offsetX = 0;
+    this.offsetY = 0;
+
+    this.triggerOffset = 0.05;
+
+    this.init();
+}
+
+FluidbookTouch.prototype = {
+    init: function () {
+        var $this = this;
+
+        $("#main").on('touchend',function(){
+            console.log('touchend from jquery');
+        })
+
+        // Pinch to zoom
+        interact(document.getElementById("main")).gesturable({
+            onstart: function (event) {
+                if ($this.fluidbook.zoom.zoom == 1) {
+                    $this.setZoomOriginFromEvent(event);
+                }
+                return false;
+            },
+            onmove: function (event) {
+                var ds = event.ds;
+                //if ($this.fluidbook.support.iOS) {
+                    if (ds > 0) {
+                        ds *= 0.25;
+                    } else {
+                        ds *= 0.75;
+                    }
+                //}
+                var s = $this.fluidbook.zoom.zoom * (1 + ds);
+                $this.pinchZoom(s);
+                return false;
+            },
+            onend: function (event) {
+                console.log('pinch end');
+                return false;
+            },
+        }).draggable({
+            inertia: true,
+            onmove: function (event) {
+                return $this.dragzoom(event);
+            },
+            onend: function (event) {
+                $this.resetSlide();
+                console.log('drag end');
+            }
+        });
+
+        // Double tap
+        interact(document).on('doubletap', function (event) {
+
+            if ($this.fluidbook.zoom.zoom > 1) {
+                $this.fluidbook.zoom.setTransition(true);
+                $this.fluidbook.zoom.resetZoom();
+            } else {
+                $this.setZoomOriginFromEvent(event);
+                $this.fluidbook.zoom.setTransition(true);
+                $this.fluidbook.zoom.setZoom($this.fluidbook.datas.zoom / 100, 1)
+            }
+            event.preventDefault();
+        });
+    },
+
+    pinchZoom: function (s) {
+        this.fluidbook.zoom.setTransition(false);
+        this.fluidbook.zoom.setZoom(s, undefined);
+    },
+
+    dragzoom: function (e) {
+        console.log(e.dx + ' :: ' + e.dy);
+        if (e.dx == 0 && e.dy == 0) {
+            return;
+        }
+
+
+        var currentX = (parseFloat(this.fluidbook.zoom.origin[0]) / 100) * this.fluidbook.resize.ww * this.fluidbook.zoom.zoom;
+        var currentY = (parseFloat(this.fluidbook.zoom.origin[1]) / 100) * this.fluidbook.resize.hh * this.fluidbook.zoom.zoom;
+
+        var m = 2;
+        //if (this.fluidbook.support.android) {
+          //  m = 10;
+        //}
+
+        var x = currentX - e.dx * m;
+        var y = currentY - e.dy * m;
+
+        x *= 100 / this.fluidbook.resize.ww / this.fluidbook.zoom.zoom;
+        y *= 100 / this.fluidbook.resize.hh / this.fluidbook.zoom.zoom;
+
+        x = Math.max(0, Math.min(100, x));
+        y = Math.max(0, Math.min(100, y));
+
+        this.fluidbook.zoom.setOrigin(
+            x + '%',
+            y + '%',
+            true);
+
+
+        if (this.fluidbook.zoom.zoom == 1) {
+
+            if (this.startX == -1) {
+                this.startX = e.clientX;
+            }
+            if (this.startY == -1) {
+                this.startY = e.clientY;
+            }
+            this.offsetX = (e.clientX - this.startX) / this.fluidbook.resize.ww;
+            this.offsetY = (e.clientY - this.startY) / this.fluidbook.resize.hh;
+
+            this.testSlideOffset();
+        } else {
+            this.resetSlide();
+        }
+        return false;
+    },
+
+    testSlideOffset: function () {
+        if (!this.fluidbook.pad.enabled) {
+            if (Math.abs(this.offsetX) < Math.abs(this.offsetY)) {
+                return false;
+            }
+            if (this.offsetX < -this.triggerOffset) {
+                if (this.fluidbook.l10n.dir == 'ltr') {
+                    this.fluidbook.goNextPage();
+                    this.resetSlide();
+                } else {
+                    this.fluidbook.goPreviousPage();
+                    this.resetSlide();
+                }
+
+                return true;
+            } else if (this.offsetX > this.triggerOffset) {
+                if (this.fluidbook.l10n.dir == 'ltr') {
+                    this.fluidbook.goPreviousPage();
+                    this.resetSlide();
+                } else {
+                    this.fluidbook.goNextPage();
+                    this.resetSlide();
+                }
+                return true;
+            }
+        } else {
+            // Mode mag pad
+
+            var offset = this.offsetX;
+            var way = 'x';
+            if (Math.abs(this.offsetX) < Math.abs(this.offsetY)) {
+                offset = this.offsetY;
+                way = 'y';
+            }
+
+            if (Math.abs(offset) < this.triggerOffset) {
+                return false;
+            }
+
+            if (offset < -this.triggerOffset) {
+                if (way == 'x') {
+                    this.fluidbook.goNextChapter();
+                    this.resetSlide();
+                } else {
+                    this.fluidbook.goNextChapterPage();
+                    this.resetSlide();
+                }
+            } else {
+                if (way == 'x') {
+                    this.fluidbook.goPreviousChapter();
+                    this.resetSlide();
+                } else {
+                    this.fluidbook.goPreviousChapterPage();
+                    this.resetSlide();
+                }
+            }
+            return true;
+        }
+
+    },
+
+    resetSlide: function () {
+        this.startX = -1;
+        this.startY = -1;
+        this.offsetX = 0;
+        this.offsetY = 0;
+    },
+    setZoomOriginFromEvent: function (event) {
+        this.fluidbook.zoom.setOrigin(
+            ((event.clientX / this.fluidbook.resize.ww) * 100) + '%',
+            ((event.clientY / this.fluidbook.resize.hh) * 100) + '%',
+            true);
+    },
+};
+
diff --git a/js/libs/fluidbook/fluidbook.viewport.js b/js/libs/fluidbook/fluidbook.viewport.js
index 7f8b68ee..0cc5a97a 100644
--- a/js/libs/fluidbook/fluidbook.viewport.js
+++ b/js/libs/fluidbook/fluidbook.viewport.js
@@ -2,9 +2,9 @@ function FluidbookViewport(fluidbook) {
     this.width = 'device-width';
     this.height = null;
     this.minScale = 1;
-    this.maxScale = 10;
+    this.maxScale = 1;
     this.initialScale = 1;
-    this.userScalable = true;
+    this.userScalable = false;
     this.meta = $('meta[name="viewport"]');
     this.fluidbook = fluidbook;
     if (this.fluidbook.support.iOS) {
diff --git a/js/libs/fluidbook/fluidbook.zoom.js b/js/libs/fluidbook/fluidbook.zoom.js
new file mode 100644
index 00000000..53bf0c53
--- /dev/null
+++ b/js/libs/fluidbook/fluidbook.zoom.js
@@ -0,0 +1,125 @@
+function FluidbookZoom(fluidbook) {
+    this.fluidbook = fluidbook;
+    this.zoom = 0;
+    this.origin = ['0%', '0%'];
+    this.max = this.fluidbook.datas.zoomw / 100;
+    this.transition = true;
+    this.init();
+}
+
+FluidbookZoom.prototype = {
+    init: function () {
+        this.setTransition(true);
+    },
+
+    /**
+     *
+     * @param zoom Zoom level
+     * @param direction Zoom direction (1=zoom in, -1=zoom out)
+     */
+    setZoom: function (zoom, direction) {
+        if (direction == undefined) {
+            if (this.zoom > zoom) {
+                direction = -1;
+            } else {
+                direction = 1;
+            }
+        }
+
+        zoom = Math.max(Math.min(zoom, this.max), 1);
+        if (this.fluidbook.viewMode()) {
+            zoom = 1;
+        }
+        if (this.zoom == zoom) {
+            return;
+        }
+        if (this.transition) {
+            if (direction == 1) {
+                if (zoom < 1.5) {
+                    zoom = 2;
+                }
+            } else if (direction == -1) {
+                if (zoom < 1.5) {
+                    zoom = 1;
+                }
+            }
+        }
+        if (this.zoom == zoom) {
+            return;
+        }
+        this.zoom = zoom;
+        this.updateZoom(direction);
+    },
+
+    setTransition: function (transition) {
+        if (transition == undefined) {
+            transition = true;
+        }
+
+        if (transition == false) {
+            $("#z").addClass('notransition').removeClass('transition');
+        } else {
+            $("#z").removeClass('notransition');
+        }
+        this.transition = transition;
+    },
+
+    resetZoom: function () {
+        this.setZoom(1, -1);
+    },
+
+    setOrigin: function (x, y, force) {
+        if (force == undefined) {
+            force = false;
+        }
+        this.origin = [x, y];
+        if (!force && this.fluidbook.zoom.zoom == 1) {
+            return;
+        } else {
+            $("#z").transform({
+                origin: this.origin
+            }, {
+                preserve: true
+            })
+        }
+    },
+
+    updateZoom: function (direction) {
+        var $this = this;
+
+        if (this.zoom > 1) {
+            $("#z").removeClass('nozoom')
+        }
+
+        var animation = {
+            scale: [this.zoom, this.zoom]
+        };
+
+        if (this.desktopScale == 1) {
+            animation.origin = ['50%', '50%'];
+        } else {
+            animation.origin = this.origin;
+        }
+
+        if (this.zoom != 1) {
+            $("header,footer,#interface").addClass('hidden');
+        } else {
+            $("header,footer,#interface").removeClass('hidden');
+        }
+        $("#z").addClass('animate').transform(animation);
+        setTimeout(function () {
+            $("#z").removeClass('animate');
+            if (this.zoom == 1) {
+                $("#z").addClass('nozoom');
+            }
+        }, 600);
+
+        if (this.desktopScale > 1) {
+            $("body").addClass('zoomed');
+        } else {
+            $("body").removeClass('zoomed');
+        }
+
+        return true;
+    }
+}
\ No newline at end of file
diff --git a/style/fluidbook.css b/style/fluidbook.css
index ee5c8f8f..303fd1e6 100644
--- a/style/fluidbook.css
+++ b/style/fluidbook.css
@@ -81,6 +81,7 @@ html {
   -ms-user-select: text;
 }
 body {
+  position: relative;
   -webkit-touch-callout: none !important;
 }
 body,
@@ -97,20 +98,29 @@ html.screenshot #main {
 html.screenshot #coquillette {
   visibility: hidden !important;
 }
-body {
+body,
+html {
   overflow-y: hidden;
   overflow-x: hidden;
+  width: 100%;
+  height: 100%;
+  touch-action: none;
 }
 a {
   -ms-touch-action: manipulation;
   touch-action: manipulation;
 }
 #main {
-  position: absolute;
+  position: relative;
   display: none;
+  overflow-x: hidden;
+  overflow-y: hidden;
   overflow: hidden;
   visibility: hidden;
   opacity: 1;
+  z-index: 0;
+  height: 100%;
+  width: 100%;
 }
 #main.fadeout,
 #view.fadeout {
@@ -286,18 +296,18 @@ a {
   direction: ltr;
   top: 0;
   left: 0;
-  -moz-transition: -moz-transform 600ms ease-out, transform 600ms ease-out;
-  -webkit-transition: -webkit-transform 600ms ease-out, transform 600ms ease-out;
-  -o-transition: -o-transform 600ms ease-out, transform 600ms ease-out;
-  -ms-transition: -ms-transform 600ms ease-out, transform 600ms ease-out;
-  transition: transform 600ms ease-out;
+  -moz-transition: -moz-transform 350ms ease-out, transform 350ms ease-out;
+  -webkit-transition: -moz-transform 350ms ease-out, transform 350ms ease-out;
+  -o-transition: -o-transform 350ms ease-out, transform 350ms ease-out;
+  -ms-transition: -ms-transform 350ms ease-out, transform 350ms ease-out;
+  transition: transform 350ms ease-out;
 }
-#z.animate {
-  -moz-transition: all 600ms ease-out;
-  -webkit-transition: all 600ms ease-out;
-  -ms-transition: all 600ms ease-out;
-  -o-transition: all 600ms ease-out;
-  transition: all 600ms ease-out;
+#z.notransition {
+  -moz-transition: none;
+  -webkit-transition: none;
+  -o-transition: none;
+  -ms-transition: none;
+  transition: none;
 }
 #z.nozoom {
   height: 0 !important;
@@ -307,18 +317,18 @@ a {
   position: absolute;
   z-index: 11;
   direction: ltr;
-  -moz-transition: -moz-transform 600ms ease-out, transform 600ms ease-out;
-  -webkit-transition: -webkit-transform 600ms ease-out, transform 600ms ease-out;
-  -o-transition: -o-transform 600ms ease-out, transform 600ms ease-out;
-  -ms-transition: -ms-transform 600ms ease-out, transform 600ms ease-out;
-  transition: transform 600ms ease-out;
+  -moz-transition: -moz-transform 350ms ease-out, transform 350ms ease-out;
+  -webkit-transition: -webkit-transform 350ms ease-out, transform 350ms ease-out;
+  -o-transition: -o-transform 350ms ease-out, transform 350ms ease-out;
+  -ms-transition: -ms-transform 350ms ease-out, transform 350ms ease-out;
+  transition: transform 350ms ease-out;
 }
 #fluidbook.animate {
-  -moz-transition: all 600ms ease-out;
-  -webkit-transition: all 600ms ease-out;
-  -ms-transition: all 600ms ease-out;
-  -o-transition: all 600ms ease-out;
-  transition: all 600ms ease-out;
+  -moz-transition: all 350ms ease-out;
+  -webkit-transition: all 350ms ease-out;
+  -ms-transition: all 350ms ease-out;
+  -o-transition: all 350ms ease-out;
+  transition: all 350ms ease-out;
 }
 #cache {
   display: none;
@@ -443,6 +453,7 @@ a {
 /* Header */
 header {
   position: relative;
+  z-index: 12;
 }
 #nav > a {
   vertical-align: top;
diff --git a/style/fluidbook.less b/style/fluidbook.less
index ad09abcb..1fc04adb 100644
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -88,6 +88,7 @@ html {
 }
 
 body {
+	position: relative;
 	-webkit-touch-callout: none !important;
 }
 
@@ -108,9 +109,12 @@ html.screenshot #coquillette {
 	visibility: hidden !important;
 }
 
-body {
+body, html {
 	overflow-y: hidden;
 	overflow-x: hidden;
+	width: 100%;
+	height: 100%;
+	touch-action: none;
 }
 
 a {
@@ -119,11 +123,16 @@ a {
 }
 
 #main {
-	position: absolute;
+	position: relative;
 	display: none;
+	overflow-x: hidden;
+	overflow-y: hidden;
 	overflow: hidden;
 	visibility: hidden;
 	opacity: 1;
+	z-index: 0;
+	height: 100%;
+	width: 100%;
 }
 
 #main.fadeout, #view.fadeout {
@@ -321,7 +330,7 @@ a {
 	margin: -2px 20px 0 0;
 }
 
-@zoomtransition: 600ms;
+@zoomtransition: 350ms;
 
 #z {
 	position: absolute;
@@ -331,17 +340,17 @@ a {
 	left: 0;
 
 	-moz-transition: -moz-transform @zoomtransition ease-out, transform @zoomtransition ease-out;
-	-webkit-transition: -webkit-transform @zoomtransition ease-out, transform @zoomtransition ease-out;
+	-webkit-transition: -moz-transform @zoomtransition ease-out, transform @zoomtransition ease-out;
 	-o-transition: -o-transform @zoomtransition ease-out, transform @zoomtransition ease-out;
 	-ms-transition: -ms-transform @zoomtransition ease-out, transform @zoomtransition ease-out;
 	transition: transform @zoomtransition ease-out;
 
-	&.animate {
-		-moz-transition: all @zoomtransition ease-out;
-		-webkit-transition: all @zoomtransition ease-out;
-		-ms-transition: all @zoomtransition ease-out;
-		-o-transition: all @zoomtransition ease-out;
-		transition: all @zoomtransition ease-out;
+	&.notransition {
+		-moz-transition: none;
+		-webkit-transition: none;
+		-o-transition: none;
+		-ms-transition: none;
+		transition: none;
 	}
 
 	&.nozoom {
@@ -505,6 +514,7 @@ a {
 /* Header */
 header {
 	position: relative;
+	z-index: 12;
 }
 
 #nav > a {