HTML and CSS Reference
In-Depth Information
Hiding elements
Our markup has content, which we want to show only when a user clicks. In our web-
site, we want a Google Map to show, when the user clicks on the Getting Here link.
It is very simple to do so by using an iframe , as shown in the following code snip-
pet:
<iframe 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>
But this means, as soon as your page loads in a browser, the browser will attempt
to show the map immediately and fetch assets from Google Maps. But we only want
this map to show when the user clicks on the Getting Here link. HTML5 Boilerplate
provides a class name that you can use for such purposes. We will apply a class
called hidden to make sure these elements do not render until they are explicitly
made to display. The hidden class is used in the following code snippet:
<iframe class="hidden" width="425" height="350"
frameborder="0" scrolling="no" marginheight="0"
marginwidth="0" src="http://maps.google.com/
Search WWH ::




Custom Search