From 46ea2191f1da12e47043c9c76fcbe4513c3048be Mon Sep 17 00:00:00 2001 From: Bart Conrad Date: Tue, 2 Sep 2014 16:03:00 -0500 Subject: [PATCH 1/4] Add onAdjust option and demo There is now an option to add a callback function for onAjust. This gets called anytime _adjustBG is done. --- examples/demo-onAdjust.html | 38 +++++++++++++++++++++++ jquery.anystretch.js | 60 ++++++++++++++++++++----------------- 2 files changed, 70 insertions(+), 28 deletions(-) create mode 100644 examples/demo-onAdjust.html diff --git a/examples/demo-onAdjust.html b/examples/demo-onAdjust.html new file mode 100644 index 0000000..5f56d73 --- /dev/null +++ b/examples/demo-onAdjust.html @@ -0,0 +1,38 @@ + + + + + Anystretch onAdjust Demo + + + +
+ + + + + + + \ No newline at end of file diff --git a/jquery.anystretch.js b/jquery.anystretch.js index 9055c02..8b870ee 100644 --- a/jquery.anystretch.js +++ b/jquery.anystretch.js @@ -16,7 +16,7 @@ */ ;(function($) { - + $.fn.anystretch = function(src, options, callback) { var isBody = this.selector.length ? false : true; // Decide whether anystretch is being called on an element or not @@ -26,7 +26,8 @@ positionY: 'center', // Should we center the image on the Y axis? speed: 0, // fadeIn speed for background after image loads (e.g. "fast" or 500) elPosition: 'relative', // position of containing element when not being added to the body - dataName: 'stretch' // The data-* name used to search for + dataName: 'stretch', // The data-* name used to search for + onAdjust: $.noop // Callback to be called after any adjustment is complete }, el = $(this), container = isBody ? $('.anystretch') : el.children(".anystretch"), @@ -36,26 +37,26 @@ // Extend the settings with those the user has provided if(options && typeof options == "object") $.extend(settings, options); - + // Just in case the user passed in a function without options if(options && typeof options == "function") callback = options; - + // Initialize $(document).ready(_init); - + // For chaining return this; - + function _init() { // Prepend image, wrapped in a DIV, with some positioning and zIndex voodoo if(src || el.length >= 1) { var img; - + if(!isBody) { // If not being added to the body set position to elPosition (default: relative) to keep anystretch contained el.css({position: settings.elPosition, background: "none"}); } - + // If this is the first time that anystretch is being called if(container.length == 0) { container = $("
").attr("class", "anystretch") @@ -64,17 +65,17 @@ // Prepare to delete any old images container.find("img").addClass("deleteable"); } - + img = $("").css({position: "absolute", display: "none", margin: 0, padding: 0, border: "none", zIndex: -999999}) - .bind("load", function(e) { + .bind("load", function(e) { var self = $(this), imgWidth, imgHeight; - + self.css({width: "auto", height: "auto"}); imgWidth = this.width || $(e.target).width(); imgHeight = this.height || $(e.target).height(); imgRatio = imgWidth / imgHeight; - + _adjustBG(function() { self.fadeIn(settings.speed, function(){ // Remove the old images, if necessary. @@ -83,10 +84,10 @@ if(typeof callback == "function") callback(); }); }); - + }) .appendTo(container); - + // Append the container to the body, if it's not already there if(el.children(".anystretch").length == 0) { if(isBody) { @@ -95,10 +96,10 @@ el.append(container); } } - + // Attach the settings container.data("settings", settings); - + var imgSrc = ""; if(src) { imgSrc = src; @@ -108,23 +109,23 @@ return; } img.attr("src", imgSrc); // Hack for IE img onload event - + // Adjust the background size when the window is resized or orientation has changed (iOS) $(window).resize(_adjustBG); } } - + function _adjustBG(fn) { try { bgCSS = {left: 0, top: 0}; bgWidth = _width(); bgHeight = bgWidth / imgRatio; - + // Make adjustments based on image ratio // Note: Offset code provided by Peter Baker (http://ptrbkr.com/). Thanks, Peter! if(bgHeight >= _height()) { bgOffset = (bgHeight - _height()) /2; - if(settings.positionY == 'center' || settings.centeredY) { // + if(settings.positionY == 'center' || settings.centeredY) { // $.extend(bgCSS, {top: "-" + bgOffset + "px"}); } else if(settings.positionY == 'bottom') { $.extend(bgCSS, {top: "auto", bottom: "0px"}); @@ -139,33 +140,36 @@ $.extend(bgCSS, {left: "auto", right: "0px"}); } } - + container.children("img:not(.deleteable)").width( bgWidth ).height( bgHeight ) .filter("img").css(bgCSS); } catch(err) { // IE7 seems to trigger _adjustBG before the image is loaded. // This try/catch block is a hack to let it fail gracefully. } - + // Executed the passed in function, if necessary if (typeof fn == "function") fn(); + + // Execute the onAdjust callback + if (typeof options.onAdjust == "function") options.onAdjust(); } - + function _width() { return isBody ? el.width() : el.innerWidth(); } - + function _height() { return isBody ? el.height() : el.innerHeight(); } - + }); }; - + $.anystretch = function(src, options, callback) { var el = ("onorientationchange" in window) ? $(document) : $(window); // hack to acccount for iOS position:fixed shortcomings - + el.anystretch(src, options, callback); }; - + })(jQuery); \ No newline at end of file From 0c4f9aa2c9f6704c781338c5f71d8a5da6fa75b5 Mon Sep 17 00:00:00 2001 From: Bart Conrad Date: Tue, 2 Sep 2014 16:13:26 -0500 Subject: [PATCH 2/4] Update readme for onAdjust --- README.textile | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/README.textile b/README.textile index faa733a..f98ffa3 100644 --- a/README.textile +++ b/README.textile @@ -29,6 +29,11 @@ h3. dataName The name of the data attribute that Anystretch will use for the image name, if none is supplied in the src. (type=String, default=stretch) +h3. onAdjust + +Gets called anytime Anystretch adjusts the size of the background image. +(type=Function, default=$.noop) + h2. Setup Include the jQuery library and Anystretch plugin files in your webpage (preferably at the bottom of the page, before the closing BODY tag): From e50f89a8aa52c272cd2dc378940d8a4cacc2b7a3 Mon Sep 17 00:00:00 2001 From: Bart Conrad Date: Tue, 2 Sep 2014 16:17:17 -0500 Subject: [PATCH 3/4] Bump version number --- jquery.anystretch.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/jquery.anystretch.js b/jquery.anystretch.js index 8b870ee..c42dd86 100644 --- a/jquery.anystretch.js +++ b/jquery.anystretch.js @@ -1,6 +1,8 @@ /* * jQuery Anystretch - * Version 1.2 (@jbrooksuk / me.itslimetime.com) + * Version 1.3 (@abconrad) + * https://github.com/abconrad/jquery-anystretch + * (@jbrooksuk / me.itslimetime.com) * https://github.com/jbrooksuk/jquery-anystretch * Based on Dan Millar's Port * https://github.com/danmillar/jquery-anystretch From 3be8cf4c675c18a8ee77806d9306d4b371939506 Mon Sep 17 00:00:00 2001 From: Bart Conrad Date: Tue, 2 Sep 2014 16:27:22 -0500 Subject: [PATCH 4/4] Fix bug when no options are set My original code through an error when not options were set. The code is now checking to make sure options are set before trying to run the onAdjust callback. --- jquery.anystretch.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/jquery.anystretch.js b/jquery.anystretch.js index c42dd86..6ce4eb6 100644 --- a/jquery.anystretch.js +++ b/jquery.anystretch.js @@ -154,7 +154,7 @@ if (typeof fn == "function") fn(); // Execute the onAdjust callback - if (typeof options.onAdjust == "function") options.onAdjust(); + if (options && typeof options.onAdjust == "function") options.onAdjust(); } function _width() {