window.onfocus before article image sizing

This PR delays the calculation of the article image size until the window receives the `onfocus` event. The article image was obscuring a viewport's worth of content when following inbound `target="_blank"` links because the image height was being calculated before it was visible.
heyook · Mar 14, 2015 · 6c816cb · 6c816cb
1 parent a80f987
commit 6c816cb
Showing 1 changed file with 23 additions and 19 deletions.
diff --git a/_includes/javascripts.html b/_includes/javascripts.html
@@ -9,30 +9,34 @@
 
     var $window = $(window),
     $image = $('.post-image-image, .teaserimage-image');
-    $window.on('scroll', function() {
-      var top = $window.scrollTop();
+
+    $window.on('focus', function(){
+      $window.on('scroll', function() {
+        var top = $window.scrollTop();
 
-      if (top < 0 || top > 1500) { return; }
-      $image
-        .css('transform', 'translate3d(0px, '+top/3+'px, 0px)')
-        .css('opacity', 1-Math.max(top/700, 0));
-    });
-    $window.trigger('scroll');
+        if (top < 0 || top > 1500) { return; }
+        $image
+          .css('transform', 'translate3d(0px, '+top/3+'px, 0px)')
+          .css('opacity', 1-Math.max(top/700, 0));
+      });
+      $window.trigger('scroll');
 
-    var height = $('.article-image').height();
-    $('.post-content').css('padding-top', height + 'px');
+      var height = $('.article-image').height();
+      $('.post-content').css('padding-top', height + 'px');
 
-    $('a[href*=#]:not([href=#])').click(function() {
-      if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
-       && location.hostname == this.hostname) {
-        var target = $(this.hash);
-        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
-        if (target.length) {
-          $('html,body').animate({ scrollTop: target.offset().top }, 500);
-          return false;
+      $('a[href*=#]:not([href=#])').click(function() {
+        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
+         && location.hostname == this.hostname) {
+          var target = $(this.hash);
+          target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
+          if (target.length) {
+            $('html,body').animate({ scrollTop: target.offset().top }, 500);
+            return false;
+          }
         }
-      }
+      });
     });
+
   });
 }(jQuery));
 </script>