Event Listener for when .offsetParent !== null

[Day]

I've got a few elements that get width based on the rendered width of other relative elements. However some of the relative elements are in hidden containers when the page loads so all of the elements that are using the relative element's width are getting a width of 0px.

 

I was able to do the following to make sure the width is only applied when the relative element is visible by checking the value of .offsetParent

if (el.offsetParent !== null) {        // use el.offsetWidth to give other elements their width    }

Now I'm trying to figure out how to run the function once el.offsetParent changes from null. Can I create some sort of event listener for this behavior?

Edited June 18, 2014 by Day

[justsomeguy]

Firefox supports Object.watch to watch for property changes, but it's the only one. There's a discussion about it here with some code to implement it in other browsers:http://stackoverflow.com/questions/1029241/javascript-object-watch-for-all-browsers

[Day]

Awesome! Thank you. I was being too specific in my searches, searching for listeners of changes to .offsetParent, instead of simply object property changes.

 

The fix script isn't playing nice with my script in IE8, but it does make .watch work so now I just have to find out how to make them work together which is only a matter of time.

Edited June 18, 2014 by Day

[Day]

well watch was giving me some undesirable results and I'd rather not use it until I fully understand what that plugin script from stack exchange is doing, but I did find an alternative solution to my problem.

 

It's probably not the best way to handle it though

function isHidden(el) {  return /display:s*none/.test(el.getAttribute('style'));}if (fs.input[i].offsetParent !== null) {  setWidths();}else {  var nextParent = fs.input[i].parentNode;    while (!isHidden(nextParent)) {    if (isHidden(nextParent.parentNode)) {      hiddenParent = nextParent.parentNode;      break;    } else nextParent = nextParent.parentNode;  }    var origStyle = hiddenParent.getAttribute('style');  var tempStyle = hiddenParent.getAttribute('style').replace(/display:s*none;*/, '');    hiddenParent.setAttribute('style',tempStyle);  setWidths();  hiddenParent.setAttribute('style',origStyle);}

This is all happening in a for loop. If the offsetParent property is null, it just finds the parent that has the display: none style, removes it, runs the setWidth() function, then adds the original style back again.

Edited June 18, 2014 by Day