Píldoras jQuery VIII & CSS3 Transform : Modificando una imagen con campos “range”

En este post vamos a mezclar el uso de jQuery con el uso de una de las propiedades CSS3 más esperadas que nos permite modificar cualquier elemento casi de cualquier manera: la propiedad transform.

El uso experto de esta propiedad transform requiere de la lectura pausada de la documentación, ya sea en MDN o en W3C School y de conocimientos de geometría, así que para empezar únicamente nos vamos a centrar en 4 tipos de transformaciones simples:

  • La rotación 2D que nos permite girar cualquier elemento HTML de manera plana. Tiene una síntaxis muy sencilla: transform: rotate(Xdeg) donde X es el número de grados que queremos girar. Este número podrá ser positivo ( en el sentido de las agujas del reloj) o negativo ( en sentido contrario)
  • El escalado para modificar el tamaño de los objetos HTML. Su síntaxis es similar: transform(x,y) donde x es el factor de escalado en el eje X e Y es el factor de escalado en el eje Y. Si no pongo Y se supone que escalaré de igual manera en ambos ejes.
  • El sesgo en el eje X (skewX) que modifica la perspectiva (en el ejeX) del objeto a transformar en los ángulos especificados. La forma de expresarlo es la siguiente: transform: skewX(Xdeg) donde X es el número de grados del ángulo del sesgo.
  • El sesgo en el eje Y (skewX) que modifica la perspectiva (en el ejeY)  del objeto a transformar en los ángulos especificados. La forma de expresarlo es la siguiente: transform: skewY(Xdeg) donde X es el número de grados del ángulo del sesgo

Para ilustrar el uso de estas cuatro, ya os digo que hay muchas más posibilidades, vamos a ver un ejemplo hecho con jQuery donde mediante el uso de input de tipo range (sliders) vamos a poder realizar estas cuatro transformaciones.

See the Pen Transforming an Image using CSS3 and jQuery by Juan Diego Pérez Jiménez (@pekechis) on CodePen.

Puedes descargar el código completo aquí.

Y de momento esto es todo. Nos vemos en el siguiente post.

 

Píldoras jQuery VI – Un menú contextual

En el capítulo anterior vimos, de manera general y con un par de ejemplos, cómo tratar eventos de teclado y de ratón. En este post vamos  a seguir con esta temática.

Uno de las características más comunes en las aplicaciones web es la aparición de un menú contextual cuando pulsamos el botón derecho del ratón. No es algo complicado pero debemos de tener en cuenta que, por defecto, se nos mostrará el menú contextual del propio navegador. Tomemos como ejemplo el siguiente ejemplo de código:

See the Pen jQuery (Capturing mouse right click but showing browser’s context menu) by Juan Diego Pérez Jiménez (@pekechis) on CodePen.

Podría pensarse que al capturar el evento con código 3 es nuestro menú el que se va a mostrar, pero no, prevalece el menú contextual del navegador. Para evitar eso podemos optar por lo siguiente (hay muchas más posibilidades de hacerlo):

 

See the Pen jQuery (How to show a context menu in the right way) by Juan Diego Pérez Jiménez (@pekechis) on CodePen.

Las claves de que funcione se encuentran en los siguiente apartados:

  • Capturo el evento contextmenu en vez de click
  • Hago un return false para que ese evento no se tratado por el navegador (sería lo mismo si hiciera primero event.prevendefault() y event.stopPropagation() )

Y esto es todo…muy sencillo pero en un principio el funcionamiento del navegador puede desconcertar. En el próximo post repasaremos los selectores jQuery, uno de los elementos más importantes si queremos dominar esta tecnología.

 

Píldoras jQuery V – El objeto evento

El objetivo principal de usar librerías jQuery u otras similares es el de dotar de vida y dinamismo a nuestra páginas HTML que, por defecto, son estáticas. Para ello lo que tenemos que hacer es capturar evento y tratarlos.

La lista de eventos que podemos capturar es amplia y puedes encontrarla aquí y para capturarlas, tratarlos y reaccionar a ellos podemos hacerlo de dos maneras:

Nota: nombre_del_evento deberá ser sustituido por el nombre real de un evento concreto.

Pero además, en determinadas ocasiones, además de conocer el tipo de evento que se ha realizado, vamos a necesitar más información. Esta información queda recogida en el objeto  event de la función de callback que se ejecuta junto al manejador del evento. En este objeto event tenemos información importante (la referencia completa se puede encontrar aquí) como:

  • event.target : Que identifica el objecto jQuery sobre el que se ha producido el evento
  • event.type: Que identifica el tipo del evento
  • event.timeStamp: Que nos da información sobre el momento en el que se ha producido el evento
  • event.which: Que, en eventos de teclado y de ratón, nos dice que tecla se ha utilizado.
  • event.pageX: La posición X, dentro del navegador, en la que se ha producido el evento.
  • event.PageY: La posición Y, dentro del navegador, en la que se ha producido el evento. Destacar que en estas dos últimas propiedades el origen de las coordenadas, el punto (0,0) se encuentra en la esquina superior izquierda del navegador.

Para poder ver cómo se utiliza esta información sobre los eventos vamos a utilizar dos ejemplos, el primero nos dará la situación el puntero del ratón en la pantalla y en la segunda mediante el uso del teclado moveremos un div dentro de un div contenedor.

Vamos allá con la primera, esta vez usaremos codepen para mostrar el ejemplo y los ejemplos completos pueden además descargarse aquí:

See the Pen Mouse Movement by Juan Diego Pérez Jiménez (@pekechis) on CodePen.

Y el segundo ejemplo podemos verlos aquí. Mediante el uso de las teclas podremos mover un cuadrado por la pantalla.

See the Pen Capturing Key events with jQuery and moving a div by Juan Diego Pérez Jiménez (@pekechis) on CodePen.

Y esto es todo, en el próximo artículo de la serie veremos cómo crear un menú contextual (el que aparece cuando haces click en el botón derecho del ratón)  en elemento de nuestra página HTML.

 

Píldoras jQuery IV – Menú anidado de 3 niveles

Cuarta entrega de la serie. Esta vez un ejemplo muy usado: un menú anidado de tres niveles. El primero de lo niveles será horizontal, el segundo vertical y el tercero será también horizontal tal y como podemos ver en la siguiente imagen:

nested_menus

El ejemplo completo puede descargarse aquí:

El árbol HTML es muy sencillo:

La hoja de estilos CSS es muy sencilla:

Y la parte más importante, el script que define el comportamiento de los menús

Y esto es todo. El próximo tutorial de la serie será mostrar cómo trabajar con algunas de las propiedades de los eventos.

Píldoras jQuery III – Acordeón Vertical

Vamos con la tercera entrega de píldoras jQuery. Esta vez vamos a ver como hacer un acordeón vertical. El objetivo es conseguir algo similar a la imagen que podemos ver más abajo, de tal manera que cuando hacemos click en el título de una sección esa sección se despliega y el resto de las secciones se contrae:

vertical_accordion

El código completo se puede descargar aquí.

El HTML es muy sencillo:

El árbol DOM correspondiente, que nos ayuda a entender luego cómo usamos jQuery es:

dom_accordion

Los estilos iniciales de la página son los siguientes:

Y ahora la parte importante el script que nos permite definir el comportamiento del acordeón:

Y esto es todo, nos vemos en la siguiente píldora, un menú anidado de tres niveles con jQuery.

 

Píldoras jQuery II – Barra lateral deslizante

Seguimos con la segunda entrega de las pequeñas píldoras jQuery. En esta entrega vamos a crear una barra lateral deslizante. El código completo del ejemplo puede ser descargado aquí.

El HTML, ya que el resto de la página está vacía es muy sencillo.

El posicionamiento de esa barra, los bordes y los colores lo haremos con CSS. Es también una hoja de estilos muy sencilla.

Una vez ya tenemos todo colacado y con la apariencia que queremos podemos empezar a utilizar jQuery para modificar y hacer la página web y el DOM interactivo. El script que vamos a necesitar lo colocaremos justo antes de cerrar la etiqueta body y será el siguiente:

Y esto es todo. En el próximo capítulo veremos como hacer el típico efecto “acordeón” con varios contenidos en una misma página.