This is a common question but I have a slight twist to it so hopefully it’s not a duplicate:
I have a situation where I need to trigger .show() on elements that are rendered with display: none on page load. In ideal situations, I show everything on a page, then hide what needs to be hidden. Most clients hate the ‘flash’ of rendering, though, so they usually balk at that.
What I need to do now is grab the width of the element that is set to display: none; There are lots of ways to do this but traditionally have been a bit hacky such as ‘clone the html, set to block, do your calculations, remove clone’ type things.
The ‘twist’ to the question is: are there newer/better/default standard ways to do this with the more recent versions of jQuery (1.6.*)? Or do we still revert to rolling our own workaround?
In some situations, you can set to position: absolute, visibility: hidden, display: block to cause it to have it’s proper size (though not constrained by anything around it because it’s been removed from the layout), but not be visible and not affect the layout of the page. Then, set back to display: none, position: static and visibility: visible to put it back the way it was.