views:

249

answers:

1

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' + 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 + '%');
    });
    $('#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

+2  A: 

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.

Tatu Ulmanen
Thanks. But how would i rewrite my script for this to work? (i'll give it a shot myself, though i'm not very js-savvy)
cinnak
Thanks again! Though your script won't support my fields for horizontal position (#hposition) which get's updated when i press up- or downbutton. And the IE-fix sets backgroundPositionX for both ;)
cinnak
Even after slightly modifying your script it still doesn't work, for either up/down or lef/right =\
cinnak
Yea, but you can use your original code an just use the background position setting part, that should work nevertheless.
Tatu Ulmanen
Nope, still doesn't work :(
cinnak