Cycle through remote javascripts to create multiple weather feeder

Question

Hi guys,

I'm using a weather feed to show weather on a page. I want to cycle through 2 or more weather locations at, say, 5 second intervals.

I thought I could adapt something like this http://stackoverflow.com/questions/84163/how-can-i-cycle-through-pages but haven't had any luck.

The source code is as follows for 3 feeds that I would like to continually cycle through at interval:

<script type="text/javascript" src="http://www.weatherzone.com.au/woys/graphic_current.jsp?postcode=3000"&gt;&lt;/script&gt;

<script type="text/javascript" src="http://www.weatherzone.com.au/woys/graphic_current.jsp?postcode=3690"&gt;&lt;/script&gt;

<script type="text/javascript" src="http://www.weatherzone.com.au/woys/graphic_current.jsp?postcode=2000"&gt;&lt;/script&gt;

Thanks in advance.

Answer 1

Since those widgets use document.write(), i would just output all three to the page initially, in an unordered list maybe, and just cycle through showing and hiding them.

So, using markup like this:

<ul id="cycle">
    <li><script type="text/javascript" src="http://www.weatherzone.com.au/woys/graphic_current.jsp?postcode=3000"&gt;&lt;/script&gt;&lt;/li&gt;
    <li><script type="text/javascript" src="http://www.weatherzone.com.au/woys/graphic_current.jsp?postcode=3690"&gt;&lt;/script&gt;&lt;/li&gt;
    <li><script type="text/javascript" src="http://www.weatherzone.com.au/woys/graphic_current.jsp?postcode=2000"&gt;&lt;/script&gt;&lt;/li&gt;
</ul>

You could use jQuery to do something like this:

jQuery(function($) {

    var items = $('#cycle li'), // elements to be cycled through
        interval = 2000,        // time between cycles
        i = 0;

    // hides all the elements, except the first one
    items.not(":first").each(function () {$(this).hide()})

    // show, hide elements every "interval" milliseconds
    window.setInterval(function() {
        $(items[ (i==0) ? (items.length - i) - 1 : i - 1 ]).hide()
        $(items[i++]).show();
        if (!items[i]) i = 0;
    }, interval);

});

Answer 2

Nice work Chris. Worked an absolute treat.