Skip to content

Commit eebbec2

Browse files
markdalgleishmarkdalgleish
committed
Fix IE background issues, bump to version v0.4.0
1 parent 1776cd1 commit eebbec2

File tree

5 files changed

+69
-13
lines changed

5 files changed

+69
-13
lines changed

‎component.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "jquery.stellar",
3-
"version": "0.3.1",
3+
"version": "0.4.0",
44
"main": ["./jquery.stellar.js"],
55
"dependencies": {
66
"jquery": ">=1.4.3"

‎jquery.stellar.js

Lines changed: 33 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*!
2-
* Stellar.js v0.3.1
2+
* Stellar.js v0.4.0
33
* http://markdalgleish.com/projects/stellar.js
44
*
55
* Copyright 2012, Mark Dalgleish
@@ -83,6 +83,34 @@
8383
return prefix;
8484
}()),
8585

86+
supportsBackgroundPositionXY = document.createElement('div').style.backgroundPositionX !== undefined,
87+
88+
setBackgroundPosition = (function() {
89+
return supportsBackgroundPositionXY ?
90+
function($elem, x, y) {
91+
$elem.css({
92+
'background-position-x': x,
93+
'background-position-y': y
94+
});
95+
} :
96+
function($elem, x, y) {
97+
$elem.css('background-position', x + ' ' + y);
98+
};
99+
}()),
100+
101+
getBackgroundPosition = (function() {
102+
return supportsBackgroundPositionXY ?
103+
function($elem) {
104+
return [
105+
$elem[0].style.backgroundPositionX,
106+
$elem[0].style.backgroundPositionY
107+
];
108+
} :
109+
function($elem) {
110+
return $elem.css('background-position').split(' ');
111+
};
112+
}()),
113+
86114
setTransform = function($elem, val, dimension /* 'X' or 'Y' */) {
87115
var currentTransform = $elem.css(vendorPrefix + 'transform');
88116

@@ -320,7 +348,7 @@
320348

321349
$backgroundElements.each(function(){
322350
var $this = $(this),
323-
backgroundPosition = $this.css('background-position').split(' '),
351+
backgroundPosition = getBackgroundPosition($this),
324352
horizontalOffset,
325353
verticalOffset,
326354
positionLeft,
@@ -347,7 +375,7 @@
347375
$this.data('stellar-backgroundStartingLeft', backgroundPosition[0]);
348376
$this.data('stellar-backgroundStartingTop', backgroundPosition[1]);
349377
} else {
350-
$this.css('background-position', $this.data('stellar-backgroundStartingLeft') + ' ' + $this.data('stellar-backgroundStartingTop'));
378+
setBackgroundPosition($this, $this.data('stellar-backgroundStartingLeft'), $this.data('stellar-backgroundStartingTop'));
351379
}
352380

353381
// Catch-all for margin top/left properties (these evaluate to 'auto' in IE7 and IE8)
@@ -419,7 +447,7 @@
419447

420448
for (i = this.backgrounds.length - 1; i >= 0; i--) {
421449
background = this.backgrounds[i];
422-
background.$element.css('background-position', background.startingValueLeft + ' ' + background.startingValueTop);
450+
setBackgroundPosition(background.$element, background.startingValueLeft, background.startingValueTop);
423451
}
424452

425453
this._animationLoop = $.noop;
@@ -527,7 +555,7 @@
527555
bgLeft = this.options.horizontalScrolling ? (scrollLeft + background.horizontalOffset - this.viewportOffsetLeft - background.startingOffsetLeft + background.parentOffsetLeft - background.startingBackgroundPositionLeft) * (fixedRatioOffset - background.stellarRatio) + 'px' : background.startingValueLeft;
528556
bgTop = this.options.verticalScrolling ? (scrollTop + background.verticalOffset - this.viewportOffsetTop - background.startingOffsetTop + background.parentOffsetTop - background.startingBackgroundPositionTop) * (fixedRatioOffset - background.stellarRatio) + 'px' : background.startingValueTop;
529557

530-
background.$element.css('background-position', bgLeft + ' ' + bgTop);
558+
setBackgroundPosition(background.$element, bgLeft, bgTop);
531559
}
532560
},
533561
_startViewportDetectionLoop: function() {

‎jquery.stellar.min.js

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "jquery.stellar",
3-
"version": "0.3.1",
3+
"version": "0.4.0",
44
"title": "Stellar.js",
55
"author": {
66
"name": "Mark Dalgleish",

‎src/jquery.stellar.js

Lines changed: 32 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,34 @@
7474
return prefix;
7575
}()),
7676

77+
supportsBackgroundPositionXY = document.createElement('div').style.backgroundPositionX !== undefined,
78+
79+
setBackgroundPosition = (function() {
80+
return supportsBackgroundPositionXY ?
81+
function($elem, x, y) {
82+
$elem.css({
83+
'background-position-x': x,
84+
'background-position-y': y
85+
});
86+
} :
87+
function($elem, x, y) {
88+
$elem.css('background-position', x + ' ' + y);
89+
};
90+
}()),
91+
92+
getBackgroundPosition = (function() {
93+
return supportsBackgroundPositionXY ?
94+
function($elem) {
95+
return [
96+
$elem[0].style.backgroundPositionX,
97+
$elem[0].style.backgroundPositionY
98+
];
99+
} :
100+
function($elem) {
101+
return $elem.css('background-position').split(' ');
102+
};
103+
}()),
104+
77105
setTransform = function($elem, val, dimension /* 'X' or 'Y' */) {
78106
var currentTransform = $elem.css(vendorPrefix + 'transform');
79107

@@ -311,7 +339,7 @@
311339

312340
$backgroundElements.each(function(){
313341
var $this = $(this),
314-
backgroundPosition = $this.css('background-position').split(' '),
342+
backgroundPosition = getBackgroundPosition($this),
315343
horizontalOffset,
316344
verticalOffset,
317345
positionLeft,
@@ -338,7 +366,7 @@
338366
$this.data('stellar-backgroundStartingLeft', backgroundPosition[0]);
339367
$this.data('stellar-backgroundStartingTop', backgroundPosition[1]);
340368
} else {
341-
$this.css('background-position', $this.data('stellar-backgroundStartingLeft') + ' ' + $this.data('stellar-backgroundStartingTop'));
369+
setBackgroundPosition($this, $this.data('stellar-backgroundStartingLeft'), $this.data('stellar-backgroundStartingTop'));
342370
}
343371

344372
// Catch-all for margin top/left properties (these evaluate to 'auto' in IE7 and IE8)
@@ -410,7 +438,7 @@
410438

411439
for (i = this.backgrounds.length - 1; i >= 0; i--) {
412440
background = this.backgrounds[i];
413-
background.$element.css('background-position', background.startingValueLeft + ' ' + background.startingValueTop);
441+
setBackgroundPosition(background.$element, background.startingValueLeft, background.startingValueTop);
414442
}
415443

416444
this._animationLoop = $.noop;
@@ -518,7 +546,7 @@
518546
bgLeft = this.options.horizontalScrolling ? (scrollLeft + background.horizontalOffset - this.viewportOffsetLeft - background.startingOffsetLeft + background.parentOffsetLeft - background.startingBackgroundPositionLeft) * (fixedRatioOffset - background.stellarRatio) + 'px' : background.startingValueLeft;
519547
bgTop = this.options.verticalScrolling ? (scrollTop + background.verticalOffset - this.viewportOffsetTop - background.startingOffsetTop + background.parentOffsetTop - background.startingBackgroundPositionTop) * (fixedRatioOffset - background.stellarRatio) + 'px' : background.startingValueTop;
520548

521-
background.$element.css('background-position', bgLeft + ' ' + bgTop);
549+
setBackgroundPosition(background.$element, bgLeft, bgTop);
522550
}
523551
},
524552
_startViewportDetectionLoop: function() {

0 commit comments

Comments
 (0)