Change marquee text and speed using jQuery

Question

I am trying to change the text inside a marquee tag and the speed of the marquee using jQuery.

In my script, I have the following:

$("div.change").click( function() {     
  //here I want to make the script to change the text to anything else ...      
}); 

In my HTML:

<div id="marq"><marquee id="title" scrollamount="5">MY TEXT</marquee></div>

<div class="change">Click Here To Change The Text in Marquee</div>

How do I change the speed and the text inside the marquee?

Thanks in advance.

Answer 1

The marquee tag is not in the HTML specification so it's support in newer browsers is not guaranteed. It's use is highly discouraged.

If you must have scrolling text, there are jquery plugins to do this.

Answer 2

I agree that you shouldn't use the marquee element, but if you have to, then to copy the text and double the speed do the following:

$('div.change').click(function(){
    var marq  = $('marquee#marq');
    var speed = 2 * marq.attr('scrollamount'); // double the current speed
    var text = $('textarea#newtext').text();   // Get new text
    $(marq).text(text).attr({scrollamount: speed});
});

This assumes the user has filled a textarea element with an id of "newtext" with the new text.

P.S. why do you have an ID on the marquee, but a class on the change-div. Also, it's better to use a button tag for the user to click, rather than click in a div, it's more intuitive.