Javascript image height and other calculation

I was having a problem on getting the height and also calculating other calculations.

I want to get the image height after it has loaded, so I put it on the onload attribute of <img></img> function, here's my code

<p class="test1" style="position:absolute;bottom:0px;">
   <img src="'+getBaseURL()+'js/check/no-image.png" rel="fullname"
        onload="verticalCenter()"/>
</p>

function verticalCenter(){
    var imageHeight = jQuery(".test1 img").height(); //I get a result of 0
    var total = imageHeight / 2 + 80
}

I already tried using setTimeout but it still fails. What I was planning to do here is to set the css of <p class="test1"> into like this:

jQuery(".test1").css("bottom","-"+total);

As I said, this isn't working because I don't get a result in total.

开发者_C百科

How would I do this, Is there a way to solve this problems, I'm already scratching my head on this.

Thanks in advance!

---

$(window).load(function () {

    var imageHeight = jQuery(".test1 img").height(); //I get a result of 0
    var total = imageHeight / 2 + 80

}


<p class="test1" style="position:absolute;bottom:0px;">
   <img src="'+getBaseURL()+'js/check/no-image.png" rel="fullname"/>
</p>

---

You need units on CSS dimensions.

jQuery(".test1").css("bottom","-"+total+"px");

You should also check to make sure that total is the value you are expecting it to be before setting it.

http://jsfiddle.net/jfriend00/yHqr7/

---

It might be easier to set all the image heights when the form is ready:

$(document).ready(
    $('p.text1 img').each(verticalCenter);
)

Unless you're using ajax to load the images; if that is the case, then you should use the live() event:

$('p.text1 img').live(verticalCenter);

Then in your function you can set everything:

function verticalCenter(){
    $(this).css('bottom',"-" + ($(this).height() / 2 + 80) + 'px');
}