Skip to content

Instantly share code, notes, and snippets.

View lucasdidthis's full-sized avatar

Lucas lucasdidthis

2 followers · 3 following
View GitHub Profile
@lucasdidthis
lucasdidthis / css_callback.js
Last active September 21, 2015 09:32
how to add a jQuery callback function to a CSS3 Transition
$(".element-with-transition").on('webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd transitionend', function(){
//add jQuery code here, it's executed after the transition ended
});
@lucasdidthis
lucasdidthis / no_doubletap_zooming.js
Created August 10, 2015 13:10
prevent iOS from zooming on doubletap (pure JS)
var doubleTouchStartTimestamp = 0;
$(document).bind("touchstart", function(event){
var now = +(new Date());
if (doubleTouchStartTimestamp + 500 > now){
event.preventDefault();
};
doubleTouchStartTimestamp = now;
});
@lucasdidthis
lucasdidthis / no_doubletap_zooming.js
Created August 10, 2015 13:11
prevent iOS from zooming on doubletap (jQuery)
var doubleTouchStartTimestamp = 0;
document.addEventListener("touchstart", function(event){
var now = +(new Date());
if (doubleTouchStartTimestamp + 500 > now){
event.preventDefault();
};
doubleTouchStartTimestamp = now;
});
@lucasdidthis
lucasdidthis / svg_image_replacement.js
Created August 10, 2015 13:13
replace every IMG-tag with the class ‘svg’ with the inline SVG from the linked file
jQuery('img.svg').each(function(){
var $img = jQuery(this);
var imgID = $img.attr('id');
var imgClass = $img.attr('class');
var imgURL = $img.attr('src');
jQuery.get(imgURL, function(data){
var $svg = jQuery(data).find('svg');
if(typeof imgID !== 'undefined') {
$svg = $svg.attr('id', imgID);
};
@lucasdidthis
lucasdidthis / svg_image_replacement.html
Created August 10, 2015 13:14
replace every IMG-tag with the class ‘svg’ with the inline SVG from the linked file
<img id="unique_ID" class="svg" src="/images/file.svg"/>
@lucasdidthis
lucasdidthis / svg_background_image.css
Created August 10, 2015 13:15
SVG-code in backround-image definition
#logo_container{
background-image:
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='87px' height='51px'><g id=”ink_x5F_icon”><rect x=”6" y=”9" fill=”#010203" width=”6" height=”6"></rect><rect x=”6" y=”18" fill=”#010203" width=”6" height=”15"></rect><rect x=”15" y=”27" fill=”#010203" width=”6" height=”6"></rect><rect x=”15" y=”9" fill=”#010203" width=”6" height=”15"></rect></g><g id=”ink_x5F_menu”><rect x=”42" y=”9" fill=”#010203" width=”24" height=”6"></rect><rect x=”42" y=”18" fill=”#010203" width=”24" height=”6"></rect><rect x=”42" y=”27" fill=”#010203" width=”24" height=”6"></rect></g><path id=”ink_x5F_rame” fill=”#010203" d=”M75–3H-3h-3v48h3h78h3V-3H75z M-3,42V0h33v42H-3z M75,42H33V0h42V42z”></path><polygon id=”ink_x5F_shadow” fill=”#010203" points=”78,3 78,45 0,45 0,48 78,48 79,48 81,48 81,3 “></polygon></svg>");
}
@lucasdidthis
lucasdidthis / drop_caps_basic.css
Created August 10, 2015 13:16
how to add drop caps to your website (basic definition)
article p:first-child::first-letter{}
@lucasdidthis
lucasdidthis / drop_caps_example.css
Created August 10, 2015 13:17
how to add drop caps to your website (example)
article p{
font-family: sans-serif;
}
article p:first-child::first-letter{
float: left;
display: block;
font-family: serif;
font-weight: bold;
@lucasdidthis
lucasdidthis / scg_image_replacement.css
Created August 10, 2015 13:24
style an inline SVG with CSS
#unique_ID path{
fill: green;
}
#unique_ID:hover path{
fill: red;
}
@lucasdidthis
lucasdidthis / j_scripts.html5
Created August 13, 2015 07:46
How to bundle Javascript-files with Contao CMS
<?php
/* COMBINE THESE JS-FILES */
$GLOBALS['TL_JAVASCRIPT'][] = $GLOBALS['TL_CONFIG']['uploadPath'] . '/theme_files/js/filename.js|static';
$GLOBALS['TL_JAVASCRIPT'][] = $GLOBALS['TL_CONFIG']['uploadPath'] . '/theme_files/js/filename2.js|static';
/* ... */
?>