CODEWITHSUNDEEP
jqueryhtml
Ilari
Ilari

Reputation: 37

"if height is larger than X" not working

I'm trying to achieve a script that reads image width and height, and if the image height is larger than 600, sets html div's height to 600. If the height is less than 600 the div's height would be image's height.

Here's what I've been trying.

JavaScript:

jQuery(document).ready(function($) {
var kuvakorkeus = $(".karttakuva img").css('height');
var kuvaleveys = $(".karttakuva img").css('width');

if (kuvakorkeus > 600){
$(".karttakuva").css('height',600);
}
else {
$(".karttakuva").css('height',kuvakorkeus);
}
});

HTML:

<div id="content">
<div class="relative">

<div class="karttakuva">

<img src="http://img42.imageshack.us/img42/8954/tylypahkanportit.png" class="imgMap" width="1297" height="883"/>

<a style="display:block" href="http://justinbieber.com"><div class="marker" id="france" data-coords="306,513"></div></a>
<a style="display:block" href="http://tylypahka.tk/kartta"><div class="marker" id="lol" data-coords="1031,237"></div></a>

</div>

</div>
</div>

The markers belong to a image panning script, but I don't think they mess this up. The problem is that even if the image's height was 2000, it would still choose the else action and set the div's height the same as image's.

Here's the page: http://tylypahka.tk/kartta/tylypahka

Am I missing something here ?

Upvotes: 1

Views: 3353

Answers (2)

Anujith
Anujith

Reputation: 9370

Change :

var kuvakorkeus = $(".karttakuva img").css('height');
var kuvaleveys = $(".karttakuva img").css('width');

to

var kuvakorkeus = $(".karttakuva img").height();
var kuvaleveys = $(".karttakuva img").width();

.css('height') gives x px as result (as in css stylesheets)

Upvotes: 3

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382304

This :

$(".karttakuva img").css('height');

only gives you what is specified in CSS.

You probably want $(".karttakuva img").height(), that is the height of the image.

Note that if you want to give a maximum to a height, you can specify in css max-height:600px. This also works for images (they're scaled with respect to width/height ratio).

Upvotes: 7

Related Questions