JQuery UI Dialog and Flash in IE

Question

I am trying to get Zero Clipboard and jQuery UI Dialog to play well together, and that turned out to be pretty complicated.

Zero Clipboard allows you to copy to the clipboard from Javascript by placing a transparent Flash movie above the button so that the user clicks on Flash when he tries to click the button. This works well and cross-browser, as you can see on the demo page .

However, trying to use this in the jQuery UI dialog box, something seems to be wrong.

Firstly, I found that the flash element must be placed inside the dialog element, otherwise Chrome and IE refuse to respond to click events. This means that I cannot use the glue convenience method, but this is normal.

However, now for some reason IE will not accept the setText method in the Flash element.

An example of what I did is here . My code starts around line 300, and the most relevant lines are:

 $("#showme").dialog({autoOpen: false, width: 550, height: 200}); $("#showme").bind("dialogopen", function() { if($("#clipflash").length == 0) { var btn = $("#d_clip_button"); $("<div id='clipflash' style='position:absolute; background: #f00; z-index: 9999' />") .css(btn.position()) .width(btn.width()) .height(btn.height()) .html(clip.getHTML(btn.width(), btn.height())) .appendTo("#showme"); } }); 

I painted the div red to make it easier to identify and set its z-index to 9999 to be safe. Then I set the position and size for the "button" cover and add HTML for the Flash element using clip.getHTML() .

I have been working on this for several hours, so any help would be greatly appreciated.

Almost forgot: my problem is that IE7 says that “Object does not support this property or method” inside the Zero Clipboard code.

UPDATE

Powtac's comment indicates what looks really promising:

I forgot my own golden rule: In order for the external external interface of Flash to work in IE 7, you need to type EMBED / OBJECT HTML into a DIV element AFTER adding it to the DOM. Stupid IE.

However, switching the .html(clip.getHTML(btn.width(), btn.height())) lines .html(clip.getHTML(btn.width(), btn.height())) and .appendTo("#showme") did not help. Even making setTimeout to add flash HTML later did not help. I feel like I'm really close though ...

Answer 1

OK, so powtac pointed me in the right direction, but one element was missing: using the jQuery html() function did not have the same effect as just setting innerHTML . If it would be good if someone could explain why.

So, the fixed code is as follows:

 $("#showme").bind("dialogopen", function() { if($("#clipflash").length == 0) { var btn = $("#d_clip_button"); $("<div id='clipflash' style='position:absolute; background: #f00; z-index: 9999' />") .css(btn.position()) .width(btn.width()) .height(btn.height()) .appendTo("#showme") [0].innerHTML = clip.getHTML(btn.width(), btn.height()); } }); 

Also, I forgot to put DOCTYPE on the sample page, so offsets are wrong in IE. My bad.

Answer 2

I adapted your answer to the reusable method and fixed several position problems (I had to add a position: absolute and use outerWidth() and outerHeight() .

Demo

 function setupCopier(selector, buttonSelector, callback, opt_dialogSelector){ var copiedText = $(selector).text(); ZeroClipboard.setMoviePath('http://dl.dropbox.com/u/464119/Programming/javascript/libraries/ZeroClipboard/ZeroClipboard.swf'); var clip = new ZeroClipboard.Client(); clip.setText(copiedText); clip.addEventListener('complete', callback); $(buttonSelector).each(function(){ clip.glue(this); }); // Make sure Zero Clipboard is on top $("#ZeroClipboardMovie_1"). parent(). css("z-index", 2000); if (opt_dialogSelector) { $(opt_dialogSelector).bind("dialogopen", function() { if($("#clipflash").length === 0) { var btn = $(opt_dialogSelector).find(buttonSelector); $("<div id='clipflash' style='position:absolute; z-index: 9999' />") .css(btn.position()) .width(btn.outerWidth()) .height(btn.outerHeight()) .appendTo(opt_dialogSelector) [0].innerHTML = clip.getHTML(btn.outerWidth(), btn.outerHeight()); } }); } } $(function(){ setupCopier('#copy-div', '.copy-button', function(){ alert("Copied"); }, '#dialog'); $("#open-dialog-button").click(function(){ $("#dialog").dialog("open"); }); $("#dialog").dialog({autoOpen: false, modal: true, resizable: false, draggable: false, title: "Create your Free Personal Bar now", height:200, width:300}); });