0

I have an image and i want its parent element to have the same width as the image. I do that on load event, so the width of the image is set. the image exists in DOM. this is the jsfiddle;

http://jsfiddle.net/8epfz/

this is the actual load event handler in my script;

matchParentOnLoad: function(e){
    var imgWidth   = this.naturalWidth || this.width;
    var imgParent  = ($(this).parent().length>0) ? $(this).parent() : $(this.parentNode);
    imgParent.width(imgWidth);
}

The length of the imgParent is always equal to zero on IE8 Standard mode. How can i solve this?

eyurdakul
  • 894
  • 2
  • 12
  • 29
  • It's not possible to test the jsfiddle on IE8, probably because of http://stackoverflow.com/questions/15260947/why-jsfiddle-is-not-rendering-at-all-in-ie8-and-previous-versions – T. Junghans Jan 09 '14 at 13:46
  • i know that but people always ask for jsfiddle here, i was trying to avoid that. it is basically getting the parent element of the image in it's load event. – eyurdakul Jan 09 '14 at 16:07
  • btw the image is added dynamically by script and the wrapper too – eyurdakul Jan 09 '14 at 16:07
  • The fiddle does not match to the code you pasted here. Well... what is your problem actually ? Getting the width of the parent element after image load ? – enguerranws Jan 09 '14 at 17:03
  • The code i've pasted is part of my script. It wouldn't work on fiddle unless i include the entire library that's why i've added a stand-alone function to fiddle which reproduces exactly the same situation. Could that be the reason? For the problem, please read the question, specially this part "The length of the imgParent is always equal to zero on IE8 Standard mode" – eyurdakul Jan 16 '14 at 18:25

2 Answers2

0

This is typically due to trying to work with the image prior to it being loaded, so its dimensions are unknown. Try deferring until it has been loaded:

$(window).load(function(){
    var imgw = $("#myimg");
    var prt = $("#parentel");
    prt.width(imgw.width());
});

ref: http://api.jquery.com/load-event/

Mister Epic
  • 16,295
  • 13
  • 76
  • 147
  • this is typically not reading the question completely; I do that on load event, so the width of the image is set. – eyurdakul Jan 09 '14 at 13:41
  • Which load event? The reason I ask is deferring until the DOM is ready is different than deferring to the window's load event. I've experienced the exact same issue you have with IE8, and deferring to the window.load event resolved it. If you are deferring to window.load, please let me know and I'll remove this answer. – Mister Epic Jan 09 '14 at 13:43
  • well the main application deals with that, i can't say where but the problem is, i can't get the wrapping element. not with $(el).parent() nor $(el.parentNode). the length of the parent is zero. btw, i am getting the correct size, only the parent element seems not to be there. – eyurdakul Jan 09 '14 at 16:06
0

You should probably test :

$(this).parent().length != -1 // Instead of $(this).parent().length>0
enguerranws
  • 8,087
  • 8
  • 49
  • 97