Skip to content

Instantly share code, notes, and snippets.

View carlos-sanchez's full-sized avatar

Carlos Sánchez carlos-sanchez

View GitHub Profile
@carlos-sanchez
carlos-sanchez / responsive-tables.css
Created November 17, 2013 17:33
Responsive tables (the easiest way)
table{
display:block;
max-width: 100%;
overflow-y:scroll;
}
@carlos-sanchez
carlos-sanchez / html5-template.html
Created November 17, 2013 01:20
HTML5 starter template.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
@carlos-sanchez
carlos-sanchez / tinted-images.css
Created November 16, 2013 02:59
Tinted images with multiple backgrounds. Instead of using a transparent flood color using rgba() or hsla(), we can use a gradient. Gradients are technically background-images and thus not subject to the rule where they can't come first (be top) in the stacking order.
/* Working method */
.tinted-image {
background:
/* top, transparent red, faked with gradient */
linear-gradient(
rgba(255, 0, 0, 0.45),
rgba(255, 0, 0, 0.45)
),
/* bottom, image */
url(image.jpg);
@carlos-sanchez
carlos-sanchez / aviso-legal
Created November 15, 2013 02:43
Aviso Legal
@carlos-sanchez
carlos-sanchez / support.css
Last active January 12, 2017 10:01
Feature Queries: @supports is now supported in every major browser
/*the following transition is applied to .box only if the browser supports CSS transitions.*/
@supports (transition: .5s) {
.box { transition: .5s; }
}
@supports not (display: flex) {
.box { display: inline-block; width: 25%; }
}
@carlos-sanchez
carlos-sanchez / entire-div-clickable.html
Created November 15, 2013 00:23
Make entire div clickable, Here’s an easy way to make the parent div of a link clickable.
<div class="myBox">
blah blah blah.
<a href="http://google.com">link</a>
</div>
@carlos-sanchez
carlos-sanchez / preload-images.js
Created November 15, 2013 00:19
Facebook like image preloader. Ever noticed how fast images load when paging through a Facebook photo album? This is because Facebook is preloading each of these images into your browser’s cache before you even view them. Here’s how you can achieve a similar behavior on your website using some jQuery magic.
var nextimage = "/images/some-image.jpg";
$(document).ready(function(){
window.setTimeout(function(){
var img = $("<img>").attr("src", nextimage).load(function(){
//all done
});
}, 100);
});
@carlos-sanchez
carlos-sanchez / equalize-div-heights.js
Created November 15, 2013 00:17
Equalize heights of div elements. Equalizing heights of div elements is not possible (or very hacky) to do in pure CSS, so jQuery is here to help. The code below will automatically adjust the heights of div elements according to the higher one. Take a look at this alternative JQuery plugin: http://tsvensen.github.io/equalize.js/
var maxHeight = 0;
$("div").each(function(){
if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});
$("div").height(maxHeight);
@carlos-sanchez
carlos-sanchez / load-on-scroll.js
Created November 15, 2013 00:13
Load content on scroll automatically. Some websites such as Twitter loads content on scroll. Which means that all content is dynamically loaded on a single page as long as you scroll down. Here’s how you can replicate this effect on your website:
var loading = false;
$(window).scroll(function(){
if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){
if(loading == false){
loading = true;
$('#loadingbar').css("display","block");
$.get("load.php?start="+$('#loaded_max').val(), function(loaded){
$('body').append(loaded);
$('#loaded_max').val(parseInt($('#loaded_max').val())+50);
$('#loadingbar').css("display","none");
@carlos-sanchez
carlos-sanchez / smooth-scroll2anchor.js
Last active October 19, 2016 09:03
Smooth scrolling to #anchor
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}