0

Is there any way I can find the height of an element rendered on the DOM.

Even when I zoom-in/zoom-out, it should give me the actual height of the element. Currently I have used:

HTML:

<div >
    <span><img src="Desert.jpg" style="border:none;width:100px" id="imgdiv"/></span>
    <br/>
    <input type="button" id="heightcalc" value="Find Height" />
</div>

jQuery:

$('#heightcalc').click(function(){
    alert($('#imgdiv').height());
});

Now with 100% Zoom the height of the image 75. With 200%/300%/400% Zoom the height is same i.e. 75. My requirement is whenever I increase the Zoom the height should also change. Is there any way I can find the relative height of the image. I tried this in IE9, Chrome/Firefox - the result is the same.

Also, I did try with clientHeight, offsetHeight, outerHeight without no luck !

Any help is greatly appreciated.

Thanks Anirban

António Almeida
  • 9,620
  • 8
  • 59
  • 66
Anirban
  • 589
  • 3
  • 16
  • 40
  • 1
    Why don't you find the zoom amount and multiply width and height with it? – inhan Apr 05 '12 at 03:21
  • [how to find zoom](http://stackoverflow.com/questions/1713771/how-to-detect-page-zoom-level-in-all-modern-browsers) – rlemon Apr 05 '12 at 03:25
  • @inhan how do i find the zoom amount from the browser ? – Anirban Apr 05 '12 at 15:01
  • `.css('zoom'))` but some browsers have other css implementations such as **-moz-transform** which returns something like **scale(0.5)** You might actually write a conditional function to gather/change that. – inhan Apr 05 '12 at 15:29

1 Answers1

0

I used the following to calculate the zooming effect for all browsers :

https://github.com/yonran/detect-zoom

through this could get the multiplication factor and then multiply this factor with the actual height of the element.

Here is the code : Please note I am using require js for our application.

require(["Widgets/detectzoom"], function (detectZoom) {
                zoom = detectZoom.ratios();
            });

            var heightofeachNode = ($("#dmcontent  ul li a span").eq(0).height()) * zoom.devicePxPerCssPx;
            self.pageSize = Math.round(($("#dmcontent").height()) / heightofeachNode) + 20 ;//20 - Its is the offset value

I have tested in all browser [IE9, Chrome18.0, FF 11.0]

Hope this helps.

Anirban

Anirban
  • 589
  • 3
  • 16
  • 40