StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>The answer of LeassTaTT works well in "standard" browsers like FF and Chrome. The solution for IE exists, but looks different. Here description of cross-browser solution:</p> <p>In HTML we need two preview elements, img for standard browsers and div for IE</p> <p>HTML:</p> <pre><code><img id="preview" src="" alt="" style="display:none; max-width: 160px; max-height: 120px; border: none;"/> <div id="preview_ie"></div> </code></pre> <p>In CSS we specify the following IE specific thing:</p> <p>CSS:</p> <pre><code>#preview_ie { FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale) } </code></pre> <p>In HTML we include the standard and the IE-specific Javascripts:</p> <pre><code><script type="text/javascript"> {% include "pic_preview.js" %} </script> <!--[if gte IE 7]> <script type="text/javascript"> {% include "pic_preview_ie.js" %} </script> </code></pre> <p></p> <p>The <code>pic_preview.js</code> is the Javascript from the LeassTaTT's answer. Replace the <code>$('#blah')</code> whith the <code>$('#preview')</code> and add the <code>$('#preview').show()</code></p> <p>Now the IE specific Javascript (pic_preview_ie.js):</p> <pre><code>function readURL (imgFile) { var newPreview = document.getElementById('preview_ie'); newPreview.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgFile.value; newPreview.style.width = '160px'; newPreview.style.height = '120px'; } </code></pre> <p>That's is. Works in IE7, IE8, FF and Chrome. Please test in IE9 and report. The idea of IE preview was found here: <a href="http://forums.asp.net/t/1320559.aspx" rel="noreferrer">http://forums.asp.net/t/1320559.aspx</a></p> <p><a href="http://msdn.microsoft.com/en-us/library/ms532969(v=vs.85).aspx" rel="noreferrer">http://msdn.microsoft.com/en-us/library/ms532969(v=vs.85).aspx</a></p>

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