Bufa Webmaster » Javascript

jQuery: detectar país del usuario

Jorge Maiden — Mon, 05 Dec 2011 11:06:22 +0000

Un método bastante sencillo de para detectar el país (sin necesidad de utilizar php para averiguar su ip) del usuario que esta entrando en nuestra web es usando la API de wipmania por medio de jQuery. El método de consulta nos devuelve unas cuantos parámetros como son: latitud, longitud, zoom, dirección, ciudad, país, códido del país, región.

Si introduciomos en nuestro navegador directamente la url “http://api.wipmania.com/jsonp?callback=?” ya observamos los datos que nos devuelve. Ya solo hace falta utilizar JSON para recuperarlos con jQuery de la siguiente forma:

jQuery: diferencias entre $(document).ready y $(window).load

Jorge Maiden — Fri, 25 Nov 2011 10:17:12 +0000

El siguiente código se utiliza casi siempre que trabajamos con jQuery. Bien, $(document).ready lo utilizamos cuando queremos iniciar nuestro código jQuery después de que el DOM este ya cargado.

$(document).ready(function() {
alert("Hola");
});

Y entonces, ¿para que sirve $(window).load?

Este método te avisa de cuándo están cargados todos los elementos del DOM (es decir, cuando la página web se ha cargado completamente en tu navegador).

$(window).load(function() {
alert("Adios");
});

Lo mejor es que los probéis, crearos una página con una serie de imágenes, y insertar los códigos javascript anteriores.

jQuery: desabilitar tecla “Enter” en formularios

Jorge Maiden — Thu, 24 Nov 2011 06:30:30 +0000

Los formularios de modo predeterminado se pueden ejecutar pulsando con la tecla “Enter” o con el botón submit del mismo. Bien, es posible que no nos interese que ejecuten algún formulario con el teclado.

A continuación un script jQuery para desactivar la tecla “Enter” al ejecutar un formulario, de esta manera obligamos al usuario a tener que hacer click en el botón predifinido que tengamos en el formulario para ejecutarlo.

$(document).ready(function() {
$("form").keypress(function(e) {
if (e.which == 13) {
return false;
}
});
});

jQuery: target=_blank en todos los links

Jorge Maiden — Wed, 23 Nov 2011 11:07:14 +0000

Si queremos que todos los links de una página/s se abran en nueva ventana (target=”_blank”) y no os interesa editar por lo que sea todos los php o html de vuestras páginas, podeis hacer uso de este simple script jQuery, que se encarga de abrir en nueva ventana en todos los links (al hacer “click” sobre los enlaces):

$(document).ready(function() {

$('a').click(function(){
this.target = "_blank";
});

});

Mode

Cargador jQuery

Jorge Maiden — Fri, 11 Nov 2011 14:03:30 +0000

Crear un efecto de “cargar página” o “loading” en jquery mientras se van cargando todos los elementos de la página web es realmente sencillo gracias a la función load() de jQuery.

A continuación un ejemplo que puedes customizar el css a tu gusto de mil formas.

1º. Creamos damos estilos al div que aparecerá primero por encima del resto (con posición absoluta en css) hasta que se cargen ya todos los elementos del documento, que es cuando este div ya desaparecera.

#cargando {
position:absolute;
width:100%;
height:100%;
background:#fff url(imagenes/loading.gif) no-repeat center;
}

2º. Insertamos en script dentro del “head” de nuestro documento:

$(window).load(function () {
// Una vez se cargue al completo la página desaparecerá el div "cargando"
$('#cargando').hide();
});

Y por último, insertamos el div con id “cargando” al principio o final del “body” de nuestra página web:

<body>
<div id="cargando">Cargando...</div>

Y aquí ya va todo el contenido (divs, imagenes, etc...) de tu pagina...
</body>

Este es un ejemplo sencillo de como hacer un cargador usando jquery, pero con un poco de imaginación puedes hacer un cargador de página mucho más original (Puedes crear diferentes imagenes de loading en http://www.ajaxload.info/).

Si tengo tiempo ya os pondré algunos ejemplos diferentes de cargadores utilizando este simple script como base.

jQuery Colorbox (al cargar la página)

Jorge Maiden — Sat, 05 Nov 2011 11:00:15 +0000

Método para cargar al inicio un lightbox, es decir, que nada más cargar la página (onload) se abra el lightbox que queramos (sin necesidad de hacer click en ningún elemento).

Utiliza este script si estas usando el plugin colorbox para tus lightbox o ventanas emergentes.

Utilizamos las propiedades “open” para abrir el lightbox al instante de cargar y “href” donde indicaremos el archivo que queremos abrir dentro.

Un ejemplo para cargar una determinada página html al inicio:

$(document).ready(function() {
$.fn.colorbox({ iframe:true, width:"500", height:"300", href:"midirectorio/index.html", open:true });
});

jQuery: obtener el ancho y alto originales de una imagen

Jorge Maiden — Tue, 18 Oct 2011 07:00:21 +0000

Con jQuery podemos averiguar el ancho y alto de un elemento utilizando las funciones width() y height(). Pero imaginarios que queremos averiguar el ancho y alto original de una imagen que en sus dimensiones originales son de 800×600, pero que redimensionamos manualmente los atributos de la imagen de esta forma:

Sobre esta imagen si aplicamos directamente las funciones anteriores de jquery nos darian “333″ de ancho y “222″ de alto.

Pero, para averiguar el tamaño original de la imagen, primero eliminamos los atributos (width, heitght) actuales de la imagen con la función removeAttr(), y listo, ya podemos aplicar ahora las funciones width() y height() y obtendremos el tamaño real de la imagen:

$(window).load(function() {
var imagen = $('#mifoto');

imagen.removeAttr("width"); // quitamos el atributo width
imagen.removeAttr("height"); // quitamos el atributo height

alert( imagen.width() ); // ancho original. Ej. 800
alert( imagen.height() ); // alto original. Ej: 600
});

Navegación jQuery con teclado (anterior / siguiente)

Jorge Maiden — Sun, 09 Oct 2011 10:50:07 +0000

A continuación un script jquery para emular la navegación de una web con las teclas del teclado mediante los cursores de navegación (izquierda-derecha-arriba-abajo) o “arrow keys”. Podemos utilizarlo en alguna galería de imágenes, para ir pasando de una en una, etc…

Con “event.keyCode” localizamos la tecla sobre la que queremos actuar, y ya con “window.location” abrimos la nueva página.

En este ejemplo hago uso de las teclas de navegación de “anterior” y “siguiente” para ir pasando los post de WordPress, pero podéis sustituir el valor de window.location por el que os intenrese:

$(document).ready(function(){

$('body').keyup(function (event) {

if (event.keyCode == 37) {
// Anterior
window.location = "";
} else if (event.keyCode == 39) {
// Siguiente
window.location = "";
}

});

});

jQuery: comprobar que existe un elemento

Jorge Maiden — Thu, 15 Sep 2011 19:23:26 +0000

Una manera sencilla de comprobar si existe un elemento con jquery. Para ello utilizamos length(), que cuenta el número total de elementos.

Un ejemplo, vamos a comprobar al pulsar sobre los elementos de un menu, si existe dentro de este una etiqueta “span”:

<ul>
<li><a href="#"><span>Home</span></a></li>
<li><a href="#">Noticias</a></li>
<li><a href="#">Contacto</a></li>
</ul>

$(document).ready(function(){

$("ul li").hover(function() {
if($(this).find("span").length){
alert('Si existe');
}else{
alert('No existe');
}
});

});

jQuery: Comprobar si un checkbox esta seleccionado

Jorge Maiden — Mon, 12 Sep 2011 22:28:09 +0000

Un ejemplo para comprobar con jquery si un checkbox esta checked (seleccionado):

$('#micheckbox').change(function(){
var checkeado = $(this).attr("checked");
if(checkeado) {
alert('activado');
} else {
alert('desactivado');
}
});