CODEWITHSUNDEEP
javascriptjquerycss
AKB
AKB

Reputation: 5938

css for animated image

I need to create an css for image ie height and width. how can create?

<div id="toHide" class="pb-text-align-center">
<img src="img/load.gif" style="margin-left: auto; margin-right: auto;"/>
<form wicket:id="safeForm" class="clearfix" />
</div>

.pf-text-align-center, .pb-text-align-center { text-align: center; }

<script type="text/javascript">
  var $ = jQuery.noConflict();
  $('#toHide').doTimeout(1000, function() { $('#toHide').find('#safeForm35').submit();});
</script>

Issue: dynamic animation action is not happening in IE. it may resolve by doing correct height and width. How can i see what is the required height and width? and other details?

EDIT

Answer:

HTML source code:

<SCRIPT type="text/javascript"> 
    var $ = jQuery.noConflict(); 
    document.getElementById('toHide').style.display ="";
    $('#toHide').doTimeout(1000, function() { 
        $('#toHide').find('#safeForm34').submit(); 
        document.getElementById('myAnimatedImage').src = "../../img/load.gif"; 
        });
</SCRIPT>

html:

  <div id="toHide" class="pb-text-align-center">
    <img src="img/load.gif" id='myAnimatedImage' style="margin-left: auto; margin-right: auto;"/>
    <form wicket:id="safeForm" class="clearfix" />
</div>

Upvotes: 1

Views: 250

Answers (1)

Spudley
Spudley

Reputation: 168655

Bad news for you - you're hitting a known bug in IE.

In IE, if you load an animated GIF, but it's invisible when it loads, then the animation won't work when you make it visible.

The work-around is to load the image at the time you need to display by setting the src attribute, rather than pre-loading it and making it visible.

Reference: http://www.norio.be/blog/2008/09/animated-gif-not-working-internet-explorer

Upvotes: 4

Related Questions