carlos-sanchez’s gists

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 / 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 / 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 / aviso-legal

Created November 15, 2013 02:43

Aviso Legal

	Política de privacidad y protección de datos

	De acuerdo con la normativa vigente en materia de protección de datos así como en materia de servicios de la sociedad de la información y de comercio electrónico, informamos al usuario que los datos personales aportados serán incorporados a un fichero automatizado, cuyo responsable es URalde con el fin de facilitarle la información, productos o servicios que nos solicite, o para ponernos en contacto con usted.

	Si usted tiene cualquier duda sobre la confidencialidad o el tratamiento que reciben sus datos, así como si desea ejercer alguno de los derechos de información, oposición, rectificación y cancelación que legalmente le corresponden, (o cualquier otro derecho que usted crea que le puede asistir) puede dirigirse a: [email protected]

	Derechos sobre los contenidos

	La reproducción de estas páginas, así como de cualquiera de sus contenidos,
	es libre y gratuita, siempre y cuando se cumplan las siguientes condiciones:

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 / 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 / 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 / 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 / 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 / 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;
	}

Carlos Sánchez carlos-sanchez