8 snippets jQuery para trabajar con URLs

En cualquier proyecto web, puede llegar el momento en el que sea necesario poder extraer información o hacer uso de la URL de la página actual. Si no existe o no podemos echar mano de un lenguaje del lado del servidor, siempre podemos recurrir a javascript para obtener esta información. Los siguientes son ejemplos nos pueden ser útiles para nuestro propósito. Algunos de los ejemplos utilizan funciones javascript estándar y, por lo tanto, no son específicos de jQuery.

1. Obtener la url de la página actual
Ejemplo que almancena la URL de la página actual en una variable.

var url = document.URL;

2. Obtener la URL del raíz

var root = location.protocol + '//' + location.host;

3. Obtener el parámetro "hash"

var param = document.URL.split('#')[1];

4. Cambiar el parámetro "hash" de la barra de direcciones del navegador

En el siguiente ejemplo reemplazamos el parámetro "hash", que hemos obtenido al hacer clic sobre un enlace. Útil para añadir funcionalidades de marcadores cuando estamos usando Ajax.

$('a.demo-link').click(function(){
    var hash = $(this).attr('href');
    location.hash = hash;
});

5. Redirigir usando Javascript

window.location.href = "http://webintenta.com/";

6. Obtener los parámetros de la url

Si la URL contiene un querystring con varios parámetros, el siguiente snippet analiza cada parámetro y almacena la array como una variable.

var vars = [], hash;
    var q = document.URL.split('?')[1];
    if(q != undefined){
        q = q.split('&');
        for(var i = 0; i < q.length; i++){
            hash = q[i].split('=');
            vars.push(hash[1]);
            vars[hash[0]] = hash[1];
        }
}

Para utilizar cualquiera de los parámetros, puedes acceder al valor utilizando el nombre del parámetro. Por ejemplo, si la URL contiene la querystring “?a=3&b=2&c=1" puedes acceder al valor de "a" del siguiente modo:

alert(vars['a']);

7. Resaltar el elemento actual de menú

En lugar de modificar manualmente los menús de navegación para agregar una clase "activa" a la página actual podemos utilizar:

var url = document.URL;
$('#menu a[href="'+url+'"]').addClass('active');

8. Comprobar si un enlace contiene una URL externa

El siguiente fragmento de código comprueba si el vínculo contiene una URL y si es así, ésta se abre en una nueva ventana del explorador:

var root = location.protocol + '//' + location.host;
$('a').not(':contains(root)').click(function(){
    this.target = "_blank";
});

Visto en 8 Useful jQuery Snippets For URL’s & Querystrings » »

Quake Image Slider

Quake Image Slider es un plugin para crear sliders de imágenes. Está basado en jQuery dispone de algunos efectos de transición que no había visto en otro tipo de plugins de este tipo. Permite combinar imágenes y títulos de las mismas y posee un gran número de opciones para personalizar nuestros slidders.

slider carrusel de imágenes jQuery

Quake Image Slider » »

Accediendo al DOM con jQuery: 10+ útiles snippets

Este post es una traducción libre del post Manipulating the DOM with jQuery: 10+ useful code snippets, publicado en catswhocode.

Añadir una clase CSS a un elemento
Una forma muy sencilla de cambiar el aspecto y funcionalidad de un elemento es añadirle un clase CSS.

('#mielemento').addClass('miclase');

Eliminar una clase CSS de un elemento
Al igual que es útil conocer como añadir clases CSS, también es interesante conocer como eliminar clases CSS no deseadas.

$('#mielemento').removeClass('miclase');

Comprobar si un elemento posee una clase CSS
Si en tu aplicación o sitio web se añaden y eliminan clases para un elemento en particular, puede ser muy útil ser capaces de comprobar si un elemento contiene cierta clase.

$('#mielemento').hasClass'miclase');

Cambiar de CSS usando jQuery
Tal y como hemos visto en los ejemplos anteriores, añadir o eliminar clases CSS a un elemento es muy sencillo utilizando jQuery. Pero, qué ocurre si lo que queremos es eliminar completamente una hoja de estilos y adjuntar una nueva. Es muy fácil, tal y como se muestra en el siguiente ejemplo:

$('link[media='screen']').attr('href', 'css_alternativo.css');

Anexar HTML a un elemento
Cuando necesitamos anexar html a un elemento, podemos utilizar el método append():

$('#mielemento').append('texto que será añadido');

Comprobar si un elemento existe
Cuando trabajamos con Javascript, a menudo necesitamos comprobar si un elemento existe o no. Usando jQuery y la propiedad length es muy sencillo hacerlo: si length == 0, no existen elementos usados en la página.

if ($('img').length) {
		alert('Se han encuntrado elementos img en la página');
} else {
		alert('No se han encontrado elementos img');
}

Obtener el padre de un elemento
Cuando trabajamos con el DOM, podemos necesitar conocer qué elemento es el padre directo de otro elemento. El método closest() nos permite averiguarlo.

var id = $("button").closest("div").attr("id");

Obtener los hermanos de un elemento
El método sibings() es una herramienta muy útil para obtener los hermanos de un elemento:

$('mielemento').siblings()

Eliminar una opción de una lista desplegable
Cuando trabajamos con listas desplegables puede ser útil actualizar su contenido de acuerdo a las acciones del usuario. Para eliminar una opción de un select, podemos utilizar el siguiente truco:

$("#selectList option[value='2']").remove();

Obtener la opción seleccionada como texto
Útil cuando deseamos conocer que es lo que un usuario ha seleccionado de un lista desplegable.

$('#selectList :selected').text();

Aplicar un efecto “cebra” a las tablas
Cuando usamos tablas, es una buena idea, para mejorar la legibilidad, aplicar un estilo "cebra" a las filas.

$("tr:odd").addClass("odd");

Contar los hijos de un elemento
Si queremos contar cuantos elementos div son hijos de #foo, la siguiente línea nos permitirá saberlo.

$("#foo > div").length

Efecto hover sobre imágenes con HTML5

Esta técnica, gracias a HTML5 y jQuery, nos permite crear un efecto de "hover" sobre imágenes, mostrándolas en escala de grises. Para lograr este efecto antes de HTML5, se necesitaban dos imágenes: una en color y otra versión en escala de grises. Ahora HTML5 lo permite de un modo más sencillo y rápido porque se genera la imagen en escala de grises a partir de la imagen original. Para terminar de comprender el efecto, lo mejor es ver el resultado final:

Ver ejemplo en funcionamiento » »

El siguiente código actuaría en todas las imágenes contenidas dentro de un elemento cuya clase sea "item".

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>  
<script type="text/javascript">
	$(window).load(function(){
		$(".item img").fadeIn(500);

		$('.item img').each(function(){
			var el = $(this);
			el.css({"position":"absolute"}).wrap("<div class='img_wrapper' style='display: inline-block'>").clone().addClass('img_grayscale').css({"position":"absolute","z-index":"998","opacity":"1"}).insertBefore(el)

.queue(function(){
			var el = $(this);
			el.parent().css({"width":this.width,"height":this.height});
			el.dequeue();
			});
			this.src = grayscale(this.src);
		});
		
		$('.item img').mouseover(function(){
			$(this).stop().animate({opacity:0}, 500);
		})
		$('.img_grayscale').mouseout(function(){
			$(this).parent().find('img:first').stop().animate({opacity:1}, 500);
			
		});		
	});
	
	function grayscale(src){
		var canvas = document.createElement('canvas');
		var ctx = canvas.getContext('2d');
		var imgObj = new Image();
		imgObj.src = src;
		canvas.width = imgObj.width;
		canvas.height = imgObj.height; 
		ctx.drawImage(imgObj, 0, 0); 
		var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
		for(var y = 0; y < imgPixels.height; y++){
			for(var x = 0; x < imgPixels.width; x++){
				var i = (y * 4) * imgPixels.width + x * 4;
				var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
				imgPixels.data[i] = avg; 
				imgPixels.data[i + 1] = avg; 
				imgPixels.data[i + 2] = avg;
			}
		}
		ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
		return canvas.toDataURL();
    }
</script>

El código es una variación del visto en web designer wall. En este ejemplo la imagen pasa a escala de grises en el efecto "hover" y no al revés como ocurre en el ejemplo de web designer wall.

Visto en web designer wall » »

jQuery Map Marker

jQuery Map Marker es un plugin que facilita poner varios marcadores en un mapa utilizando Google Maps API V3. Utiliza JSON para las ubicaciones que deben ser suministradas mediante coordenadas de latitud y longitud. Los pasos para su uso son los siguientes:

Incluir los ficheros javascript necesarios:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/mapmarker.jquery.js"></script>

Crear un conteneder para tu mapa y asignarle un identificador:

<div id="map" style="width: 550px; height: 450px; border:2px solid red;"></div>

Aplicar el plugin al elemento usando un código similar al siguiente:

<script type="text/javascript">
	$(document).ready(function(){
		//set up markers 
		var myMarkers = {"markers": [
				{"latitude": "31.42866311735861", "longitude":"-98.61328125", "icon": "img/house.png", "baloon_text": "This is <strong>Texas</strong>"},
				{"latitude": "35.101934057246055", "longitude":"-96.6796875", "icon": "img/castle.png", "baloon_text": "This is <strong>Oklahoma</strong>"},
				{"latitude": "38.61687046392973", "longitude":"-98.876953125", "icon": "img/house.png", "baloon_text": "This is <strong>Kansas</strong>"}
			]
		};
		//set up map options
		$("#map").mapmarker({
			zoom	: 5,
			center	: 'United States',
			markers	: myMarkers
		});

	});
</script>

jQuery Map Marker » »