StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p><del>You need to use <code>window.getComputedStyle</code> for those browsers that support it, and <code>element.currentStyle</code> for those that support that. Or you could use jQuery <code>$(element).css('width')</code> which should abstract the difference <em>(although I haven't tested the latter)</em></del>.</p> <p>It seems the following does not do what I had thought it would, at least not for width and height. After searching around I found this other SO question where it is stated to be impossible <em>(at least not without parsing the Stylesheet?!)</em>. Seems mad to me, I shall keep looking just in case.</p> <p><a href="https://stackoverflow.com/questions/744319/get-css-rules-percentage-value-in-jquery">get CSS rule's percentage value in jQuery</a></p> <pre><code>if( window.getComputedStyle ) { value = window.getComputedStyle(element,null).width; } else if( element.currentStyle ) { value = element.currentStyle.width; } </code></pre> <h3>update</h3> <p>I've found that this works...! but only for firefox :( To me it would make sense that if the element has nothing to compute it's width against (i.e. it's not part of the document flow) it should return it's original value:</p> <pre><code>function isElementFluid(elm){ var clone = elm.cloneNode(false); if( window.getComputedStyle ) { value = window.getComputedStyle(clone,null).width; } else if( clone.currentStyle ) { value = clone.currentStyle.width; } return (value && String(value).indexOf('%') != -1 ); } </code></pre> <p><em>(have not tested for IE)</em></p> <p>Yet again another instance of where I agree with FireFox's implementation and frown at Chrome or Safari.</p> <h3>update 2</h3> <p>Ok, not a fan of being defeated by computers ;) so have come up with this function -- totally over the top, but it does seem to work. Again I have yet to test this on IE as I don't have a Windows machine to hand at the moment. It's annoying when the original FF only version is quite succinct, but the logic here is sound - it falls back to what a normal human would do in testing if something is stretchy.</p> <pre><code>function isElementFluid(elm){ var wrapper, clone = elm.cloneNode(false), ow, p1, p2; if( window.getComputedStyle ) { value = window.getComputedStyle(clone,null).width; } else if( clone.currentStyle ) { value = clone.currentStyle.width; } /// the browsers that fail to work as Firefox does /// return an empty width value, so here we fall back. if ( !value ) { /// remove styles that can get in the way clone.style.margin = '0'; clone.style.padding = '0'; clone.style.maxWidth = 'none'; clone.style.minWidth = 'none'; /// create a wrapper that we can control, my reason for /// using an unknown element is that it stands less chance /// of being affected by stylesheets - this could be improved /// to avoid possible erroneous results by overriding more css /// attributes with inline styles. wrapper = document.createElement('wrapper'); wrapper.style.display = 'block'; wrapper.style.width = '500px'; wrapper.style.padding = '0'; wrapper.style.margin = '0'; wrapper.appendChild(clone); /// insert the element in the same location as our target elm.parentNode.insertBefore(wrapper,elm); /// store the clone's calculated width ow = clone.offsetWidth; /// change the wrapper size once more wrapper.style.width = '600px'; /// if the new width is the same as before, most likely a fixed width if( clone.offsetWidth == ow ){ /// tidy up elm.parentNode.removeChild(wrapper); return false; } /// otherwise, calculate the percentages each time - if they /// match then it's likely this is a fluid element else { p1 = Math.floor(100/500*ow); p2 = Math.floor(100/600*clone.offsetWidth); /// tidy up elm.parentNode.removeChild(wrapper); return (p1 == p2) ? Math.round(p1)+'%' : false; } } else { p1 = (value && String(value).indexOf('%') != -1); return p1 ? value : false; } } </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload