About Taringa!

Popular channels

Manipular el tamaño de un div con jquery

Hola amigos de taringa hoy les traigo algo nuevo con jquery.

Hace unos días se me pidió desarrollar un sitio web, dicho sitio web contaría con dos versiones diferentes una móvil y otra normal, entonces quedaría así:

Versión normal: www.mipagina.com.
Versión mobil: www.m.mipagina.com.

Sucedió que en dicha página en la versión de escritorio se incorporó un buscador, en el cual al pasar el mouse sobre la imagen, con css aplicando el efecto hover, realizaba una transición, para que el buscador apareciera el input automáticamente.

En la versión móvil, también se incorporaría el buscador tal cual, osea una imagen que represente, el icono de búsqueda y luego al pasar el mouse que apareciera el input de búsqueda, pero….. en los dispositivos móviles, no cuentan con puntero del mouse por lo cual EL EFECTO HOVER CON CSS NO FUNCIONARIA!!!!!!

Calma, para ello implemente jquery. Lo mostrare paso a paso como solucione el problema creando mi propio código e investigando.Lo mostrare con un ejemplo.

1.- primero cree un div en el cual contendria el boton y el formulario.



2.- luego cree un enlace que interactuaría como botón (a modo de simulacro puse tal imagen de fondo simulando lo que se me pedia.)
El botón lo coloque con float left, y el fondo una imagen, sin "href2 y la clase “clicme”





3.- El paso tres primero consistió en maquetar el input para darle su estilo visual (en el ejemplo se maquetara sencillamente.) a base de la maquetación le dimos de anchura 295 al input y con clase o id cualquira por ejemplo yo le di de id=text.



4.- pues bien eso es todo ahora lo que se realizara es que se quitara el tamaño del css dejandolo en "0" el input (recuerden que solo se maqueto para ver el tamaño que se le daria nada mas, una ves que quede tal cual, el tamaño a "0")



El cuadrito rojo chico que quedo es procedido por el tamaño mínimo por defecto del input. Se le agrega al css visibility= hidden y listo. Desaparece.



______________________________________________________________________

Ahora la Magia de Jquery
Como ya se debe saber primero agregamos la librería jquery para poder trabajar con ella.

Y luego creamos el script, aquí fue donde tuve problemas ya que interactuare directamente con el evento “clic”, la idea aquí era que al darle un clic apareciera el input, y al volverle a dar clic desapareciera.

Pero no tenía idea de cómo hacerlo ya que por el momento solo se interactuar con dos botones diferentes, esto quiere decir un botón para mostrar y otro botón para ocultar, claro que existen otras funciones que permiten los eventos de “primer clic (evento )y segundo clic (evento)”, pero ninguna se adaptaba a lo que quería.

Lo que realice entonces para asociar dos eventos diferentes al mismo botón, fue, primero saber el tamaño inicial del input (no es “0”, recuerda que tiene un tamaño predefinido.) y esto se logró saber con “innerWidth”






Bien sabemos que nuestro input tiene un tamaño predefinido de 2, ahora con una condición if else y manipulamos el tamaño como muestra la imagen.



Espero sea de su agrado mi post como siempre el demo: Demo

Ya saben me pueden seguir por Facebook Twitter Google+

y como un favor por un experimento que ando realizando entren a esta web y compartan o naveguen por ella --> Casas en cancun

Es un experimento relacionado con seo luego creare un post sobre "SEO"
0No comments yet
      GIF