Skip to content

Instantly share code, notes, and snippets.

View thedaviddias's full-sized avatar
🌍

David Dias thedaviddias

🌍
View GitHub Profile
@thedaviddias
thedaviddias / gist:4037984
Created November 8, 2012 10:25
CSS: Clearfix floats (group)
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
zoom: 1; /* For IE 6/7 (trigger hasLayout) */
@thedaviddias
thedaviddias / gist:4045256
Created November 9, 2012 11:34
CSS: Animated expanding search input
.search {
width: 75px;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
transition: all .5s ease;
}
.search:focus {
width: 200px;
}
@thedaviddias
thedaviddias / gist:4058599
Created November 12, 2012 10:44
MOBILE: Image replacement for hi-res devices
//Image replacement for hi-res devices
function highdpi_init() {
var hiRes = window.devicePixelRatio > 1 ? true : false;
if (hiRes) {
var els = jQuery(".replace-2x").get();
for(var i = 0; i < els.length; i++) {
var src = els[i].src
src = src.replace(".png", "@2x.png");
src = src.replace(".jpg", "@2x.jpg");
src = src.replace(".gif", "@2x.gif");
@thedaviddias
thedaviddias / gist:4058605
Created November 12, 2012 10:45
MOBILE: Orientation class + browser bar hide
// Add class orientation and push browser bar out
function setOrientation() {
var orient = Math.abs(window.orientation) === 90 ? 'landscape' : 'portrait';
$('body').attr('class', orient);
//pushing safari status bar out of view
if (!location.hash) {
setTimeout(function () {
if (!pageYOffset) window.scrollTo(0, 1);
}, 1000);
@thedaviddias
thedaviddias / gist:4059838
Created November 12, 2012 14:58
jQuery Mobile: Expanding a collapsible + scroll top
$("div.ui-collapsible-set").live("expand", function(e) {
var top = $(e.target).offset().top;
if ($(window).scrollTop() > top)
$(window).scrollTop(top);
});
@thedaviddias
thedaviddias / gist:4124340
Created November 21, 2012 11:02
FACEBOOK: Box facebook responsive
/* Cet élément block le script injecté dans l'iframe. On le cache */
#fb-root { display: none; }
/* on redéfini la taille du contenu */
.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] { width: 100% !important; }
@thedaviddias
thedaviddias / ie10hack.css
Created November 27, 2012 11:11 — forked from atk/ie10hack.css
IE10 hack
/*
#ie10 will only be red in MSIE 10,
both in high contrast (display setting) and default mode
*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
#ie10 { color: red; }
}
@thedaviddias
thedaviddias / gist:4154158
Created November 27, 2012 13:10
CSS: Text transition for responsive design
body {
font-size:11em;
color:#000;
transition:all .5s ease-in-out;
-o-transition:all .5s ease-in-out;
-moz-transition:all .5s ease-in-out;
-webkit-transition:all .5s ease-in-out;
}
@media screen and (max-width:500px) {
// Released under MIT license: http://www.opensource.org/licenses/mit-license.php
$('[placeholder]').focus(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function() {
var input = $(this);
@thedaviddias
thedaviddias / dabblet.css
Created December 2, 2012 21:27
CSS: Plaholder style
input::-webkit-input-placeholder {
color: #999;
}
input:-moz-placeholder {
color: #999;
}
input:-ms-input-placeholder {
color: #999;
}
input:focus::-webkit-input-placeholder {