JQuery

Usando los eventos de los dispositivos táctiles

Cuando estamos desarrollando interfaces web adaptables a dispositivos móviles, principalmente táctiles, tenemos que tener en cuenta que no disponemos de un ratón. Con lo cual, a priori, no nos es posible interactuar con eventos del estilo onMouseMove, ouMouseOver, etc.

Por suerte para los desarrolladores, disponemos de la opción de capturar las acciones del touch en estos dispositivos gracias a los eventos, onTouchStart, onTouchMove y onTouchEnd. Leer mas...

08nov

Como poner una animación de cargando

Categoria(s) HTML5 | JQuery Comentar

Cuando tenemos una página web que tarda mucho en cargar o la carga del contenido se hace mediante AJAX, es muy útil poner algun tipo de animación que le indique al usuario que se esta acabando de cargar el contenido y que este no se desespere o empiece a hacer clicks en la web antes de que este todo listo. Leer mas...

01nov

JQuery: eventos con el ratón

Categoria(s) JQuery Comentar

Con JQuery, se pueden controlar multitud de eventos del ratón, como puede ser el hacer un click sobre una capa dada, un doble click, etc.
Pero hay más, vamos a verlos todos:

.click() : El evento click se produce cuando el puntero del ratón se presiona y suelta sobre un elemento HTML dado.
Cualquier elemento HTML puede recibir este evento.

.dblclick() : al igual que el anterior, pero esta vez, haciendo doble click en vez de un click simple.
Cualquier elemento HTML puede recibir este evento. Leer mas...

31oct

Obtener coordenadas X,Y del ratón sobre una capa al hacer click

Categoria(s) JQuery Comentar

Con JQuery como framework javascript en nuestros proyectos, podremos realizar el cálculo e implementación de innumerables mejoras a nuestros desarrollos.
Entre esas mejoras, está el poder controlar los eventos que suceden alrededor de la interacción entre el ratón y la web.

En el caso que nos ocupa, veremos como obtener haciendo click en una capa, la posición relativa X,Y del ratón con respecto a esta: Leer mas...

14oct

Autoredimensionar alto de iframe

Categoria(s) HTML5 | JQuery Comentar

Cuando usamos iframes en nuestras aplicaciones web el principal problema que se nos presenta es adaptar el alto del iframe al contenido que va a cargar. Obviamente esto es más problemático cuanta más disparidad de tamaños pueda tener el contenido a mostrar en el interior del iframe.

Para solucionar esto, existe la posibilidad de cambiar el tamaño del iframe mediante javascript. Lo primero es encerrar nuestro iframe en una capa que podamos redimensionar a nuestro antojo y al iframe le ponemos altura 100%. Adaptandose de este modo a la capa que lo contiene en todo momento. Leer mas...

13oct

Input solo numérico

Categoria(s) HTML5 | JQuery Comentar

Vamos a ver como hacer para que un input de tipo texto solo admita valores numéricos usando JavaScript.

Lo primero es la función JavaScript. Leer mas...

11oct

Como cambiar z-index del datepicker de jQuery

Categoria(s) JQuery Comentar

Por defecto jQuery y sus plugins crean los elementos del estilo de datepicker con z-index+1 en referencia a la capa padre, pero ¿que pasa si este +1 no es suficiente para que el elemento se posicione por encima de las demas capas?

La solución es sencilla, una vez se conoce. Basta con acceder al código de jQuery del plugin, en este caso a jQuery.ui.datepicker.js y buscar la siguiente linea:

inst.dpDiv.zIndex($(input).zIndex()+1);

o algo así si tenemos la versión ofuscada: Leer mas...

24sep

JQuery: evitar conflicto de código javascript

Categoria(s) JQuery Comentar

Cuando en un desarrollo web utilizamos funciones JQuery, Prototype, funciones propias javascript, etc. puede haber ocasiones en que dicho código o funciones haga que la web a desarrollar no se muestre correctamente, porque el diverso código presente en la web entra en conflicto entre sí.

Para solucionarlo, podemos usar el siguiente código en nuestra llamada a código JQuery: Leer mas...