Member Avatar for vedmack

Hi I'm creating a popup to display a loading message, inside this popup i placed an animated gif...

the problem is that the gif is not being animated (it is an animated gif...) , its is being shown but without the animation...

This is the code:

oPopupLoading = window.createPopup();
    var oPopupBody = oPopupLoading.document.body;
    oPopupBody.style.cssText = "margin:0px;border:1px outset;background:#97baea;FONT-FAMILY: verdena, Arial, sans-serif;overflow:hidden"
    var hStr = "";
    hStr += '<table width=100% height=50 style="background:"><tr><td align=center><img src="../../myfolder/load.gif" width=16 height=16></td>'
    hStr += '<td valign=middle align=center style="FONT-WEIGHT: bold; FONT-SIZE: 10pt; COLOR: #010d36"><span id=spMesangerCaption>' + str + '</span></td>';
    hStr += '</tr></table>';
    oPopupBody.innerHTML = hStr;
    
    oPopupLoading.show(document.body.clientWidth/2-125,document.body.clientHeight/2-25,250,50,document.body);

Any ideas what am I doing wrong?

Thanks ahead!

  • 2 Contributors
  • 1 Reply
  • 131 Views
  • 13 Hours Discussion Span
  • Latest Post Latest Post by Airshow

Dani AI

Generated

: this is a common symptom when using the IE-only popup API you used; the GIF renders but its frame updates are not painted reliably there. was right to suggest avoiding that technique — a normal positioned DOM element will behave like any other page content and the GIF will animate.

A simple, robust pattern is an overlay/centered container you show/hide with CSS (fixed positioning for modern browsers, absolute + scroll offsets for ancient IE). Example:

<div id="loading" style="display:none;position:fixed;left:50%;top:50%;width:260px;height:56px;margin-left:-130px;margin-top:-28px;z-index:9999;background:#97baea;border:1px solid #666;padding:8px;font-family:Verdana,Arial,sans-serif">
  <img id="loadingGif" src="/myfolder/load.gif" width="16" height="16" alt="loading" style="vertical-align:middle" />
  <span id="loadingMsg" style="font-weight:bold;font-size:10pt;color:#010d36;margin-left:8px">Loading...</span>
</div>

<script>
function showLoading(msg){
  document.getElementById('loadingMsg').textContent = msg || 'Loading...';
  document.getElementById('loading').style.display = 'block';
}
function hideLoading(){
  document.getElementById('loading').style.display = 'none';
}
</script>

If you cannot change the popup approach, two practical workarounds that have helped others are: 1) host the GIF inside a small iframe (the iframe document repaints the animation correctly), or 2) append/replace the <img> node after the popup is shown to force the browser to start the animation. Also avoid applying IE image filters or certain opacity hacks to the GIF; those are known to stop frame updates.

Quick checks: confirm the GIF animates on a normal page, test in another browser, and prefer CSS/SVG spinners for better performance and scalability.

Member Avatar for Airshow

Vedmack,

I'm not sure why the gif should decide not to animate. It works in IE 6. Maybe it's a bug in the version of the browser (presumably IE) that you are using.

As far as I can tell, window.createPopup is proprietary Microsoft. I have certainly never used it or the associated methods.

A better solution (cross-browser or otherwise) would be to use an absolutely positioned div and show/hide it with element.style.display = 'block'; / element.style.display = 'none'; .

With a little further effort in working out height and width, this should work in all the common browser families - IE, Moz and Webkit - if necessary.

Airshow

Edited by Airshow because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.