StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I figured it out, so I'll try to answer my own question...</p> <p>First important point: userscripts can set params of a Flash object on the fly - I'd been led to believe that wasn't possible by Sam's comment in <a href="https://stackoverflow.com/questions/2794028/position-absolute-a-div-over-flash">this question</a>.</p> <p>Second important point: the wmode value "opaque" should be used rather than "transparent" for performance reasons (<a href="http://www.communitymx.com/content/article.cfm?cid=e5141" rel="nofollow noreferrer">source1</a>, <a href="https://stackoverflow.com/questions/6402262/wmode-what-does-it-mean-in-browsers-rendering-behavior">source2</a>). Both allow html content to be drawn on top of the Flash object.</p> <p>So my solution was to listen for when Flash objects are added to the page (or I think if you are targeting Flash objects which aren't added dynamically, you could just get them straightaway), find the wmode param of the one I want to change, clone it, and replace the original param with my clone:</p> <pre><code>// code to create and style myDiv, see original question document.addEventListener("DOMNodeInserted", nodeInserted, false); function nodeInserted(e) { if (e.target.id == "swf_div") { var found = false; var params = e.target.getElementsByTagName("param"); for (var i = 0; i < params.length; i++) { if (params[i].getAttribute("name") == "wmode") { var clone = params[i].cloneNode(true); clone.setAttribute("value", "opaque"); params[i].parentNode.replaceChild(clone, params[i]); found = true; break; } } // in case swf_div doesn't already have a wmode param if (!found) { var clone = e.target.cloneNode(true); var param = document.createElement("param"); param.setAttribute("name", "wmode"); param.setAttribute("value", "opaque"); clone.appendChild(param); e.target.parentNode.replaceChild(clone, e.target); } continueScript(); } } function continueScript() { document.body.appendChild(myDiv); // do wonderful things } </code></pre> <p>I still don't understand why the script requires a wmode change in Chrome but not in FF. But since that is the case, and wmode=opaque has a performance cost, I'll do a browser check before making the change. It would be very helpful to know which specific feature or rule controls this layering behaviour so that my check could be more precise.</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