Last active
March 29, 2016 15:18
-
-
Save DavidSouther/974272462e0b68d298bd to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>NOAA GOES NA Recent</title> | |
| <style> | |
| body { | |
| margin: 0; | |
| } | |
| .container { | |
| width: 720px; | |
| margin: 0 auto; | |
| padding-top: 32px; | |
| } | |
| span.animate { | |
| float: right; | |
| } | |
| img { | |
| display: none; | |
| width: 720px; | |
| } | |
| div[pictures] { | |
| position: relative; | |
| } | |
| div[pictures] img { | |
| position: absolute; | |
| top: 0; | |
| } | |
| </style> | |
| <style id="selected"></style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="controls"> | |
| <span class="image"> | |
| <a href="#" onClick="select('rb')">Rainbow IR</a> | |
| <a href="#" onClick="select('wv')">Water Vapor</a> | |
| <a href="#" onClick="select('radar')">Radar</a> | |
| </span> | |
| <span class="animate"> | |
| <a href="#" onClick="toggleAnimated()">Animate</a> | |
| </span> | |
| </div> | |
| <div pictures> | |
| <img wv src="http://www.ssd.noaa.gov/goes/comp/nhem/wv.jpg" /><br /> | |
| <img rb src="http://www.ssd.noaa.gov/goes/comp/nhem/rb.jpg" /><br /> | |
| <img radar src="http://radar.weather.gov/Conus/RadarImg/latest_Small.gif" /><br /> | |
| <img wvanimated src="http://www.ssd.noaa.gov/goes/comp/nhem/wv-animated.gif" /><br /> | |
| <img rbanimated src="http://www.ssd.noaa.gov/goes/comp/nhem/rb-animated.gif" /><br /> | |
| <img radaranimated src="http://radar.weather.gov/Conus/Loop/NatLoop_Small.gif" /><br /> | |
| </div> | |
| </div> | |
| </body> | |
| <script> | |
| let selected = "wv"; | |
| function select(type) { | |
| selected = type; | |
| update(); | |
| } | |
| let animated = false; | |
| function toggleAnimated() { | |
| animated = !animated; | |
| update(); | |
| } | |
| const stylesheet = document.getElementById('selected'); | |
| function update() { | |
| stylesheet.innerText = `img[${selected}${animated ? 'animated' : ''}] { display: block; }`; | |
| } | |
| update(); | |
| function reload() { | |
| document.getElementsByTagName('img').forEach((_) => { | |
| _.src = _.src; | |
| }); | |
| } | |
| // NOAA updates every 15 minutes or so. | |
| setInterval(reload, 1000 * 60 * 15); | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment