CODEWITHSUNDEEP
javascriptjquerycssscale
Toni Michel Caubet
Toni Michel Caubet

Reputation: 20163

Scale Image from current size and not from original size

Basically i am trying to scale an img with an id="room" according to a parameter wich will be +1 or -1 (and its a constant that i want to scale +-10%)

this is how i am trying

function scalar(scaleP100){ /* scaleP100 is +1 or -1 (no  other posible value)*/
                    var addX = $('#room').width()*10*scaleP100/100;
                    var addY = $('#room').height()*10*scaleP100/100;
                    var newW = $('#room').width()+ addX;
                    var newH = $('#room').height()  + addY;
                    $('img#room').css({'width':newW,'height':newH});
                    console.log(newW +','+ newH+':'+$('img#room').length);
                    return false;
}

This is inside a mouswheel detection,

So it has two stages: +10% from original size, and -10% from original size. I just don't know why it doesn't scale acording the current size (instead of the original size)

what am i doing wrong?

If you want to see what i probably didn't explain well, please check http://toniweb.us/m/3d/adam.html (but mousewheel outside the image only)

Thanks

Upvotes: 0

Views: 142

Answers (1)

tarmaq
tarmaq

Reputation: 422

you have two elements with same id: <div id="room"> and <img id="room"> This should work, but I suggest you to make your html cleaner..

function scalar(scaleP100){ /* scaleP100 is +1 or -1 (no  other posible value)*/
    var addX = $('img#room').width()*10*scaleP100/100;
    var addY = $('img#room').height()*10*scaleP100/100;
    var newW = $('img#room').width()+ addX;
    var newH = $('img#room').height()  + addY;
    $('img#room').css({'width':newW,'height':newH});
    console.log(newW +','+ newH+':'+$('img#room').length);
    return false;
}

Upvotes: 1

Related Questions