Login/Register
Uploadify inside Jquery UI Dialog => Chrome & Opera bugs
Asked Answered
Solved jqueryjquery-uigoogle-chromeoperauploadify
P

3

10

I have the following code:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" media="screen" href="jquery-ui-1.8.9.custom.css" />
        <script type="text/javascript" src="jquery-1.5.min.js"></script>
        <script type="text/javascript" src="jquery-ui-1.8.9.custom.min.js"></script>
        <script type="text/javascript" src="jquery.uploadify.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            manualLightboxContent = function ()
            {
                $("#dialogContent").html($('#module_wrapper').html());
                $("#dialogContent").dialog( { 'modal': true } );
            }
        </script>
        <a href="#" onclick="manualLightboxContent();">Open</a>
        <div id="dialogContent" style="display:none;"></div>

        <div id="module_wrapper" style="display:none;">
            <script type="text/javascript">
            $().ready(function() {
                $('#uploadFile').uploadify({
                    'swf'  : 'uploadify.swf',
                    'fileObjName' : "uploadFile"
                });
            });
            </script>
            <input id="uploadFile" type="file" name="uploadFile" />
        </div>
    </body>

</html>

I can't find why, but in chrome, I'm not able to open the browse windows. Exactly like if there was some invisible div floating over the swf.

In opera, the bug is less important: the SELECT FILES text is under the swf instead of over.

If uploadify is outside a jquery UI dialog, it works just fine.

Can anyone explain me why this bug occur ?

Edit: Using Uploadify 3.

Pape answered 6/5, 2011 at 19:7 Comment(1)
FWIW -- I verified this bug (and the accepted answer) is present in Safari 5.1.7 also. – Vandavandal
I
21

I recently had the same problem, after looking up a bit at the code i have noticed the following at line 193:

jQuery('#' + swfuploadify.movieName).css({position: 'absolute', 'z-index': 1, 'left' : '0px'});

Simply changing the z-index to 9999 worked for me

jQuery('#' + swfuploadify.movieName).css({position: 'absolute', 'z-index': 9999, 'left' : '0px'});
Impromptu answered 12/8, 2011 at 19:31 Comment(1)
It worked for me when i removed z-index. But +1 for the idea :) – Leith
D
11

If you don't want to change core codes just add the following css rule to your page.

.swfupload {
    z-index: 100000 !important;
}
Disoblige answered 12/8, 2012 at 0:59 Comment(0)
P
1

I have tried all the solutions but to no avail.

There are 3 instances of uploadify in the page.

As shown in the image there is a dialog box or overlay div over the main page. When I click over the SELECT FILES it does not display the browse dialog box

http://lh5.ggpht.com/cZ-V3g6IwQ2ke-9NDfv3GYh8ra9YypCs4V60Md_s7W3Rawzg2IcT2WT9HoqX40kaSstF=s170

This are the source code for the page

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta name="generator" content=
  "HTML Tidy for Linux/x86 (vers 11 February 2007), see www.w3.org" />

  <title></title>
</head>

<body>
  <div id="upload_vi" style=
  "background-color:#e8e8e8; border: 1px solid rgb(0, 0, 0); position:absolute; display:none; width:280px; padding: 4px;"
  class="ui-draggable">
    <div style="padding:5px;">
      <a id="close" onclick="$('#upload_vi').hide()" style="color:#888888; float: right"
      name="close"><img src="images/close_btn.jpg" border="0" /></a>
    </div><br />

    <form id="fiuploader2" name="fiuploader2">
      <input type="hidden" name="edit_item_id2" id="edit_item_id2" value="" /><br />
      <input type="hidden" name="spicname2" id="spicname2" value="" /><input type=
      "hidden" name="sorgname2" id="sorgname2" value="" /> <input type="file2" name=
      "file2" id="file2" style="display: none;" /><object type=
      "application/x-shockwave-flash" data="/js/uplodify/uploadify.swf" width="120"
      height="30" id="file2Uploader" style="visibility: visible;">
        <param name="quality" value="high" />
        <param name="wmode" value="transparent" />
        <param name="allowScriptAccess" value="sameDomain" />
        <param name="flashvars" value=
        "uploadifyID=file2&amp;pagepath=/members/&amp;script=http://localhost/members/multiSrv.php&amp;folder=/files/cityguide/&amp;scriptData=asy_up%3D1%26cityguide%3D1%26video%3D1&amp;width=120&amp;height=30&amp;wmode=transparent&amp;method=POST&amp;queueSizeLimit=1&amp;simUploadLimit=1&amp;fileDesc=Videos (.avi, .flv)&amp;fileExt=*.avi;*.flv&amp;sizeLimit=2000000&amp;fileDataName=Filedata" />
      </object>

      <div id="file2Queue" class="uploadifyQueue"></div><br />
      <a onclick="$('#file2').uploadifyUpload()" style=
      "color: darkblue; font-size: 12px; cursor: pointer; cursor: hand; text-decoration: underline;">
      <b>Upload</b></a><br />

      <div id="hlptxt2">
        Please choose a .avi, .flv file.<br />
        Maximum size 2MB
      </div><br />
      <input type="hidden" name="type2" id="type2" value="videos" />
    </form>
  </div>
</body>
</html>
Perfecto answered 6/9, 2012 at 5:42 Comment(1)
This reply does not appear to be an answer. If this is still an unresolved problem for you, please open a separate question of your own. – Chung

© 2022 - 2024 — McMap. All rights reserved.