HTML and CSS Reference
In-Depth Information
Bingo! We have our day-by-day line up ready. We now need to ensure our Google
Maps iframe renders when users click on the Locate on a map link. We also want
to use the same link to hide the map if the users want to do so.
First, we add some identifiable features to the anchor element used to trigger the
showing/hiding of map and the iframe for the maps, as shown in the following code
snippet:
<p>The festival will be held on the beautiful
beaches of NgorTerrou Bi in Dakar.
<ahref="#" class="js-map-link">Locate it on a
map</a>
</p>
<iframe id="venue-map" class="hidden"
width="425"
height="350" frameborder="0" scrolling="no"
marginheight="0" marginwidth="0"
src="http://maps.google.com/
maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=ngor+terrou+bi,+dakar,+senegal&amp;aq=&amp;sll=37.0625,-95.677068&amp;sspn=90.404249,95.976562&amp;ie=UTF8&amp;hq=ngor&amp;hnear=Terrou-Bi,+Bd+Martin+Luther+King,+Gueule+Tapee,+Dakar+Region,+Guediawaye,+Dakar+221,+Senegal&amp;t=m&amp;fll=14.751996,-17.513559&amp;fspn=0.014276,0.011716&amp;st=109146043351405611748&amp;rq=1&amp;ev=p&amp;split=1&amp;ll=14.711109,-17.483921&amp;spn=0.014276,0.011716&amp;output=embed">
</iframe>
Then we use the following JavaScript to trigger the link:
$maplink = $('.js-map-link');
$maplinkText = $maplink.text();
$maplink.toggle(function() {
$('#venue-map').removeClass(hiddenClass);
$maplink.text('Hide Map');
}, function() {
$('#venue-map').addClass(hiddenClass);
$maplink.text($maplinkText);
});
Now, let us look at how we can make our audio player work on all browsers.
Search WWH ::




Custom Search