Skip to content

Instantly share code, notes, and snippets.

@dblooman

dblooman/test.html

Created March 14, 2014 15:52
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save dblooman/9550497 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save dblooman/9550497 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
test.html
<div id="local-weather" class="container-local local-weather">
<h2>
<a id="local-weather-title" href="/weather">
Weather </a>
</h2>
<h3 class="local-weather-current-location">London</h3>
<div class="weather-dropdown" class="container-local local-weather">
<ul class="local-weather-loc-id">
<li class="first selected" data-location="2643743">
<a href="/weather/2643743">London</a>
</li>
<li data-location="2655774">
<a href="/weather/2655774">Bexleyheath</a>
</li>
<li data-location="2654588">
<a href="/weather/2654588">Bromley</a>
</li>
<li data-location="2651817">
<a href="/weather/2651817">Croydon</a>
</li>
<li data-location="2649997">
<a href="/weather/2649997">Enfield</a>
</li>
<li data-location="2647425">
<a href="/weather/2647425">Harrow</a>
</li>
<li data-location="2639192">
<a href="/weather/2639192">Romford</a>
</li>
<li data-location="2635308">
<a href="/weather/2635308">Twickenham</a>
</li>
</ul>
</div>
<div class="tabbed">
<ul>
<li class="tab open"><a href="#local-weather-3day">3-Day Forecast</a></li>
<li class="tab closed"><a href="#weather-video">Video Forecast</a></li>
</ul>
<div class="panel weather-forecast open">
<div id="local-weather-3day" class="next3daysweather">
<div class="local-weather-daily">
<div class="timeslot">
<strong class="timeslot-time">Wed</strong>
<div class="forecast weather-type-12" role="img" aria-labelledby="label-0" title="Light Rain">
<span class="hidden" id="label-0">Light Rain</span>
<span class="glyph cloud-black">&#xF403;</span>
<span class="glyph raindrop-blue">&#xF406;</span>
</div>
<div class="timeslot-temperatures">
<strong class="timeslot-temperature timeslot-max-temperature">
Min. Night </strong>
<span class="timeslot-temperature timeslot-min-temperature">
<span class="temperature temperature-4-6">
5 <abbr title="Degrees celsius">&deg;C</abbr>
</span>
</span>
</div>
</div>
<div class="timeslot">
<strong class="timeslot-time">Thu</strong>
<div class="forecast weather-type-3" role="img" aria-labelledby="label-1" title="Sunny Intervals">
<span class="hidden" id="label-1">Sunny Intervals</span>
<span class="glyph cloud-grey">&#xF402;</span>
<span class="glyph sunshine-yellow">&#xF404;</span>
</div>
<div class="timeslot-temperatures">
<strong class="timeslot-temperature timeslot-max-temperature">
<span class="temperature temperature-10-12">
10 <abbr title="Degrees celsius">&deg;C</abbr>
</span>
</strong>
<span class="timeslot-temperature timeslot-min-temperature">
<span class="temperature temperature-4-6">
4 <abbr title="Degrees celsius">&deg;C</abbr>
</span>
</span>
</div>
</div>
<div class="timeslot">
<strong class="timeslot-time">Fri</strong>
<div class="forecast weather-type-3" role="img" aria-labelledby="label-2" title="Sunny Intervals">
<span class="hidden" id="label-2">Sunny Intervals</span>
<span class="glyph cloud-grey">&#xF402;</span>
<span class="glyph sunshine-yellow">&#xF404;</span>
</div>
<div class="timeslot-temperatures">
<strong class="timeslot-temperature timeslot-max-temperature">
<span class="temperature temperature-7-9">
9 <abbr title="Degrees celsius">&deg;C</abbr>
</span>
</strong>
<span class="timeslot-temperature timeslot-min-temperature">
<span class="temperature temperature-4-6">
5 <abbr title="Degrees celsius">&deg;C</abbr>
</span>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="panel weather-video" id="weather-video">
<div id="emp_/forecast-video/21416747A/playlist.sxml" class="emp">
<object type="application/x-shockwave-flash"
id="bbc_emp_embed_emp_/forecast-video/21416747A/playlist.sxml"
data="http://emp.bbci.co.uk/emp/releases/worldwide/revisions/749603_749269_749444_6/749603_749269_749444_6_emp.swf"
src="http://emp.bbci.co.uk/emp/releases/worldwide/revisions/749603_749269_749444_6/749603_749269_749444_6_emp.swf"
width="256" height="144"
style="visibility: visible;">
<param name="movie" value="http://emp.bbci.co.uk/emp/releases/worldwide/revisions/749603_749269_749444_6/749603_749269_749444_6_emp.swf" />
<param name="holding" value="http://newsimg.bbc.co.uk/weather/img/general/v80_2/video_holding.jpg" />
<param name="playlist" value="http://playlists.bbc.co.uk/weather//forecast-video/21416747A/playlist.sxml/playlist.sxml" />
<param name="quality" value="high">
<param name="wmode" value="default">
<param name="allowFullScreen" value="true">
<param name="allowScriptAccess" value="always">
<param name="flashvars" value="embedReferer=&embedPageUrl=http%3A%2F%2Fwww.bbc.co.uk%2Fnews%2Fengland%2Flancashire%2F&uxHighlightColour=0xff0000&enable3G=true&playlist=http://playlists.bbc.co.uk/weather%2Fforecast-video%2F21416747A%2Fplaylist.sxml&config=http%3A%2F%2Fwww.bbc.co.uk%2Fplayer%2Femp%2F2_0_55%2Fconfig%2Fdefault.xml&fmtjDocURI=undefined&config_settings_showShareButton=true&config_settings_autoPlay=false&config_plugin_fmtjLiveStats_pageType=eav1&config_plugin_fmtjLiveStats_edition=Domestic&domId=emp_/forecast-video/21416747A/playlist.sxml&mediatorHref=http%3A%2F%2Fopen.live.bbc.co.uk%2Fmediaselector%2F5%2Fselect%2Fversion%2F2.0%2Fmediaset%2Fjournalism-pc%2Fvpid%2F%7Bid%7D">
</object>
</div>
</div>
</div>
<p class="local-weather-links">
<a class="local-weather-more-detail" href="/weather/2643743">
<span class="lwl-location">London:</span>
<span class="lwl-length">5-day forecast</span>
</a>
</p>
</div>
<!-- Debugging -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
(function() {
function requestWeather(id) {
$.ajax({
url: '/nfp/weather/' + id + '/daily.inc',
/* dataType: 'jsonp', */
cache: true
}).done(function(weather) {
renderWeather(id, weather);
});
}
function renderWeather(id, weatherMarkup) {
$('.local-weather-daily').html(weatherMarkup);
var $link = $('.weather-location-name').find('a');
$('.local-weather-more-detail')
.attr('href', $link.attr('href'))
.find('.lwl-location').html($link.html() + ":");
}
function changeSelectedClass(selected) {
$('.weather-dropdown li').removeClass('selected');
$(selected).addClass('selected');
}
function clickableWeatherBlock() {
}
function init() {
$('.weather-dropdown').on('click', 'li', function(event) {
var dropdown = $('.weather-dropdown ul');
if (dropdown.hasClass('open')) {
dropdown.addClass('closed');
dropdown.removeClass('open');
} else {
dropdown.addClass('open');
dropdown.removeClass('closed');
}
changeSelectedClass(this);
requestWeather($(this).attr('data-location'));
event.preventDefault();
});
if ($('.local-weather-loc-id').children().length > 1) {
clickableWeatherBlock();
} else {
$('.local-weather-current-location').css({display: "block"});
$('.weather-dropdown').hide();
}
}
init();
})();
</script>
<style type="text/css" media="screen">
.local-weather-daily .weather-location-name, .local-weather-daily .weather-more { display: none; }
#local-weather {
margin-bottom: 20px;
}
#local-weather .tabbed ul {
display: none;
}
.blq-js #local-weather .tabbed ul {
display: block;
}
.weather-dropdown { display: none; }
.blq-js .weather-dropdown { display: block; }
.weather-dropdown ul.open {
height: auto;
}
.weather-dropdown ul.closed {
height: 0;
}
.blq-js #local-weather-3day {
cursor: pointer;
}
.next3daysweather {
overflow: hidden;
padding: 10px 0;
}
/* Similar to .local-travel-box h3 */
.local-weather-current-location {
font-weight: bold;
font-size: 15px;
padding-bottom: 10px;
line-height: 16px;
}
.blq-js .local-weather-current-location {
display: none;
}
.timeslot {
width: 83px;
float: left;
margin-right: 8px;
padding-left: 8px;
text-align: center;
}
.timeslot + .timeslot {
border-left: 1px solid #EDEDED;
}
/* Hide @font-face glyphs */
.timeslot .glyph {
display: none;
}
.timeslot-time {
display: block;
margin-bottom: 4px;
}
.timeslot-temperatures {
font-size: 14px;
}
.timeslot-temperatures abbr,
.timeslot-temperatures span {
line-height: 16px;
}
.timeslot-temperature {
display: block;
}
.timeslot .forecast {
display: block;
width: 56px;
padding-top: 50px;
margin: 0 auto 4px;
height: 0;
overflow: hidden;
text-indent: -999em;
background: url('http://static.bbci.co.uk/weather/0.5.148/images/icons/weather_types/56_en.png') no-repeat;
}
.timeslot .weather-type-0 { background-position: 0 -200px; }
.timeslot .weather-type-1 { background-position: -100px -200px; }
.timeslot .weather-type-2 { background-position: -200px -200px; }
.timeslot .weather-type-3 { background-position: -300px -200px; }
.timeslot .weather-type-4 { background-position: -400px -200px; }
.timeslot .weather-type-5 { background-position: -500px -200px; }
.timeslot .weather-type-6 { background-position: -600px -200px; }
.timeslot .weather-type-7 { background-position: -700px -200px; }
.timeslot .weather-type-8 { background-position: -800px -200px; }
.timeslot .weather-type-9 { background-position: -900px -200px; }
.timeslot .weather-type-10 { background-position: -1000px -200px; }
.timeslot .weather-type-11 { background-position: -1100px -200px; }
.timeslot .weather-type-12 { background-position: -1200px -200px; }
.timeslot .weather-type-13 { background-position: -1300px -200px; }
.timeslot .weather-type-14 { background-position: -1400px -200px; }
.timeslot .weather-type-15 { background-position: -1500px -200px; }
.timeslot .weather-type-16 { background-position: -1600px -200px; }
.timeslot .weather-type-17 { background-position: -1700px -200px; }
.timeslot .weather-type-18 { background-position: -1800px -200px; }
.timeslot .weather-type-19 { background-position: -1900px -200px; }
.timeslot .weather-type-20 { background-position: -2000px -200px; }
.timeslot .weather-type-21 { background-position: -2100px -200px; }
.timeslot .weather-type-22 { background-position: -2200px -200px; }
.timeslot .weather-type-23 { background-position: -2300px -200px; }
.timeslot .weather-type-24 { background-position: -2400px -200px; }
.timeslot .weather-type-25 { background-position: -2500px -200px; }
.timeslot .weather-type-26 { background-position: -2600px -200px; }
.timeslot .weather-type-27 { background-position: -2700px -200px; }
.timeslot .weather-type-28 { background-position: -2800px -200px; }
.timeslot .weather-type-29 { background-position: -2900px -200px; }
.timeslot .weather-type-30 { background-position: -3000px -200px; }
.timeslot .weather-type-31 { background-position: -3100px -200px; }
.timeslot .weather-type-32 { background-position: -3200px -200px; }
.timeslot .weather-type-na { background-position: -3300px -200px; }
/*
.local-weather-links {}
.local-weather-links a {}
*/
.lwl-location {
color: #1f4f82;
}
.lwl-length {
color: #1f4f82;
font-weight: normal;
}
.local-weather-more-detail-hover {
text-decoration: underline;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment