[jQuery] Replacing the contents of a div that uses newsticker plug-in

[jQuery] Replacing the contents of a div that uses newsticker plug-in

<HTML><BODY style="word-wrap: break-word; -khtml-nbsp-mode: space; -khtml-line-break: after-white-space; ">Hi there,<DIV>I've got a simple page that uses the newsticker plug-in (<A href="http://www.texotela.co.uk/code/jquery/newsticker/"> http://www.texotela.co.uk/code/jquery/newsticker/</A>), as follows:-</DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV><B><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<A href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</A>"></B></DIV><DIV><B><html xmlns="<A href="http://www.w3.org/1999/xhtml"> http://www.w3.org/1999/xhtml</A>"></B></DIV><DIV><B><head></B></DIV><DIV><B><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /></B></DIV><DIV><B><title>Untitled Document</title></B></DIV><DIV><B><style type="text/css"></B></DIV><DIV><B>.newsticker {</B></DIV><DIV><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><B>list-style-type: none;</B></DIV><DIV><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><B>list-style-position:outside;</B></DIV><DIV><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><B>padding:0 0 0 0;</B></DIV><DIV><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><B>margin:0 0 0 0;</B></DIV><DIV><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><B>font-family:"Lucida Grande", Geneva, Arial, Helvetica, sans-serif;</B></DIV><DIV><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><B>font-size:12px;</B></DIV><DIV><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><B>color:#000;</B></DIV><DIV><B>}</B></DIV><DIV><B></style></B></DIV><DIV><B><script type="text/javascript" src="javascript/jquery-1.1.1.js"></script></B></DIV><DIV><B><script type="text/javascript" src="javascript/jquery-newsticker.js"></script></B></DIV><DIV><B><script type="text/javascript"></B></DIV><DIV><B>$(document).ready(</B></DIV><DIV><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><B>function()</B></DIV><DIV><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><B>{</B></DIV><DIV><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><B>$("#news").newsTicker();</B></DIV><DIV><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><B>}</B></DIV><DIV><B>);</B></DIV><DIV><B><BR class="khtml-block-placeholder"></B></DIV><DIV><B>function showdiv() {</B></DIV><DIV><B>document.getElementById('news').style.display='block';</B></DIV><DIV><B>}</B></DIV><DIV><B><BR class="khtml-block-placeholder"></B></DIV><DIV><B>function hidediv() {</B></DIV><DIV><B>document.getElementById('news').style.display='none';</B></DIV><DIV><B>}</B></DIV><DIV><B><BR class="khtml-block-placeholder"></B></DIV><DIV><B>function replacecontents() {</B></DIV><DIV><B>info='<li>Replaced 1</li><li>Replaced 2</li><li>Replaced 3</li><li>Replaced 4</li>';</B></DIV><DIV><B>document.getElementById('news').innerHTML=info;</B></DIV><DIV><B>}</B></DIV><DIV><B></script></B></DIV><DIV><B></head></B></DIV><DIV><B><body></B></DIV><DIV><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><B><ul id="news"></B></DIV><DIV><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><B><li>Item 1</li></B></DIV><DIV><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><B><li>Item 2</li></B></DIV><DIV><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><B><li>Item 3</li></B></DIV><DIV><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><B><li>Item 4</li></B></DIV><DIV><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><B></ul></B></DIV><DIV><B><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><input type="button" value="Show" onclick="showdiv();" /></B></DIV><DIV><B><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><input type="button" value="Hide" onclick="hidediv();" /></B></DIV><DIV><B><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><input type="button" value="Replace" onclick="replacecontents();" /></B></DIV><DIV><B></body></B></DIV><DIV><B></html></B></DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV>The resulting page looks like this:-</DIV><DIV></DIV></BODY></HTML><HTML><BODY style="word-wrap: break-word; -khtml-nbsp-mode: space; -khtml-line-break: after-white-space; "><DIV></DIV><DIV>The ticker rotates through 'Item 1', 'Item 2', 'Item 3' and 'Item 4' </DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV><SPAN class="Apple-style-span">The problem is clicking the 'Replace' button runs the <B>replacecontents</B> function which updates the div contents with a list, thus breaking the ticker effect as below:-</SPAN></DIV><DIV></DIV></BODY></HTML><HTML><BODY style="word-wrap: break-word; -khtml-nbsp-mode: space; -khtml-line-break: after-white-space; "><DIV></DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV>Having had similar experiences with other plug-ins I'm thinking the plug-in code needs to somehow be re-initiated.</DIV><DIV>My question is, is there a way to dynamically run or re-run <B>$(document).ready</B> or similar?</DIV><DIV>Or am I missing something/is there a 'proper' way to do what I'm after?</DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV>Many thanks in advance.</DIV></BODY></HTML>