Quinten
/ backgroundsize-cover.css
Created
April 22, 2014 12:11
background-size cover in IE (for elements with scalable backgrounds)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #selector { | |
| background-image: url(./path/relative/to/cssfile/to/image.png); | |
| background-size: cover; | |
| } | |
| .ie #selector { | |
| background-image: none; | |
| filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/path/relative/to/document/or/absolute/path/to/image.png',sizingMethod='scale'); | |
| -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/path/relative/to/document/or/absolute/path/to/image.png',sizingMethod='scale')"; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .meter ul.markers { | |
| list-style: none; | |
| padding: 0; | |
| margin: 0; | |
| text-align: justify; | |
| height: 1em; | |
| line-height: 1em; | |
| } | |
| .meter ul.markers:after { |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #area { | |
| position: relative; | |
| } | |
| .popup { | |
| position: fixed; | |
| width: 100%; | |
| height: 100%; | |
| top: 0; | |
| left: 0; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .info-icon { | |
| display: inline-block; | |
| position: relative; | |
| width: 16px; | |
| height: 16px; | |
| margin-bottom: .5em; | |
| } | |
| .info-icon-button { | |
| font-family: serif; |
Quinten
/ img responsive no blowup
Created
January 21, 2014 15:45
Use when there is content from a database containing images that are wider then 320px, and we want to shrink them to the mobile width, but not make them wider then their original width
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .content-from-database img { | |
| max-width: 100%; | |
| height: auto; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| a:after { | |
| content: '\2192'; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .tabs { | |
| position: relative; | |
| padding: 37px 0 0 0; | |
| margin-bottom: 2em; | |
| } | |
| .tabs > ul { | |
| position: absolute; | |
| top: 0; | |
| } |
Quinten
/ clear text-password field on focus
Created
July 2, 2013 08:01
clear text/password field on focus
Every element that needs to clear on focus should have the class clearfocus
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| jQuery(document).ready(function () { | |
| var $ = jQuery; | |
| $('.clearfocus').each(function( index ) { | |
| if ($(this).attr('type') == 'password') { | |
| var fakeInput = $('<input type="text" />'); | |
| fakeInput.val($(this).val()).addClass('input-text').addClass('passclearfocus'); | |
| $(this).after(fakeInput); | |
| $(this).hide(); |
Quinten
/ jQuery plugin skeleton
Created
June 28, 2013 07:52
simple skeleton code to start a jquery plugin
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function( $ ) { | |
| $.fn.pluginSkeleton = function ( options ) { | |
| var settings = $.extend({ | |
| option1: "bones", | |
| option2: "skull" | |
| }, options ); | |
| return this.each(function() { |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="contact-map"> | |
| <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&language=nl"></script> | |
| <script type="text/javascript">// <![CDATA[ | |
| function initialize() { | |
| var myLatlng = new google.maps.LatLng(51.2074746, 3.2263338000000203); | |
| var mapOptions = { | |
| zoom: 16, | |
| center: myLatlng, | |
| mapTypeId: google.maps.MapTypeId.ROADMAP | |
| } |