jQuery: cambiar el ancho o alto de un elemento

Algo muy básico como cambiar los valores de anchura o altura de un o varios elementos usando el método css de jQuery.

Por ej. tenemos un determinado elemento con unas dimensiones (100×100) en css:

<div style="height: 100px; width: 100px; background:red" id="elemento"></div>

Vamos a cambiar esas dimensiones por otras (600×900):

$(document).ready(function() {
    $('#elemento').css({ 'width':'600px', 'height':'900px' });
});

Html Links “Share” de las Redes Sociales más populares

Códigos html para insertar los enlaces para compartir “a pelo” de las principales redes sociales (Twitter, Facebook, Google+, Digg, Reddit, Linkedin, Pinterest, StumbleUpon) directamente desde el href, sin cargar las librerías de cada uno.

<!-- Twitter -->
<a href="http://twitter.com/share?url=http://www.bufa.es&amp;text=Bufa Webmaster" target="_blank">Twitter</a>
<!-- Facebook -->
<a href="http://www.facebook.com/sharer.php?u=http://www.bufa.es" target="_blank">Facebook</a>
<!-- Google+ -->
<a href="https://plus.google.com/share?url=http://www.bufa.es" target="_blank">Google+</a>
<!-- Digg -->
<a href="http://www.digg.com/submit?url=http://www.bufa.es" target="_blank">Digg</a>
<!-- Reddit -->
<a href="http://reddit.com/submit?url=http://www.bufa.es&amp;title=Bufa Webmaster" target="_blank">Reddit</a>
<!-- Linkedin -->
<a href="http://www.linkedin.com/shareArticle?mini=true&url=http://www.bufa.es" target="_blank">Linkedin</a>
<!-- Pinterest -->
<a href="http://pinterest.com/pin/create/button/?url=http://www.bufa.es&amp;description=Bufa Webmaster&amp;media=http://www.bufa.es/wp-content/themes/bufa/images/thumbnail_bufa_default.png">Pinterest</a>
<!-- StumbleUpon-->
<a href="http://www.stumbleupon.com/submit?url=http://www.bufa.es&title=Bufa Webmaster" target="_blank">StumbleUpon</a>

(*) A partir de aquí ya podéis customizarlo a vuestro gusto en diseño y demás…, por ejemplo yo suelo utilizar un popup centrado al abrir cada link (en lugar de que habrán en ventana nueva).

CSS: Responsive de videos Youtube y Vimeo

La forma más sencilla de hacer responsive los vídeos de youtube o vimeo en nuestras webs con CSS. Basta con insertar el iframe dentro de un elemento contenedor con las siguientes 2 clases css:

.video-responsive {
    position: relative;
    margin-bottom: 20px;
    padding-top: 56.25%;
}
.video-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

pd: el porcentaje de 56.25% sale del aspecto 16:9 = (9/16)*100

Ejemplo de vídeo responsive de Vimeo:

<div class="video-responsive">
    <iframe src="//player.vimeo.com/video/17798583" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen width="500" height="281"></iframe>
</div>

Ejemplo de vídeo responsive de Youtube:

<div class="video-responsive">
    <iframe src="//www.youtube.com/embed/TKbOywKH8ws" frameborder="0" allowfullscreen width="560" height="315"></iframe>
</div>

PHP: calcular espacio disponible del servidor

La función disk_free_space() de php devuelve el espacio disponible (en bytes) de un directorio que le pasamos como parámetro.

A continuación un ejemplo de uso, mostrando el resultado en MB:

$bytes = disk_free_space("/");
$base = 1024;
$libre = ($bytes/$base)/$base; // en MB
echo $libre.' MB<br>'; // Imprime por ej: 54477.0546875 MB

Puedes editar la variable $libre para obtener el resultado en el valor que necesites sabiendo que 1024 bytes = 1 KB, etc…

jQuery: crear efecto parallax

Un sencillo mini-tutorial para crear un efecto parallax a pelo con jQuery, sin utilizar plugins.

Primero crearemos una clase css (en este caso “parallax”) para los elementos que queremos crear el efecto, junto con un atributo data que he llamado “movimiento” para poder personalizar la velocidad de cada uno, por si tenemos varios en la misma página.

<div class="pagina parallax" data-movimiento="10"></div>
<div class="pagina parallax" data-movimiento="10"></div>
<div class="pagina parallax" data-movimiento="10"></div>
.pagina {
    width: 100%;
    height: 600px;
    background-repeat: no-repeat;
    background-position: 50% 0;
    background-size: cover;
    background-attachment: fixed;
}
.pagina:nth-child(1) { background-image: url(http://31.media.tumblr.com/f6c67ec2821a91051e4175f8a102e1e2/tumblr_n6rzpcsMk41st5lhmo1_1280.jpg); }
.pagina:nth-child(2) { background-image: url(http://38.media.tumblr.com/63748da1fab7ccebe70355807587d659/tumblr_n6rz5eNBG51st5lhmo1_1280.jpg); }
.pagina:nth-child(3) { background-image: url(http://38.media.tumblr.com/ddcaa618d51897a5263bd106bf573917/tumblr_n6esribU971st5lhmo1_1280.jpg); }

Y por último el código jQuery, donde utilizamos el método scroll() para controlar el desplazamiento vertical y poder asignar la nueva posición vertical en % por css:

$(document).ready(function(){
    $pantalla = $(window);
    $('.parallax').each(function(){
        var $this = $(this);
        $pantalla.scroll(function() {
            var y = -($pantalla.scrollTop() / $this.data('movimiento'));
            var xy = '50% '+ y + 'px';
            $this.css({ backgroundPosition: xy });
       });
    });
});

Con este código ya podéis personalizarlo a vuestro gusto en estilo y velocidad de movimiento vertical.