Skip to content

Instantly share code, notes, and snippets.

View felixzapata's full-sized avatar

Félix Zapata felixzapata

View GitHub Profile
@felixzapata
felixzapata / gist:3684117
Created September 9, 2012 12:44
load an image from an input file into canvas tag
function loadCanvasWithInputFile(){
// canvas
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext("2d");
var fileinput = document.getElementById('ab'); // input file
var img = new Image();
fileinput.onchange = function(evt) {
var files = evt.target.files; // FileList object
var file = files[0];
@felixzapata
felixzapata / gist:3684198
Last active October 10, 2015 11:38
averiguo el elemento más alto de filas de 2 elementos. sacado de StackOverflow
var fixes = {
controlHeight:function(obj){
var elems = obj.find("article"),
len = elems.length;
for(var i = 0; i < len; i+=2) {
var divs = elems.slice(i, i+2),
height = Math.max(divs.eq(0).height(), divs.eq(1).height());
divs.css('min-height', height);
}
}
@felixzapata
felixzapata / gist:3684209
Created September 9, 2012 13:12
animacion controlada mediante un temporizador
// http://dailyjs.com/2010/06/03/framework-part-15/
function animate() {
var box = document.getElementById('box'),
duration = 1000,
start = (new Date()).valueOf(),
finish = start + duration,
interval;
@felixzapata
felixzapata / gist:3684220
Created September 9, 2012 13:13
personalización de radios mediante CSS. de @zmencay
input[type=radio] {
position: absolute;
height: 26px;
width: 26px;
opacity: 0;
filter: alpha(opacity = 100);
cursor:pointer;
}
input[type=radio] + label {
@felixzapata
felixzapata / gist:3699774
Created September 11, 2012 16:49
Secret sauce from "Checkboxes and the ridiculous things you can do with them"
/*
http://thecssninja.com/talks/ridiculous_checkboxes/#/
*/
/* Off */
input[type="checkbox"] ~ div {
// Fancy styles
}
/* On */
@felixzapata
felixzapata / gist:3718231
Created September 13, 2012 22:37
media query for iPhone 5
/* iPhone 5 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) {
/* Styles */
}
@felixzapata
felixzapata / custom CSS
Created September 22, 2012 20:24
Demo Page for jQuery UI selectmenu
body {font-size: 62.5%; font-family:"Verdana",sans-serif; }
fieldset { border:0; }
label,select,.ui-select-menu { float: left; margin-right: 10px; }
select { width: 200px; }
.wrap span.ui-selectmenu-item-header,
.wrap ul.ui-selectmenu-menu li a { text-decoration: underline !important; }
.ui-selectmenu-menu li a, .ui-selectmenu-status { padding:.405em 2.1em 0.405em 1em; }
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br, .ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { border-radius:0 }
@felixzapata
felixzapata / gist:3775502
Created September 24, 2012 11:15
How can I make the width of my <figcaption> match the width of the <img> inside its <figure> tag?
/*
* http://stackoverflow.com/questions/6534473/how-can-i-make-the-width-of-my-figcaption-match-the-width-of-the-img-inside
*/
figure { display: table; }
figcaption { display: table-caption; caption-side: bottom ; }
@felixzapata
felixzapata / gist:3826277
Created October 3, 2012 10:30
target all hash-links, prevent their default behavior,
// http://css-tricks.com/on-target/
$("a[href^=#]").on("click", function(e) {
e.preventDefault();
history.pushState({}, "", this.href);
});
@felixzapata
felixzapata / css para html
Created October 4, 2012 11:07
truco para que un pie de foto ocupe todo el ancho de la imagen independiente de su ancho
.loc {
display:table;
position:relative;
margin-bottom:39px;
}
.faldon {
display:table-caption;
position:absolute;
bottom:0;
left:0;