CodeHQ

Archive for the ‘HTML’ Category

« Older Entries |

Create your own social share buttons

Friday, February 22nd, 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')
}

Tags: , , , , , , , , ,
Posted in HTML, jQuery | No Comments »

Decorative elements

Wednesday, October 4th, 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.

Tags: , , , ,
Posted in HTML | No Comments »

Full page background video styles

Tuesday, June 13th, 2017

Tags: , ,
Posted in CSS, HTML | No Comments »

CSS animated hamburger menus

Wednesday, March 9th, 2016

Tags: , , , ,
Posted in CSS, HTML | No Comments »

Priority navigation

Thursday, May 7th, 2015

Tags: , , , ,
Posted in CSS, HTML, jQuery | No Comments »

Favicons

Friday, March 6th, 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" />

Posted in HTML | No Comments »

Disables scrolling with the mouse wheel on Google map

Thursday, February 26th, 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;
}

Tags: , , ,
Posted in CSS, HTML, jQuery | No Comments »

Responsive Google maps

Monday, February 23rd, 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>

Tags: , , , ,
Posted in CSS, HTML | No Comments »

Clipping text using background-clip

Tuesday, December 23rd, 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
    }
}

Posted in CSS, HTML | No Comments »

Viewport meta HTML

Monday, December 15th, 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' />

Posted in HTML | No Comments »

Next Page »