Jump to content
Sign in to follow this  
Day

Event Listener for when .offsetParent !== null

Recommended Posts

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 by Day

Share this post


Link to post
Share on other sites

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 by Day

Share this post


Link to post
Share on other sites

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 by Day

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...