Question

i have this markup

<div class="pfbc-form" id="ticker_div" style="padding: 0px; line-height: 18px; width: 64%; margin-top: 0px; margin-left: 10px;">
    <span id="ticker"><b> Avisos y tratamientos vigentes.</b></span>
</div>
<input class="ui-button ui-widget ui-state-default ui-corner-all" style="height: 40px;width: 10%;" value="something" type="button" onclick="doSomething();"></input>

and this js:

var array_datos = ['foo','bar'];
var i = 1;
function blink()
{
    var elem = $( "#ticker" );
    //elem.hide( 'clip', {}, 7000/5);
    elem.text(array_datos[i]);
    elem.show( 'clip', {}, 7000/5);
    if(i+1<array_datos.length)
        i++;
    else
        i = 1;
}
blink();

var timer = setInterval('blink()',7000);

​

this code works in all browsers, except for IE 7. when the .show runs, the button moves down, and returns to its position when the animation ends.

i tried setting a height to the divs, but that doesnt seem to work.
i have no clue of what its happening.

ps: i know that there are a couple of problems in that code but i dont think that affects this behavior.

Answer 1

Set height for your container div:

<div class="pfbc-form" id="ticker_div" style="height: 30px; padding: 0px; line-height: 18px; width: 64%; margin-top: 0px; margin-left: 10px;">

Fiddle here: http://jsfiddle.net/C4KyQ/3/