Twitter: raymondcamden


Address: Lafayette, LA, USA

Dynamically loading a style sheet based on weather conditions

11-12-2012 5,455 views JavaScript, HTML5 9 Comments

I know what you're thinking - thank God Ray is blogging about this topic. I can't tell you the number of times clients have asked for a dynamic web site design based on the user's current weather conditions. Well, today's your lucky day! (Ok, all snark aside - I saw this asked on StackOverflow and thought it would be fun to build.)

In general, the process is relatively simple:

  • Get the user's location (simple!)
  • Get the weather (mostly simple, depending on the API)
  • Load a dynamic style sheet (simple!)

Of course, actually designing a style sheet that adequately conveys a particular weather condition is way beyond my stylistic chops. So if you pretend for a moment that I could actually design worth a damn, then hopefully the rest of the technical bits will be interesting. Ok, let's do it.

Following the order of operations above, I began with a simple geolocation check/call.

Hopefully none of this is too new to my readers. Due to the nature of this "feature", I don't have to worry about fallback of any sort. Users without geolocation support won't get an error nor will the site "break", they just won't get the super fancy cool color scheme that matches their weather.

The second part involves getting the weather. I decided to use Weather Underground's API for this. Yahoo has a nice API as well, but doesn't support longitute/latitude weather lookups. (They do have a service to do this lookup for you, but I wanted a simpler API.) Weather Underground doesn't support CORS, but does support JSON/P. I'm not using jQuery for this, but the code to do a JSON/P call is incredibly trivial.

Ok, now for the fun part. The Weather Underground API returns a lot of data. All I care about is a key called "weather" that contains a general description. Examples: Mostly Cloudy, Partly Cloudy, Overcast. Unfortunately, they don't bother to actually fraking document the unique values here. I decided to take a tour around the world to find various examples and apparently the entire world now is covered in cloud, much like in Star Trek 4. (Yes, the one with the whales.)

So for now, I took a few simple values, a few guesses, and just rolled with it. I figured it would make sense to condense some conditions into each other so I built it up as a simple Switch block.

The final part was rather simple. To load a dynamic style sheet into the browser you follow much the same pattern for doing JSON/P - simply create a new DOM item and inject it.

Notice how each type of weather will match to a "something.css" in my css folder. To keep things simple, I added styles to the H1 and P tags. Here's cloudy.css:

Note the use of the after pseudo-class. I use this to inject the actual weather description (or a similar one) after the h1 tag. Here's an example based on my current location:

And since I have separate function, I was able to go into console and force it to the rainy version.

All in all, pretty simple. You can view the complete demo here: http://www.raymondcamden.com/demos/2012/nov/12/

I liked that - but - something nagged at me. Every time you load the page the code checks your location and gets the weather. Surely we could cache that, right? I built up a second version that makes use of sessionStorage. I update the setup code first:

And then stored the weatherType variable in the user's session:

You can view this version here: http://www.raymondcamden.com/demos/2012/nov/12/index2.html

9 Comments

  • Topper Harley #
    Commented on 11-12-2012 at 11:23 AM
    The ColdFusion community is now complete, thanks to this lame blog post.
  • Commented on 11-12-2012 at 11:27 AM
    Topper! I missed you! My sweet little troll. For folks who don't know, Topper is the ass-face who, once or twice a year, posts something without using a real name or email address and doesn't bother responding again.
  • Chris Bowyer #
    Commented on 11-12-2012 at 11:28 AM
    Doesn't work in correctly in Australia. It says Good Day! Expected behaviour was G'Day!
  • Commented on 11-12-2012 at 11:32 AM
    Funny you mentioned that. When I tried to funny 'sunny' weather, I checked Melbourne and Brisbane. Both were a form of cloudy.
  • Topper Harley #
    Commented on 11-12-2012 at 11:40 AM
    I am an shameless, low-life douche bag who enjoys undressing Ken dolls and fantasizing that they were anatomically correct.
  • Mikel #
    Commented on 11-12-2012 at 12:04 PM
    Cool post Ray! Thanks for your continued hard work and for sharing all these great examples!
  • RobWala #
    Commented on 11-12-2012 at 4:40 PM
    Hey Ray - interesting concept :)
    Testing from Wisconsin, afraid you need a new weather type!
    I got this message in the console:
    Light Snow weathertype is undefined
  • Commented on 11-12-2012 at 4:48 PM
    RobWala - thanks, glad you liked it. Just in case it wasn't clear - I definitely know that the switch statement was bare bones. Hopefully you see how/where you would add "snow" support (I'd imagine Light Snow would combine with a few other snow-related ones.) I'd use white text, because, well, what could go wrong with that. ;)
  • Commented on 11-12-2012 at 6:40 PM
    Surely CSS3 has a media query for this

    @media screen and (weather: sunny) {

    :P

Post Reply

Please refrain from posting large blocks of code as a comment. Use Pastebin or Gists instead. Text wrapped in asterisks (*) will be bold and text wrapped in underscores (_) will be italicized.

Leave this field empty