Background positioning with jquery doesn't work in IE7
My script is supposed to dynamically change the background-position when clicking on a button (adding or substracting 1 percent from the current value). Works fine in Fx and Chrome, and ie8 too (i believe), though not in ie7.
Here's my code:
function makeClicker(index) {
$('#leftbutton' + in开发者_如何学Cdex).click(function() {
var bPos = $('#div' + index).css('background-position');
bPos = bPos.replace(/%/g, '').split(' ');
var bPosResult = (1 + parseInt(bPos[0], 0));
bPos = bPosResult + '% ' + bPos[1] + '%';
$('#div' + index).css('background-position', bPos);
$('#vposition' + index).attr("value", bPosResult + '%');
});
$('#rightbutton' + index).click(function() {
var bPos = $('#div' + index).css('background-position');
bPos = bPos.replace(/%/g, '').split(' ');
var bPosResult = (-1 + parseInt(bPos[0], 0));
bPos = bPosResult + '% ' + bPos[1] + '%';
$('#div' + index).css('background-position', bPos);
$('#vposition' + index).attr("value", bPosResult + '%');
});
$('#upbutton' + index).click(function() {
var bPos = $('#div' + index).css('background-position');
bPos = bPos.replace(/%/g, '').split(' ');
var bPosResult = (1 + parseInt(bPos[1], 0));
bPos = bPos[0] + '% ' + bPosResult + '%';
$('#div' + index).css('background-position', bPos);
$('#hposition' + index).attr("value", bPosResult + '%');
});
$('#downbutton' + index).click(function() {
var bPos = $('#div' + index).css('background-position');
bPos = bPos.replace(/%/g, '').split(' ');
var bPosResult = (-1 + parseInt(bPos[1], 0));
bPos = bPos[0] + '% ' + bPosResult + '%';
$('#div' + index).css('background-position', bPos);
$('#hposition' + index).attr("value", bPosResult + '%');
});
}
for(var i = 1; i <= 5; i++)
makeClicker(i);
Thanks for any advices on what could cause this. -Simon
For Internet Explorer, you need to use the background-position-x
and background-position-y
attributes.
Here's an example on how you can support IE also. I also refactored your code a bit to reduce redundancy:
function makeClicker(index) {
var el = ['#leftbutton'+index, '#rightbutton'+index, '#upbutton'+index, '#downbutton'+index];
$(el).click(function() {
var bPosResult;
var bPos = $('#div' + index).css('background-position').replace(/%/g, '').split(' ');
switch($(this).attr('id')) {
case 'leftbutton':
bPosResult = (1 + parseInt(bPos[0], 0));
bPos = bPosResult + '% ' + bPos[1] + '%';
break;
case 'rightbutton':
bPosResult = (-1 + parseInt(bPos[0], 0));
bPos = bPosResult + '% ' + bPos[1] + '%';
break;
case 'upbutton':
bPosResult = (1 + parseInt(bPos[1], 0));
bPos = bPos[0] + '% ' + bPosResult + '%';
break;
case 'downbutton':
bPosResult = (-1 + parseInt(bPos[1], 0));
bPos = bPos[0] + '% ' + bPosResult + '%';
break;
}
// Detect IE
if(!$.support.cssFloat) {
$('#div' + index).css({
backgroundPositionX: bPos.split[' '][0],
backgroundPositionX: bPos.split[' '][1]
});
} else {
$('#div' + index).css('background-position', bPos);
}
$('#vposition' + index).attr("value", bPosResult + '%');
});
}
I haven't tested that but it should work.
精彩评论