CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3875706
user3875706

Reputation: 67

<div> height not changing in if statement

I have an image in my HTML and i am trying to change its dimensions depending on the fact if it is portrait or landscape so that it doesn't cause much distortion. I have 3 buttons 'Small', 'Medium', 'Large' and each button changes height and width.

This is the if statement i have written yet but on clicking the button nothing happens

$('#large').click(function() {
var height = document.getElementById('#uploadedPhoto').clientHeight;
var width = document.getElementById('#uploadedPhoto').clientWidth;
    if (height > width) {
        $('#upoladedPhoto').css('height', '95%');
        $('#upoladedPhoto').css('width', '85%');    
    }
    else if (height < width) {
        $('#upoladedPhoto').css('height', '85%');
        $('#upoladedPhoto').css('width', '95%');
    }
    else {
        $('#upoladedPhoto').css('height', '95%');
        $('#upoladedPhoto').css('width', '95%');
        } 
});

This is the css of the uploadedImage / 

#upoladedPhoto {
display:none;
position:relative;
cursor:move;
max-height:100%;
max-width:100%;
left: 5em;
opacity:0.75;
}

The 3 buttons work when there is no if statement but in that case i only change the css property not taking in to consideration whether it is in potrait mode or landscape

If there is a better method to attempt this then please share.

Thanks

Upvotes: 0

Views: 815

Answers (4)

Carles Jove i Buxeda
Carles Jove i Buxeda

Reputation: 701

Looks fine to me. Haven't tested it, but couldn't it just be a typo? When you're fetching the element by Id, you wrote #uploadedPhoto, but then, in the if{} statements you wrote #upoladedPhoto. See the difference? You're trying to apply some CSS to a non exisiting div ;-)

Upvotes: 0

JNF
JNF

Reputation: 3730

document.getElementById('#uploadedPhoto') is wrong

try

document.getElementById('uploadedPhoto')

You shouldn't include the # in the id passed to document.getElementById

Besides that, the id itself is different in the $ function and in the getElementById function. It seems there was a typo which doesn't reflect in the getElementById, that's why the if is having trouble.

I made a fiddle for your review.

Upvotes: 0

h0mayun
h0mayun

Reputation: 3611

try something like

$('#large').click(function() {
$("img#upoladedPhoto").load(function() 
{
        var width = this.width;
        var height = this.height;
    if (height > width) {
        $('#upoladedPhoto').css('height', '95%');
        $('#upoladedPhoto').css('width', '85%');    
    }
    else if (height < width) {
        $('#upoladedPhoto').css('height', '85%');
        $('#upoladedPhoto').css('width', '95%');
    }
    else {
        $('#upoladedPhoto').css('height', '95%');
        $('#upoladedPhoto').css('width', '95%');
        } 
});
});

Upvotes: 0

Mritunjay
Mritunjay

Reputation: 25892

You are mixing javascript with jquery,

that will be

document.getElementById('uploadedPhoto').clientHeight;

instead of 

document.getElementById('#uploadedPhoto').clientHeight;

And I think there are some issues regarding clientHeight read here & here.

You can use simple jquery

$('#uploadedPhoto').height();

Upvotes: 2

Related Questions