发表新帖
发表新帖

How do you display animated GIFs within a jQuery Dialog in IE?

后端 未结
关注
4 1921
感情败类
感情败类 2020-12-10 22:50

We have the following code which seems to work just fine in every browser except IE:

var d = $(\'\');
d.dialog({modal:true});
相关标签:
4条回答
  • 无人共我
    2020-12-10 23:25

    I tried "everything" but animation.gif spinner did not work in jQueryUI modal dialog box. Some browsers were fine but it was Firefox refusing to work. Go figure whats the reason. Then found this super excellent non-img spinner component. Give all credits to fgnass.

    (NOTE: At the end of this post I have edited a new answer fixing animation.gif problem)

    http://fgnass.github.com/spin.js/

    http://twitter.com/fgnass

    // Show loading(processing) modal dialog
function showLoading(sTitle, str) {
    if (sTitle==undefined) sTitle = "Processing";
    if (str==undefined) str = "Processing...";
    var strBody = "<div id='spinnerdiv'><div style='padding-left:35px'>" + str + "</div></div>";

    $("#uidialog").html(strBody);   
    $("#uidialog").dialog({
        title: sTitle,
        modal: true, resizable: true, width: "auto", height: "auto",
        close: function(event, ui) { },
        buttons: {
            "Close": function() {
                $(this).dialog("close");
            }
        }
    });

    // must use css spinner, animated gif did not work in every browser
    var opts = {
        lines: 11, length: 7, width: 3, radius: 4, corners: 1,  rotate: 0, 
        color: '#000', speed: 0.7, trail: 38, shadow: false,  hwaccel: true, 
        className: 'spinner', zIndex: 2e9, top: '0', left: '0'
    };
    var target = document.getElementById("spinnerdiv");
    var spinner = new Spinner(opts).spin(target);   
}

    I have run Firefox, IE8, Chrome, Opera, Android tablet (stock and firefoxbeta), Nokia Lumia800, Nokia C7 browsers. All works fine.

    Edit 1 (use gif animation) This is how I was able to fix spinner.gif not animated on some browsers. Trick is to keep spinner div visible state at html page load. Hide it first thing in the jQuery init function. Then you may show+hide spinner div anytime you like and its animated.

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Spinner Test</title>
  <script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function($) {
    var spinner = $("#spinner");
    spinner.hide();
    $("#btnShow").click(function() { onShowClicked(); return false; });
    $("#btnHide").click(function() { onHideClicked(); return false; });
});

function onShowClicked() {
    var spinner = $("#spinner");
    spinner.show();
}

function onHideClicked() {
    var spinner = $("#spinner");
    spinner.hide();
}
</script>
</head>
<body>

<a href="" id="btnShow">SHOW</a> &nbsp;&nbsp; <a href="" id="btnHide">HIDE</a>

<br/><br/>
<div id="spinner"><img src="loader.gif" /></div>

</body>
</html>
    0 讨论(0)
  • 野性不改
    2020-12-10 23:27

    I have experience the same issue. Got it sorted setting the src just before opening the dialog.

    <div id="dvprocessing" style="display:none;">

  <img id="ProcessImg" src="Images/Processing.gif" alt=""/>

</div>

    Jscript

    document.getElementById("ProcessImg").src = "Images/Processing.gif";
$("#dvprocessing").dialog({
   width: 149,
   height:125,
   modal: true,
   closeOnEscape: false,
   resizable: false,
   draggable: false,
   position: ['center', 'center']
});
$(".ui-dialog-titlebar").hide();   /*To hide the title bar*/
    0 讨论(0)
  • 青春惊慌失措
    2020-12-10 23:30

    I'm doing something like this:

    $('#someDiv').css('background', '#ffffd url("Images/loading.gif") no-repeat 8.1em 50%');
    0 讨论(0)
  • 醉梦人生
    2020-12-10 23:46

    Perhaps performing the actions on a containment div (as opposed to the content itself) would do the trick. I've never had a problem displaying a a modal div with an animated gif.

    var d = $('<div><img src="spinner.gif"/></div>');
d.dialog({modal:true});
    0 讨论(0)
 看不清?
提交回复
热议问题