Make Simpleweather automatically change from one location to another
<p>I am trying to use the <a href="http://monkeecreate.github.com/jquery.simpleWeather/" rel="nofollow">simpleWeather Plugin</a>  to show the weather for multiple locations (8).  I  have all of the locations being called from one function and all of them are using the same div name.  When I refresh the page it either stays on the same location, or displays another one at random.  I have tried using different Jquery content sliders with zweatherfeed but had no success with that either.  </p>

<p>Here is the way I am calling the different locations with simpleweather:</p>

<pre><code>$(function() {
        $.simpleWeather({
            zipcode: 'USTX1200',
            unit: 'f',
            success: function(weather) {
                html = '&lt;img style="position:absolute;top: 1px;left:1px;" width="275px" src="'+weather.image+'"&gt;';
                html += '&lt;div class="head"&gt;'+weather.city+', '+weather.region+'&lt;/div&gt;&lt;div&gt;'+weather.temp+'&amp;deg;'+weather.units.temp+'&lt;br /&gt;&lt;span&gt;'+weather.currently+'&lt;br /&gt;Humidity: '+weather.humidity+'&lt;/span&gt;&lt;/div&gt;';

                $("#weather2").html(html);
            },
            error: function(error) {
                $("#weather2").html('&lt;p&gt;'+error+'&lt;/p&gt;');
            }
        });

                    $.simpleWeather({
            zipcode: 'USMS0053',
            unit: 'f',
            success: function(weather) {
                html = '&lt;img style="position:absolute;top: 1px;left:1px;" width="275px" src="'+weather.image+'"&gt;';
                html += '&lt;div class="head"&gt;'+weather.city+', '+weather.region+'&lt;/div&gt;&lt;div&gt;'+weather.temp+'&amp;deg;'+weather.units.temp+'&lt;br /&gt;&lt;span&gt;'+weather.currently+'&lt;br /&gt;Humidity: '+weather.humidity+'&lt;/span&gt;&lt;/div&gt;';

                $("#weather2").html(html);
            },
            error: function(error) {
                $("#weather2").html('&lt;p&gt;'+error+'&lt;/p&gt;');
            }
        });

                    $.simpleWeather({
            zipcode: 'USIN0234',
            unit: 'f',
            success: function(weather) {
                html = '&lt;img style="position:absolute;top: 1px;left:1px;" width="275px" src="'+weather.image+'"&gt;';
                html += '&lt;div class="head"&gt;'+weather.city+', '+weather.region+'&lt;/div&gt;&lt;div&gt;'+weather.temp+'&amp;deg;'+weather.units.temp+'&lt;br /&gt;&lt;span&gt;'+weather.currently+'&lt;br /&gt;Humidity: '+weather.humidity+'&lt;/span&gt;&lt;/div&gt;';

                $("#weather2").html(html);
            },
            error: function(error) {
                $("#weather2").html('&lt;p&gt;'+error+'&lt;/p&gt;');
            }
        });

                    $.simpleWeather({
            zipcode: 'MXCA0026',
            unit: 'f',
            success: function(weather) {
                html = '&lt;img style="position:absolute;top: 1px;left:1px;" width="275px" src="'+weather.image+'"&gt;';
                html += '&lt;div class="head"&gt;'+weather.city+', '+weather.country+'&lt;/div&gt;&lt;div&gt;'+weather.temp+'&amp;deg;'+weather.units.temp+'&lt;br /&gt;&lt;span&gt;'+weather.currently+'&lt;br /&gt;Humidity: '+weather.humidity+'&lt;/span&gt;&lt;/div&gt;';

                $("#weather2").html(html);
            },
            error: function(error) {
                $("#weather2").html('&lt;p&gt;'+error+'&lt;/p&gt;');
            }
        });

                    $.simpleWeather({
            zipcode: 'USNJ0086',
            unit: 'f',
            success: function(weather) {
                html = '&lt;img style="position:absolute;top: 1px;left:1px;" width="275px" src="'+weather.image+'"&gt;';
                html += '&lt;div class="head"&gt;'+weather.city+', '+weather.region+'&lt;/div&gt;&lt;div&gt;'+weather.temp+'&amp;deg;'+weather.units.temp+'&lt;br /&gt;&lt;span&gt;'+weather.currently+'&lt;br /&gt;Humidity: '+weather.humidity+'&lt;/span&gt;&lt;/div&gt;';

                $("#weather2").html(html);
            },
            error: function(error) {
                $("#weather2").html('&lt;p&gt;'+error+'&lt;/p&gt;');
            }
        });

                    $.simpleWeather({
            zipcode: 'USFL0479',
            unit: 'f',
            success: function(weather) {
                html = '&lt;img style="position:absolute;top: 1px;left:1px;" width="275px" src="'+weather.image+'"&gt;';
                html += '&lt;div class="head"&gt;'+weather.city+', '+weather.region+'&lt;/div&gt;&lt;div&gt;'+weather.temp+'&amp;deg;'+weather.units.temp+'&lt;br /&gt;&lt;span&gt;'+weather.currently+'&lt;br /&gt;Humidity: '+weather.humidity+'&lt;/span&gt;&lt;/div&gt;';

                $("#weather2").html(html);
            },
            error: function(error) {
                $("#weather2").html('&lt;p&gt;'+error+'&lt;/p&gt;');
            }
        });

                    $.simpleWeather({
            zipcode: 'USKY1090',
            unit: 'f',
            success: function(weather) {
                html = '&lt;img style="position:absolute;top: 1px;left:1px;" width="275px" src="'+weather.image+'"&gt;';
                html += '&lt;div class="head"&gt;'+weather.city+', '+weather.region+'&lt;/div&gt;&lt;div&gt;'+weather.temp+'&amp;deg;'+weather.units.temp+'&lt;br /&gt;&lt;span&gt;'+weather.currently+'&lt;br /&gt;Humidity: '+weather.humidity+'&lt;/span&gt;&lt;/div&gt;';

                $("#weather2").html(html);
            },
            error: function(error) {
                $("#weather2").html('&lt;p&gt;'+error+'&lt;/p&gt;');
            }
        });

                    $.simpleWeather({
            zipcode: 'USUT0226',
            unit: 'f',
            success: function(weather) {
                html = '&lt;img style="position:absolute;top: 1px;left:1px;" width="275px" src="'+weather.image+'"&gt;';
                html += '&lt;div class="head"&gt;'+weather.city+', '+weather.region+'&lt;/div&gt;&lt;div&gt;'+weather.temp+'&amp;deg;'+weather.units.temp+'&lt;br /&gt;&lt;span&gt;'+weather.currently+'&lt;br /&gt;Humidity: '+weather.humidity+'&lt;/span&gt;&lt;/div&gt;';

                $("#weather2").html(html);
            },
            error: function(error) {
                $("#weather2").html('&lt;p&gt;'+error+'&lt;/p&gt;');
            }
        });
    });
</code></pre>

<p>And here is how it is displaying on the page once it is loaded:</p>

<pre><code>&lt;div id="weather2"&gt;
&lt;img width="275" style="left: 1px; top: 1px; position: absolute;" src="http://l.yimg.com/a/i/us/nws/weather/gr/30d.png" /&gt;
&lt;div class="head"&gt;
Cherry Hill, NJ
&lt;/div&gt;
&lt;div&gt;
44°F&lt;br /&gt;&lt;span&gt;Partly Cloudy&lt;br /&gt;Humidity: 49&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>In the actual HTML you just set <code>&lt;div id="weather2"&gt;&lt;/div&gt;</code></p>

<p>And here is how it looks all together:
<img src="http://i.stack.imgur.com/UF2H9.png" alt="simpleWeather"></p>

<p>What I am wanting to do is either A:  Give the user no control and just have it switch from one location to another every X amount of seconds (which sounds like the easiest), or B:  Give them control and make it like a content slider with navigation buttons on the bottom.  I tried using setInterval() to have it reload the results every few seconds but could not get it to work either.  Any help would be greatly appreciated, thanks!  </p>

<p><strong>UPDATED</strong>:  Alright I got it almost working now I just need to figure out how to reset the timeouts.  Its not pretty but it works.</p>

<p>first I changed each weather div to assign a class for css styling and then each one has its own div.</p>

<pre><code>$(function() {
        $.simpleWeather({
            zipcode: 'USTX1200',
            unit: 'f',
            success: function(weather) {
                html = '&lt;img style="position:absolute;top: 1px;left:1px;" width="275px" src="'+weather.image+'"&gt;';
                html += '&lt;div class="head"&gt;'+weather.city+', '+weather.region+'&lt;/div&gt;&lt;div&gt;'+weather.temp+'&amp;deg;'+weather.units.temp+'&lt;br /&gt;&lt;span&gt;'+weather.currently+'&lt;br /&gt;Humidity: '+weather.humidity+'&lt;/span&gt;&lt;/div&gt;';

                $("#weather").html(html).addClass('weather').show();
            },
            error: function(error) {
                $("#weather").html('&lt;p&gt;'+error+'&lt;/p&gt;');
            }
        });
    });

$(function() {
        $.simpleWeather({
            zipcode: 'USMS0053',
            unit: 'f',
            success: function(weather) {
                html = '&lt;img style="position:absolute;top: 1px;left:1px;" width="275px" src="'+weather.image+'"&gt;';
                html += '&lt;div class="head"&gt;'+weather.city+', '+weather.region+'&lt;/div&gt;&lt;div&gt;'+weather.temp+'&amp;deg;'+weather.units.temp+'&lt;br /&gt;&lt;span&gt;'+weather.currently+'&lt;br /&gt;Humidity: '+weather.humidity+'&lt;/span&gt;&lt;/div&gt;';

                $("#weather2").html(html).addClass('weather').hide();
            },
            error: function(error) {
                $("#weather2").html('&lt;p&gt;'+error+'&lt;/p&gt;');
            }
        });
    });

$(function() {
        $.simpleWeather({
            zipcode: 'USIN0234',
            unit: 'f',
            success: function(weather) {
                html = '&lt;img style="position:absolute;top: 1px;left:1px;" width="275px" src="'+weather.image+'"&gt;';
                html += '&lt;div class="head"&gt;'+weather.city+', '+weather.region+'&lt;/div&gt;&lt;div&gt;'+weather.temp+'&amp;deg;'+weather.units.temp+'&lt;br /&gt;&lt;span&gt;'+weather.currently+'&lt;br /&gt;Humidity: '+weather.humidity+'&lt;/span&gt;&lt;/div&gt;';

                $("#weather3").html(html).addClass('weather').hide();
            },
            error: function(error) {
                $("#weather3").html('&lt;p&gt;'+error+'&lt;/p&gt;');
            }
        });
    });

$(function() {
        $.simpleWeather({
            zipcode: 'MXCA0026',
            unit: 'f',
            success: function(weather) {
                html = '&lt;img style="position:absolute;top: 1px;left:1px;" width="275px" src="'+weather.image+'"&gt;';
                html += '&lt;div class="head"&gt;'+weather.city+', '+weather.region+'&lt;/div&gt;&lt;div&gt;'+weather.temp+'&amp;deg;'+weather.units.temp+'&lt;br /&gt;&lt;span&gt;'+weather.currently+'&lt;br /&gt;Humidity: '+weather.humidity+'&lt;/span&gt;&lt;/div&gt;';

                $("#weather4").html(html).addClass('weather').hide();
            },
            error: function(error) {
                $("#weather4").html('&lt;p&gt;'+error+'&lt;/p&gt;');
            }
        });
    });

$(function() {
        $.simpleWeather({
            zipcode: 'USNJ0086',
            unit: 'f',
            success: function(weather) {
                html = '&lt;img style="position:absolute;top: 1px;left:1px;" width="275px" src="'+weather.image+'"&gt;';
                html += '&lt;div class="head"&gt;'+weather.city+', '+weather.region+'&lt;/div&gt;&lt;div&gt;'+weather.temp+'&amp;deg;'+weather.units.temp+'&lt;br /&gt;&lt;span&gt;'+weather.currently+'&lt;br /&gt;Humidity: '+weather.humidity+'&lt;/span&gt;&lt;/div&gt;';

                $("#weather5").html(html).addClass('weather').hide();
            },
            error: function(error) {
                $("#weather5").html('&lt;p&gt;'+error+'&lt;/p&gt;');
            }
        });
    });

$(function() {
        $.simpleWeather({
            zipcode: 'USFL0479',
            unit: 'f',
            success: function(weather) {
                html = '&lt;img style="position:absolute;top: 1px;left:1px;" width="275px" src="'+weather.image+'"&gt;';
                html += '&lt;div class="head"&gt;'+weather.city+', '+weather.region+'&lt;/div&gt;&lt;div&gt;'+weather.temp+'&amp;deg;'+weather.units.temp+'&lt;br /&gt;&lt;span&gt;'+weather.currently+'&lt;br /&gt;Humidity: '+weather.humidity+'&lt;/span&gt;&lt;/div&gt;';

                $("#weather6").html(html).addClass('weather').hide();
            },
            error: function(error) {
                $("#weather6").html('&lt;p&gt;'+error+'&lt;/p&gt;');
            }
        });
    });

$(function() {
        $.simpleWeather({
            zipcode: 'USKY1090',
            unit: 'f',
            success: function(weather) {
                html = '&lt;img style="position:absolute;top: 1px;left:1px;" width="275px" src="'+weather.image+'"&gt;';
                html += '&lt;div class="head"&gt;'+weather.city+', '+weather.region+'&lt;/div&gt;&lt;div&gt;'+weather.temp+'&amp;deg;'+weather.units.temp+'&lt;br /&gt;&lt;span&gt;'+weather.currently+'&lt;br /&gt;Humidity: '+weather.humidity+'&lt;/span&gt;&lt;/div&gt;';

                $("#weather7").html(html).addClass('weather').hide();
            },
            error: function(error) {
                $("#weather7").html('&lt;p&gt;'+error+'&lt;/p&gt;');
            }
        });
    });

$(function() {
        $.simpleWeather({
            zipcode: 'USUT0226',
            unit: 'f',
            success: function(weather) {
                html = '&lt;img style="position:absolute;top: 1px;left:1px;" width="275px" src="'+weather.image+'"&gt;';
                html += '&lt;div class="head"&gt;'+weather.city+', '+weather.region+'&lt;/div&gt;&lt;div&gt;'+weather.temp+'&amp;deg;'+weather.units.temp+'&lt;br /&gt;&lt;span&gt;'+weather.currently+'&lt;br /&gt;Humidity: '+weather.humidity+'&lt;/span&gt;&lt;/div&gt;';

                $("#weather8").html(html).addClass('weather').hide();
            },
            error: function(error) {
                $("#weather8").html('&lt;p&gt;'+error+'&lt;/p&gt;');
            }
        });
    });
</code></pre>

<p>Then I am using setTimeout and having it cycle through each div and either showing them or hiding them.</p>

<pre><code>$(function() {
setTimeout(function() {$("#weather").hide()}, 5000);
setTimeout(function time2() {$("#weather2").show()}, 5000);
setTimeout(function time3() {$("#weather2").hide()}, 10000);
setTimeout(function time4() {$("#weather3").show()}, 10000);
setTimeout(function time5() {$("#weather3").hide()}, 15000);
setTimeout(function time6() {$("#weather4").show()}, 15000);
setTimeout(function time7() {$("#weather4").hide()}, 20000);
setTimeout(function time8() {$("#weather5").show()}, 20000);
setTimeout(function time9() {$("#weather5").hide()}, 25000);
setTimeout(function time10() {$("#weather6").show()}, 25000);
setTimeout(function time11() {$("#weather6").hide()}, 30000);
setTimeout(function time12() {$("#weather7").show()}, 30000);
setTimeout(function time13() {$("#weather7").hide()}, 35000);
setTimeout(function time14() {$("#weather8").show()}, 35000);
setTimeout(function time15() {$("#weather8").hide()}, 40000);
setTimeout(function time16() {$("#weather").show()}, 40000);
});
</code></pre>

<p>So if I can figure out how to have them reset, or just loop through then thats all I am really needing it to do.</p>
