22nd February 2019
Add this HTML for the buttons:
(Download HTML here)
Add this javascript for the button popup function:
function newPopup(url) {
popupWindow = window.open(
url,'popUpWindow','height=450,width=600,left=100,top=100,resizable=no,scrollbars=no,toolbar=no,menubar=no,location=no,directories=no,status=yes')
}
4th October 2017
For use on decorative elements – this is so accessibility is not spoiled by non-important content elements.
div class="foo" aria-hidden="true" role="presentation">
This …aria-hidden=”true” role=”presentation”… is important.
13th June 2017
9th March 2016
7th May 2015
6th March 2015
All of the icons/tiles you will need – if you want to save some time, use this awesome generator here – iconogen.com
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
<meta name="msapplication-square70x70logo" content="/smalltile.png" />
<meta name="msapplication-square150x150logo" content="/mediumtile.png" />
<meta name="msapplication-wide310x150logo" content="/widetile.png" />
<meta name="msapplication-square310x310logo" content="/largetile.png" />
26th February 2015
Original article
Solved this putting a div with an .overlay exactly before each Google map iframe insertion. The div will cover the map, preventing pointer events from getting to it. But if you click on the div, it becomes transparent to pointer events, activating the map again!
The markup
<html>
<div class="overlay" onClick="style.pointerEvents='none'"></div>
<iframe src="https://mapsengine.google.com/map/embed?mid=some_map_id" width="640" height="480"></iframe>
</html>
The CSS
.overlay {
background:transparent;
position:relative;
width:640px;
height:480px; /* your iframe height */
top:480px; /* your iframe height */
margin-top:-480px; /* your iframe height */
}
Update:
There is a jQuery solution for this if you do not embed the map via iFrame.
$(function() {
$('#map').click(function(e) {
$(this).find('.gm-style').css('pointer-events', 'all');
}).mouseleave(function(e) {
$(this).find('.gm-style').css('pointer-events', 'none');
});
})
And a little bit of CSS
.gm-style {
pointer-events: none;
}
23rd February 2015
The CSS
.google-maps {
position: relative;
padding-bottom: 75%; // This is the aspect ratio
height: 0;
overflow: hidden;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
The HTML
<div class="google-maps">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d7098.94326104394!2d78.0430654485247!3d27.172909818538997!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2s!4v1385710909804" width="600" height="450" frameborder="0" style="border:0"></iframe>
</div>
23rd December 2014
Original article
The HTML
<h1 class="bgClip">Clip Text</h1>
The CSS
.bgClip {
background:url('../images/clouds.jpg');
background-repeat:repeat-x;
background-position:0 0;
font-size:200px;
text-transform:uppercase;
text-align:center;
font-family:'Luckiest Guy';
color:transparent;
-webkit-font-smoothing:antialiased;
-webkit-background-clip:text;
-moz-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
margin:0;
If you want to animate it
-webkit-animation:BackgroundAnimated 15s linear infinite;
-moz-animation:BackgroundAnimated 15s linear infinite;
-ms-animation:BackgroundAnimated 15s linear infinite;
-o-animation:BackgroundAnimated 15s linear infinite;
animation:BackgroundAnimated 15s linear infinite;
}
@keyframes BackgroundAnimated {
from {
background-position:0 0
}
to {
background-position:100% 0
}
}
@-webkit-keyframes BackgroundAnimated {
from {
background-position:0 0
}
to {
background-position:100% 0
}
}
@-ms-keyframes BackgroundAnimated {< from {
background-position:0 0
}
to {
background-position:100% 0
}
}
@-moz-keyframes BackgroundAnimated {
from {
background-position:0 0
}
to {
background-position:100% 0
}
}
15th December 2014
<meta name='viewport' content='width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no' />
<meta http-equiv='X-UA-Compatible' content='IE=edge' />