1

It seems like in jQuery when an element is not visible width() returns 0. when I remove the accordion the height is reported correctly. I tried wrapping the images in a div and setting the div's display to block , but this didn't work either. is there any alternative to find image original size when accordion applied?

<div id="accordion">
    <h3>Click me</h3>
    <div>
         <div class="bg">
               <img src="your_img_url">
         </div>
    </div>      
    <h3>Click me</h3>
    <div>
         <div class="bg">
               <img src="your_img_url"/>
         </div>
    </div>
</div>

$(document).ready(function() {   
    $('#accordion').accordion({
        autoHeight: false,
        collapsible: true,
    });
    $("img").load(function() {
        alert($(this).height());
        alert($(this).width());
    });
});
Lodder
  • 19,758
  • 10
  • 59
  • 100
Array out of bound
  • 1,133
  • 7
  • 24

2 Answers2

0

Works for me!

Do you have accordion plugin?

if not: http://bassistance.de/jquery-plugins/jquery-plugin-accordion/

is it added to script?

  • yo should remove last , to collapsible: true,

it sould look like this:

$(document).ready(function() {
$('#accordion').accordion({ autoHeight: false, collapsible: true }); $("img").load(function() { alert($(this).height()); alert($(this).width()); }); });

But it works anyways!

0

Setting a specific width and height on the images will return that width and height. This can be done in CSS or using the width and height attributes on the <img> element.

Changing your images to <img src="your_img_url" style="height: 20px; width: 20px;"> should work.

If you need original width, you could do something like this:

var img = $('img').clone().appendTo('body').hide();
img.load(function () {
    alert($(this).width());
    alert($(this).height());
});

This answer has more detailed information on how to get the original size.

Community
  • 1
  • 1
Tyler Holien
  • 4,791
  • 2
  • 19
  • 14