Random Weather Locations?

Report · Jan 23, 2017

Does anyone know if there is a way to offer a weather widget for a website, which would randomly change the city location each time entering
the site or refreshing the page?

We have six locations, and so we do not favor one location, I would like too randomly display the weather for one of our locations on the index page.

I have achieved what I wanted by creating an index page that has a script which randomly loads one of six pages with each page having the weather widget for that location.

Here is the script,

var howMany = 5; //
max number of items listed below

var page = new Array(howMany+1);

page[0]="index1.html";

page[1]="index2.html";

page[2]="index3.html";

page[3]="index4.html";

page[4]="index5.html";

page[5]="index6.html";

function rndnumber(){

var randscript = -1;

while (randscript < 0 || randscript > howMany ||
isNaN(randscript)){

randscript = parseInt(Math.random()*(howMany+1));

}

return randscript;

}

quo = rndnumber();

quox = page[quo];

window.location=(quox);

</script>

I am currently using the following from Accuweather for the weather widget. I believe this is old but still working. You can change the season image, "winter2" to spring1 or 2, summer1 or 2 or fall1 for different backgrounds.

</script>

</div>

This works great but the problem is that if I need to make a change to one of the index pages I have to do that times six to keep things consistant.

Any suggestions?

Report · Jan 23, 2017

Why have a random weather report, when you can do it by determining the users current location using the geolocation api?

The user must agree to their location being used, which most will do, then the user will have an accurate weather report -

https://gist.github.com/marchawkins/9562045

Report · Jan 23, 2017

That is not what I am trying accomplish. We want the weather for our office location to show up on the page not the viewer’s location.

Report · Jan 23, 2017

It sounds like the only thing you want to be different is the weather info, the rest of the page is the same between all 6?

If that's the case, wouldn't it be easier to get the 6 different widget codes for all of the locations and have that code randomly placed on a single page (either with php, or I suppose, an iFrame source)?

Looking at the accuweather site, it appears you can choose a "fixed location" and get the code for each. Then randomize which code snippet is added to a single page, rather than having 6 pages to keep updating.

Report · Jan 23, 2017

Correct, all the page information is the same only the weather is different and I am using the fixed location option.

I’ll look into your suggestion of getting the 6 different widget codes for all of the locations and have that code randomly
placed on a single page (either with php, or I suppose, an iFrame source)?

However, I know nothing about php or iFrame for that matter.

Report · Jan 23, 2017

Ah, it's simple enough with javascript too. I just whipped this one up using the accuweather widget code here: Free Current Weather Widget - AccuWeather.com it takes a little monkeying around with double vs single quotes, but it works...

You keep this code in an external .js file called random_weather.js...

var Weather=new Array()

Weather[0] = "<a href='http://www.accuweather.com/en/us/san-francisco-ca/94103/weather-forecast/347629' class='aw-widget-legal'></a><div id='awcc1485198739185' class='aw-widget-current' data-locationkey='347629' data-unit='f' data-language='en-us' data-useip='false' data-uid='awcc1485198739185'></div><script type='text/javascript' src='http://oap.accuweather.com/launch.js'></script>";

Weather[1] = "<a href='http://www.accuweather.com/en/us/el-paso-tx/79901/weather-forecast/351195' class='aw-widget-legal'></a><div id='awcc1485198835173' class='aw-widget-current' data-locationkey='351195' data-unit='f' data-language='en-us' data-useip='false' data-uid='awcc1485198835173'></div><script type='text/javascript' src='http://oap.accuweather.com/launch.js'></script>";

Weather[2] = "<a href='http://www.accuweather.com/en/us/new-york-ny/10007/weather-forecast/349727' class='aw-widget-legal'></a><div id='awcc1485198855518' class='aw-widget-current' data-locationkey='349727' data-unit='f' data-language='en-us' data-useip='false' data-uid='awcc1485198855518'></div><script type='text/javascript' src='http://oap.accuweather.com/launch.js'></script>";

Weather[3] = "<a href='http://www.accuweather.com/en/us/minneapolis-mn/55415/weather-forecast/348794' class='aw-widget-legal'></a><div id='awcc1485198871501' class='aw-widget-current' data-locationkey='348794' data-unit='f' data-language='en-us' data-useip='false' data-uid='awcc1485198871501'></div><script type='text/javascript' src='http://oap.accuweather.com/launch.js'></script>";

var Q = Weather.length;

var whichWeather=Math.round(Math.random()*(Q-1));

function showWeather(){document.write(Weather[whichWeather]);}

showWeather();

Then call it from your single homepage by adding the following where you want it to appear...

<!--

By accessing and/or using this code snippet, you agree to AccuWeather’s terms and conditions (in English) which can be found at http://www.accuweather.com/en/free-weather-widgets/terms and AccuWeather’s Privacy Statement (in English) which can be found at http://www.accuweather.com/en/privacy.

-->