Make Uploadify work in a jquery accordion header when wmode=transparent

Question

Hi, I have a jquery accordion, and I want to insert uploadify inside the accordion header. Putting it there worked fine, but when I set the uploadify swf wmode to transparent, it does not work well:

-in Chrome clicking the upload swf does nothing
-in Firefox it does open the upload window, but also closes/opens the accordion
-in Internet Explorer it acutally works fine

If I set the wmode to window it does work fine, but I must use the transparent mode.

Any ideas?
Arad.

Edit: Another solution would be to invoke uploadify swf click using javascript- is it possible?

Edit2: the code-

relevant HTML:

<div id="accordion">
    <div class="category" id="category$category_id">

        <h3 class="ui-accordion-header">
            <div class="header-div">
                    <div id="categoryTitle$category_id" class="categoryTitle">$category_name</div>
            </div>

            <div class="rightPart">
                <input id="fileInput$category_id" class="fileInput" name="fileInput" type="file" />
            </div>
        </h3>

        <div style="overflow: auto; height: 400px; text-align: left; padding: 10px">
            (pictures are here...)
        </div>
    </div>

    <div class="category" id="category$categor... (more categories)
</div>

relevant javascript:

var stop = false;
$('#accordion h3').click(function(event) {
    if (stop) {
        event.stopImmediatePropagation();
        event.preventDefault();
        stop = false;
    }
});
$('#accordion').accordion({
    header: "> div > h3",
    collapsible: true
}).sortable({
    axis: "y",
    handle: "h3",
    stop: function(event, ui) {
        stop = true;
    },
    update: function(event, ui) {
        var categoriesArray = $(event.target).sortable('toArray');
        updateCategoriesOrder(categoriesArray);
    }
})

$('.fileInput').livequery(function(){
    var myID = $(this).attr('id'); // grab id of the clicked fileInput button (e.g. 'fileInput45')
    myID  = myID.replace('fileInput',''); // strip down to the numeric value

    $(this).uploadify({
        'uploader'  : 'uploader/uploadify.swf',
        'script'    : 'uploader/uploadify.php',
        'cancelImg' : 'uploader/cancel.png',
        'multi'     : true,
        'auto'      : true,
        'folder'    : '/uploads',
        'width'     : 24,
        'height'    : 24,
        'wmode'     : 'transparent',
        //'wmode'       : 'window',
        'fileDesc'  : 'Images (*.jpg;*.jpeg;*.jpe;*.png;*.gif;*.bmp)',
        'fileExt'   : '*.jpg;*.jpeg;*.jpe;*.png;*.gif;*.bmp;',
        'queueID'   : 'uploadQueue',// + myID,
        onComplete  : function(event, queueID, fileObj, reposnse, data) {
                //alert(myID);
           }
    });
});

Answer 1

Ok problem solved. It seems that it wasn't the accordion or wmode's fault, it was jquery's sortable.

My accordion is also sortable and when trying to press uploadify swf the sortable methods took over. The solution to this can be found in this thread: http://www.uploadify.com/forum/viewtopic.php?f=7&t=1556

What he did was to wrap the swf with a div, and then use sortable's 'cancel' option to prevent the div's class from being dragged ({cancel : ".uploadSwfDiv"}).

In Firefox clicking the swf also opens/closes the accordion, so to prevent that I added this code:

$('.uploadSwfDiv').click(function(event) {
        event.stopPropagation();
    }
);