Changing jQuery marquee text and css/style

Question

I have div

<div id="rotatingText" class="marquee">
</div>

and marquee on that div is initialized on window load

jQuery('.marquee').marquee({
        duration: 3000,
        gap: 50,
        delayBeforeStart: 0,
        direction: 'left',
        duplicated: false
    });

Now i need to change text and css of that div on ajax aftersuccess. I get new text and css properties in that ajax response. With that text and css I invoke following:

function setRotatingTextProperties( value, css, objectId )
{
    var object = document.getElementById( objectId );
    object.innerHTML = value;
    jQuery ( object ).attr( 'style', css );
}

After that marquee stops working. I think that jQuery marquee sets some style in that div and i override it with:

jQuery ( object ).attr( 'style', css );

if I just add my css to existing with

var currentCss = jQuery ( object ).attr( 'style');
jQuery ( object ).attr( 'style', currentCss + css );

with multiple changes I will end up with huge amount of unusable css. And that css will change regularly ( every fiew seconds )... Any advice and idea will be much appreciated. Thx in advance.

Answer 1

Actually I think that your problem is not in your css and:

jQuery ( object ).attr( 'style', css );

In my experience problem with jQuery marquee is in changing of text. so your problem is:

object.innerHTML = value;

Best solution ( If you can change html of that page ) is to add span into it:

<div id="rotatingText" class="marquee">
        <span id="rotatingTextSpan"></span>
    </div>

And change span text, and style of the div. something like:

function setRotatingTextProperties( value, css )
{
        // change span text value
        $( '#predefineImageRotatingTextSpan' ).text( value );
        // change css value on div
        $( '#predefineImageRotatingText' ).attr( 'style', css );
}

If you can't change HTML of that page for any reason you can always insert span value into it on window.load or document.ready, but BEFORE you initialize marquee with something like

 $( '#predefineImageRotatingTextSpan' ).html( '<span id="predefineImageRotatingTextSpan"></span>' );

and then use above function.

EDIT:

If you have some predefined text in your div at the beginning just copy its value into that div:

var $object = $( '#predefineImageRotatingTextSpan' )
var initialText = $object.text()
$object.html( '<span id="predefineImageRotatingTextSpan"> ' + initialText  + '</span>' );