StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I've been able to come up with a working solution to this. Here's the basic outline:</p> <ul> <li>Disable the Uploadify button image <code>buttonImg: " "</code></li> <li>Make the flash object transparent <code>wmode:"transparent"</code></li> <li>Using CSS, position a fake styled <code>button</code> or <code>a</code> tag behind the flash object</li> <li>After initializing Uploadify, set the width and height of the object to match the button behind it</li> </ul> <p>The flash object will shield the button underneath it from mouseover etc. events; so to get hover effects, you'll need to take a couple of additional steps:</p> <ul> <li>Wrap both the button and the upload object in a div</li> <li>After initializing Uploadify, set the width and height of the wrapper div to match the button</li> <li>You can then use jQuery to handle the <code>.hover()</code> events on the wrapper div and apply styles to the button</li> </ul> <p>Putting it all together:</p> <p>HTML</p> <pre><code><div class="UploadifyButtonWrapper"> <a>Upload Files</a> <div class="UploadifyObjectWrapper"> <input type="file" id="Uploadify" name="Uploadify" /> </div> </div> </code></pre> <p>CSS</p> <pre><code>div.UploadifyButtonWrapper{ position:relative; } /* fake button */ div.UploadifyButtonWrapper a { position:absolute; /* relative to UploadifyButtonWrapper */ top:0; left:0; z-index:0; display:block; float:left; border:1px solid gray; padding:10px; background:silver; color:black; } /* pass hover effects to button */ div.UploadifyButtonWrapper a.Hover { background:orange; color:white; } /* position flash button above css button */ div.UploadifyObjectWrapper { position:relative; z-index:10; } </code></pre> <p>Javascript: </p> <pre><code>$("input.Uploadify", self).uploadify({ ... buttonImg: " ", wmode: "transparent", ... }); var $buttonWrapper = $(".UploadifyButtonWrapper", self); var $objectWrapper = $(".UploadifyObjectWrapper", self); var $object = $("object", self); var $fakeButton = $("a", self); var width = $fakeButton.outerWidth(); var height = $fakeButton.outerHeight(); $object.attr("width", width).attr("height", height); $buttonWrapper.css("width", width + "px").css("height", height + "px") $objectWrapper.hover(function() { $("a", this).addClass("Hover"); }, function() { $("a", this).removeClass("Hover"); }); </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