Skip to content

Added onAdjust Callback #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Added onAdjust Callback #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
46ea219
Add onAdjust option and demo
abconrad Sep 2, 2014
0c4f9aa
Update readme for onAdjust
abconrad Sep 2, 2014
e50f89a
Bump version number
abconrad Sep 2, 2014
3be8cf4
Fix bug when no options are set
abconrad Sep 2, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions README.textile
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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):
Expand Down
38 changes: 38 additions & 0 deletions examples/demo-onAdjust.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Anystretch onAdjust Demo</title>
<style type="text/css" media="screen">
* { margin:0; padding:0; }
body { background:#ccc; color:#fff; font:1em/1.4em Georgia, 'Times New Roman', serif; }
h1, div + p { color:#fff; text-align:center; }
h1 { font-size:3.2em; padding:5% 20% 0 20%; }
.home-header-img {width: 100%; height: 100%; background-color: red;}
</style>
</head>
<body>
<section class='home-header-img'></section>
<script src="../lib/jquery-1.7.1.min.js"></script>
<script src="../jquery.anystretch.js"></script>

<script>
$(document).ready(function(){
$('.home-header-img').anystretch(
'img01.jpg',
{
elPosition: 'absolute',
onAdjust: function () {
var h = $(window).height(),
w = $(window).width();
$('.home-header-img').find('h1').remove();
$('.home-header-img')
.append('<h1>Height: ' + h + ' Width: ' + w + '</h1>');
}
}
);
});
</script>

</body>
</html>
64 changes: 35 additions & 29 deletions jquery.anystretch.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -16,7 +18,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

Expand All @@ -26,7 +28,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"),
Expand All @@ -36,26 +39,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 = $("<div />").attr("class", "anystretch")
Expand All @@ -64,17 +67,17 @@
// Prepare to delete any old images
container.find("img").addClass("deleteable");
}

img = $("<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.
Expand All @@ -83,10 +86,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) {
Expand All @@ -95,10 +98,10 @@
el.append(container);
}
}

// Attach the settings
container.data("settings", settings);

var imgSrc = "";
if(src) {
imgSrc = src;
Expand All @@ -108,23 +111,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"});
Expand All @@ -139,33 +142,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 (options && 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);