From a5dcaf6cd5ceb2fd1d8be8db3c8c6b39b8687ba6 Mon Sep 17 00:00:00 2001 From: Matthew Guy Date: Wed, 18 Feb 2015 23:46:35 -0500 Subject: [PATCH] Removed references to .full-img, debounce, and smartresize, and replaced with pure CSS issue #172 New code will center all post images and allow them to extend beyond the main text column. No JavaScript or special classes required. --- assets/css/screen.css | 32 ++++++++++++-------------- assets/js/index.js | 53 +++---------------------------------------- 2 files changed, 17 insertions(+), 68 deletions(-) diff --git a/assets/css/screen.css b/assets/css/screen.css index 6679bbd..a3bca3b 100644 --- a/assets/css/screen.css +++ b/assets/css/screen.css @@ -858,8 +858,9 @@ body:not(.post-template) .post-title { border: none; } -/* Stop .full-img from creating horizontal scroll - slight hack due to - imperfections with browser width % calculations and rounding */ +/* Stop elements, such as img wider than the post content, from + creating horizontal scroll - slight hack due to imperfections + with browser width % calculations and rounding */ .post-template .content { overflow: hidden; } @@ -876,21 +877,21 @@ body:not(.post-template) .post-title { display: none; } -/* Keep images centred and within the bounds of the post-width */ +/* Keep images centered, and allow images wider than the main + text column to break out. */ .post-content img { display: block; - max-width: 100%; + max-width: 126%; height: auto; - margin: 0 auto; padding: 0.6em 0; -} - -/* Break out larger images to be wider than the main text column - the class is applied with jQuery */ -.post-content .full-img { - width: 126%; - max-width: none; - margin: 0 -13%; + /* Centers an image by (1) pushing its left edge to the + center of its container and (2) shifting the entire image + in the opposite direction by half its own width. + Works for images that are larger than their containers. */ + position: relative; + left: 50%; + -webkit-transform: translateX(-50%); /* for Safari and iOS */ + transform: translateX(-50%); } /* The author credit area after the post */ @@ -1622,12 +1623,7 @@ body:not(.post-template) .post-title { .post-content img { padding: 0; - } - - .post-content .full-img { - width: auto; width: calc(100% + 32px); /* expand with to image + margins */ - margin: 0 -16px; /* get rid of margins */ min-width: 0; max-width: 112%; /* fallback when calc doesn't work */ } diff --git a/assets/js/index.js b/assets/js/index.js index 64b0191..62a3049 100644 --- a/assets/js/index.js +++ b/assets/js/index.js @@ -3,67 +3,20 @@ */ /* globals jQuery, document */ -(function ($, sr, undefined) { +(function ($, undefined) { "use strict"; - var $document = $(document), - - // debouncing function from John Hann - // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/ - debounce = function (func, threshold, execAsap) { - var timeout; - - return function debounced () { - var obj = this, args = arguments; - function delayed () { - if (!execAsap) { - func.apply(obj, args); - } - timeout = null; - } - - if (timeout) { - clearTimeout(timeout); - } else if (execAsap) { - func.apply(obj, args); - } - - timeout = setTimeout(delayed, threshold || 100); - }; - }; + var $document = $(document); $document.ready(function () { var $postContent = $(".post-content"); $postContent.fitVids(); - function updateImageWidth() { - var $this = $(this), - contentWidth = $postContent.outerWidth(), // Width of the content - imageWidth = this.naturalWidth; // Original image resolution - - if (imageWidth >= contentWidth) { - $this.addClass('full-img'); - } else { - $this.removeClass('full-img'); - } - } - - var $img = $("img").on('load', updateImageWidth); - function casperFullImg() { - $img.each(updateImageWidth); - } - - casperFullImg(); - $(window).smartresize(casperFullImg); - $(".scroll-down").arctic_scroll(); }); - // smartresize - jQuery.fn[sr] = function(fn) { return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); }; - // Arctic Scroll by Paul Adam Davis // https://github.com/PaulAdamDavis/Arctic-Scroll $.fn.arctic_scroll = function (options) { @@ -95,4 +48,4 @@ }); }; -})(jQuery, 'smartresize'); +})(jQuery);