CODEWITHSUNDEEP
javascriptjquerycssrotation
Chris Geirman
Chris Geirman

Reputation: 9684

Rotating Images w/jQuery... But Resizing Isn't Working

I have an image that needs to be rotated. This image is oriented either landscape or portrait.

I have an HTML5 form to accept the degrees of rotation with a step 90 each click. When this value changes, the image should rotate and resize. It should always be 770px wide, but can be as tall as it needs to be.

I've written the following event handler, but it doesn't work the way I'd expect.

Use Case: When the image is portrait, it's initial values are 770x1027 (w x h). When rotating it 90 degrees, I would expect the below function to rotate the image, set the width = 1027 and height = 770. But what I'm seeing is that both width and height are being set to 770. What am I not seeing?

$("#degrees").change(function(){
    var element$ = $("#photo-submission"),
        w = element$.width(), 
        h = element$.height(),
        deg = $(this).val();


    element$.removeAttr("style").attr({
        "style": "-webkit-transform:rotate("+ deg +"deg); width: "+ h +"px; height: "+ w + "px;"
    })
});

Upvotes: 0

Views: 232

Answers (2)

adeneo
adeneo

Reputation: 318362

How about trying it with the jQuery method actually made for changing CSS properties, that way it would be easier to keep track of your variables and place them in the right places :

$("#degrees").change(function(){
    var el  = $("#photo-submission"),
        w   = el.width(), 
        h   = el.height(),
        deg = this.value;

    el.css({
        '-webkit-transform' : 'rotate(' +deg+ 'deg)',
        width  : w,
        height : h
    });
});

FIDDLE

The real advantage of this is that you don't have to set the width and height to what it already is, which is basically what you're doing, so this is enough

$("#degrees").change(function(){
    $("#photo-submission").css({
        '-webkit-transform' : 'rotate(' + this.value + 'deg)'
    });
});

Upvotes: 1

sushain97
sushain97

Reputation: 2812

You seem to have switched your width and height.

element$.removeAttr("style").attr({
    "style": "-webkit-transform:rotate("+ deg +"deg); width: "+ w +"px; height: "+ h + "px;"
})

Upvotes: 1

Related Questions