Databases
StackOverflow2013
Postsdbo
POTrying to refactor this Javascript and coming unstuck
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POTrying to refactor this Javascript and coming unstuck
    text
    copied!<p>I'm developing a website, and part of the content will be a live 'departures board' ticker, as such:</p> <p><img src="https://i.stack.imgur.com/8fIMw.png" alt="departures board"></p> <p>I'm very experienced at C#, but have absolutely no experience with Javascript.</p> <p>I've found the following Javascript <a href="https://stackoverflow.com/questions/4869405/best-implementation-of-airport-train-station-departure-board-html-css-jquery">on SO</a> which almost does what I want:</p> <pre><code>&lt;script type="text/javascript"&gt; $.fn.ticker = function (options) { options = $.extend({ speed: 30 }, options); var alph = 'ABCDEFGHIJKLMNOPQRSTUVXYZ01234567890,.:+=/();!- '; return this.each(function () { var k = 1, elems = $(this).children(), arr = alph.split(''), len = 0, fill = function (a) { while (a.length &lt; len) { a.push(' '); } return a; }, texts = $.map(elems, function (elem) { var text = $(elem).text(); len = Math.max(len, text.length); return text.toUpperCase(); }), target = $('&lt;div&gt;'), render = function (print) { target.data('prev', print.join('')); fill(print); print = $.map(print, function (p) { return p == ' ' ? '&amp;#160;' : p; }); return target.html('&lt;span&gt;' + print.join('&lt;/span&gt;&lt;span&gt;') + '&lt;/span&gt;'); }, attr = {} $.each(this.attributes, function (i, item) { target.attr(item.name, item.value); }); $(this).replaceWith(render(texts[0].split(''))); target.click(function (e) { var next = fill(texts[k].split('')), prev = fill(target.data('prev').split('')), print = prev; $.each(next, function (i) { if (next[i] == prev[i]) { return; } var index = alph.indexOf(prev[i]), j = 0, tid = window.setInterval(function () { if (next[i] != arr[index]) { index = index == alph.length - 1 ? 0 : index + 1; } else { window.clearInterval(tid); } print[i] = alph[index]; render(print); }, options.speed) }); k = k == texts.length - 1 ? 0 : k + 1; }); }); }; // Assign functions $('#mainfeatureslist').ticker(); // Click it now $('#mainfeatureslist').click(); &lt;/script&gt; </code></pre> <p>...combined with the necessary include of JQuery and the appropriate HTML:</p> <pre><code>&lt;div id="mainfeatureslistcontainer"&gt; &lt;ul id="mainfeatureslist"&gt; &lt;li&gt;Live bus arrivals&lt;/li&gt; &lt;li&gt;Another feature here&lt;/li&gt; &lt;li&gt;Name of third feature&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p>This code generates a list which, when clicked, transitions to the next list item. </p> <p>However, I want the list to automatically transition at a set interval, with no clicks required.</p> <p>I've tried a simple fudge, i.e.</p> <pre><code>setInterval($('#mainfeatureslist').click(), 6000); </code></pre> <p>...but this seems to confuse it for some reason; it interrupts the process and 'jumps' to an item, then nothing further happens.</p> <p>Despite having a reasonable idea of what the code does, I've absolutely no idea how to re-factor it to do what I want! It seems hard-wired to generate its own .click methods - in fact, it is a very brilliant and compact piece of code.</p> <p>How do I refactor this to 'flip' the list every 5 seconds? </p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload