Efectos con JavaScript y jquery Validación de formulario

Transcripción

1 Efectos con JavaScript y jquery Validación de formulario Los 5 campos del formulario son obligatorios y la validación consiste en exigir que ninguno de los 5 campos pueda estar en blanco. Para esto se recorre a los 5 campos (agrupados los 4 input más el textarea en el objeto jquery $campo) con el bucle de la función each(), que en cada iteración averigua si el valor de cada campo es nulo o no. Mediante una condicional en cada iteración se decide lo siguiente: si el campo está vacío se le asigna mediante la función css() un borde rojo, mientras que si el campo no está vacío se suma 1 a un puntaje que se va acumulando a lo largo de las iteraciones de campos validados. Una vez terminado el bucle hay una condicional que evalúa el puntaje acumulado, de tal forma que si el puntaje no alcanza los 5 puntos (un punto por cada campo correcto), eso quiere decir que algún campo no fue validado y en ese caso se evita el envío del formulario y se genera un alert() que indica el error y, además, indica cuántos campos han sido efectivamente completados. Para que el alert indique para cada caso cuántos campos han sido completados, hay un arreglo texto[] que contiene un mensaje para cada caso en las casillas cuyo orden, a su vez, corresponden al número de puntaje alcanzado, de tal manera de elegir en la cadena del mensaje de alert() el mensaje exacto que corresponda, simplemente poniendo la variable del número de puntaje dentro de los corchetes del arreglo; por ejemplo: texto[0] corresponde a la posición dentro del arreglo donde está el mensaje que se genera cuando no hay ningún campo validado y se extrae escribiendo texto[puntaje], ya que en ese caso la variable 'puntaje' justamente sería cero.

2 Además hay una función que llama a un complemento datepicker de jquery UI para agregar dichos datepicker en los input de fecha de inicio y fecha de fin. Menú fijo y scroll animado hacia anclas a) ir a la posición deseada Mediante las funciones ir() y scrollanimadologo(), ambas similares, pero la primera para los botones del menú de navegación y las segunda para el logo, mediante ellas, digo, al hacer clic sobre uno de estos elementos se guarda el botón específico sobre el que se hizo clic en el objeto jquery $elboton. Posteriormente se pasa $elboton como parámetro a la función scrollancla(), es decir, queda como scrollancla($elboton). Además se evita mediante la función preventdefault() el scroll por defecto que realizaría el navegador, para que solo se ejecute el scroll animado que realizará la función scrollancla(). Hecho lo anterior, la función scrollancla() rescata el valor del atributo 'href' de $elboton, ya que tal valor en este caso es una id que corresponde al ancla hacia donde iría el scroll al hacerse clic. El id sacado del href de $elboton es guardado como una mera cadena de texto en la variable 'objetivo' y así se tiene identificado el id dentro de la página, donde se deberá ir con el scroll. Posteriormente, aplicando la función offset() de jquery al elemento que posea el id guardado en la variable 'objetivo', es decir, al objeto jquery $(objetivo), obtenemos un objeto con las propiedades 'top' y 'left', que corresponden a las coordenadas en que se encuentra el elemento en cuestión. Todo esto último se guarda en la variable 'posicion'. Antes de ejecutar el scroll animado hay una condición que hace que si el objetivo es alguna de las secciones que no sean el inicio, entonces, en ese caso se le restan 49 pixeles a la propiedad 'top' del

3 objeto 'posicion' principalmente para compensar el espacio que ahora usa el menú fijo, evitando que este menú quede tapando parte del título de la sección correspondiente hacia donde se moverá el scroll, junto con otros detalles explicados en un comentario en esa parte exacta del código (línea 91). Una vez clara la posición top para cada caso, se ejecuta el scroll animado mediante la función de jquery animate(), en la que se usa la propiedad 'top' del objeto 'posicion', con un efecto de aceleración easeinoutcubic en 2 segundos. b) marcar los botones del menú La función marcarbotones() está pensada para ser capaz de marcar los botones ante cualquier movimiento del scroll, en lugar de que sea tan solo el acto de marcar los botones por hacerles clic, ya que esto último no sirve para marcar los botones si se usa directamente el scroll del mause o de la barra al costado derecho de la ventana del navegador. Para lograr lo mencionado, la función marcarbotones() se activa ante el evento scroll en la ventana, es decir: $(window).scroll(function(){...}). De esta forma todo lo que pasa dentro de la función estará ejecutándose constantemente mientras se esté moviendo de cualquier forma el scroll (desde el mause, desde la barra de la ventana o desde el scroll animado que se ejecuta desde los botones). Definiremos una zona, como toda el área de la página correspondiente a un tema relacionado con su respectivo botón, el cual deberá mantenerse con el color marcado mientras el scroll esté atravesando por dicha zona; el límite de cada zona comienza con su correspondiente ancla y termina con el ancla de la siguiente zona o con el fin de la página en el caso de la última zona, que es la del botón 'Planifica'. Usando el objeto jquery $botonesnav que contiene a los botones del menú y que es el mismo usado en la función anterior, se hace un bucle con la función each() para recorrer los 4 botones haciendo lo

4 siguiente en cada iteración para cada botón: 1) sacarle el valor del atributo 'href' para saber el nombre del ancla correspondiente a la posición donde se inicia una zona; 2) determinar la posición top donde se inicia cada zona, es decir donde comienza su correspondiente ancla id, que se llama como el valor del href del correspondiente botón; 3) guardar dicha posición, en orden por cada vuelta del bucle, dentro del arreglo zonas[], instanciado antes del bucle con 4 casillas (var zonas=new Array(4)), el cual almacenará los inicios de las 4 zonas en términos de su distancia en pixeles con el inicio de la página; y 4) similar a cómo se van guardando los inicios de las zonas en el arreglo zonas[], se deberán ir guardando los nombres de las anclas en el arreglo anclas[], también instanciado con 4 celdas antes del bucle y que será usado posteriormente en las condiciones finales. Una vez obtenidos todos los datos del bucle y guardados en los arreglos ya mencionados, se remueve la clase 'activo' para que todos los botones se reseteen a su estado inactivo, es decir sin el color rojo y, posteriormente, se arma una estructura de condicionales if y else if que va demarcando las zonas, una zona en cada condicional. La variable 'scrolltop', creada en la primera línea de la función anónima dentro del evento scroll, mediante la propiedad 'pageyoffset' del objeto 'window', contiene en todo momento la posición vertical por donde va pasando el límite superior de la parte visible de la página; por lo tanto las condiciones simplemente evalúan para cada movimiento del scroll, si el límite superior de la parte visible de la página va pasando o no entre los límites de una determinada zona. Si se pasa por dentro de una determinada zona, entonces, mediante los nombres de ancla, guardados en el arreglo ancla[] y en combinación con los correspondientes selectores, se le añade la clase 'activo' al correspondiente botón para que esté marcado rojo mientras se pasa por su respectiva zona y hasta que se comience a pasar por otra zona.

5 Parallax Dentro de $(document).ready el método 'addeventlistener' del objeto 'window' detecta el evento scroll y llama a una función de parallax, junto con ejecutar requestanimationframe para hacer más pareja la animación ( Posteriormente en la función parallax se guarda en la variable 'imagen' al contenedor de las imágenes del slider, que es un div #elementoparallax. También se guarda en la variable 'scrolltop' a la propiedad 'pageyoffsett' del objeto 'window' (window.pageyoffset). Con estos datos se le entrega a la propiedad 'top' del objeto 'estilo' del elemento seleccionado (imagen.style.top) la distancia de scrolltop multiplicada por 0.5, con lo cual en la medida que se baje con el scroll se producirá el movimiento más lento de esas imágenes respecto al resto de los elementos, lo cual, en definitiva, es el efecto parallax. Slideshow de imágenes en el banner Lo primero que hace la función generarslideshow() es averiguar con la función size() cuántas imágenes hay disponibles para la galería. Estos datos servirán más adelante para que en la función moverslideshow() se pueda saber cuándo volver a empezar desde el principio con el proceso que se describirá más adelante, pero también sirve para que en la misma función generarslideshow() se decida con una condición si iniciar o no el slideshow, ante la posibilidad que exista una sola imagen (suponiendo un sitio autogestionable en que el administrador dejó un solo banner) y entonces no tenga sentido comenzarlo. En caso que exista más de una imagen la condición ejecutará en su interior un reordenamiento de las posiciones de las distintas imágenes para que

6 posteriormente dicho orden sea usado por la función moverslideshow(). El reordenamiento consiste en quitarle a todas las imágenes la clase 'sinjs', cuya principal utilidad es que no sea necesario poner las propiedades 'top' y 'left' en el selector ".banner img" que causaba conflictos con las posteriores clases 'escondido' y 'visible' cuando el navegador no reconocía las propiedades 'top' y 'left' de estas clases y, al contrario, seguía imponiendo las propiedades 'top' y 'left' del selector '.banner img' (seguramente por una mayor especificidad de '.banner img' frente a una clase sola), impidiendo el correcto funcionamiento de los movimientos de la galería. Por lo anterior, simplemente poniendo dichas propiedades en la clase 'sinjs' y pudiendo sacar dicha clase al iniciar el slideshow, le dejamos libertad a las clases 'escondido' y 'visible' para que tomen todo el control de las propiedades 'top' y 'left', permitiendo los movimientos deseados de las imágenes. Posteriormente se concluye este reordenamiento dándole a la primera imagen de la lista la clase 'visible' y a las demás imágenes la clase 'escondido'. Finalmente se llama a la función moverslideshow(), que básicamente irá moviendo a lo largo de la lista de imágenes la clase 'visible', dejando a las demás escondidas y generándose de esta forma el movimiento del slideshow. Posteriormente pasamos a la ejecución de la función moverslideshow(), la cual recibe el argumento cantidadimg para saber cuándo se ha llegado a la última imagen y poder recomenzar el movimiento desde la primera imagen. La función comienza con un contador que se irá incrementando en cada ejecución del setinterval y se reseteará al valor 1 al llegar a la última imagen. Dentro de cada ejecución de setinterval hay una condicional que es para aplicar los selectores y funciones correctas según si estamos pasando por cualquier imagen que no sea la última (if(contador<cantidadimg){...}), o si estamos pasando por la última imagen de la lista (else if(contador==cantidadimg){...}). Si entramos a lo

7 que se ejecuta en el primer caso, lo que se hace es guardar en el objeto jquery $actual a la imagen que en ese momento preciso cuenta con la clase 'visible': (var $actual=$imagenslider.parent().find('.visible')). Teniendo seleccionada dicha imagen debemos seleccionar la siguiente con $actual.next() y a esa imagen le alternamos sus clases, es decir le sacamos la clase 'escondido' y le agregamos la clase 'visible', junto con quitarle la clase 'visible' al objeto jquery $actual y reemplazársela por 'escondida'. Pero esto último se hace de una manera que hay que explicar con mayor detalle: este cambio de clases se hace con la función switchclass(), que tiene la gracia de ser capaz de animar la transición entre una clase y otra. De esta forma las propiedades css de una clase cambiarán animadamente en el tiempo hacia las propiedades css de la clase que la reemplaza. Para que la función switchclass funcione es necesario estar conectado a jquery UI. Además, en el quinto parámetro de la función switchclass() hay una función callback, es decir una función que se ejecuta una vez lista la animación, y en esa función se ejecutan sobre $actual las funciones removeclass y addclass para volver a dejar esa imagen escondida, una vez que ya haya terminado de ser tapada por la imagen que con la animación de switchclass() se va a haber acabado de posicionar (en un sentido visual) como la actual. Posteriormente se le suma 1 al contador. En el caso de estar en la última imagen (la otra opción de la condición ya mencionada), se hace exactamente lo mismo ya descrito, con la sola diferencia que la siguiente imagen a la que se le asigna la transición de clases con switchclass, ya no es la ".next()", sino que la ".first()", para volver a la primera de la lista y el contador no aumenta en 1, sino que vuelve a su valor inicial 1 para empezar todo desde el comienzo. Botones animados

8 El objeto jquery $botonanimado contiene a ambos botones que serán animados mediante la función hover(), es decir, al posar el cursor sobre el botón y al retirarlo. La función hover() de jquery tiene en su primer parámetro una función para el evento on mause over y, en su segundo parámetro, otra función para el evento on mause out. Para on mause over se guarda en la variable 'imagenboton' el valor contenido dentro del atributo 'data-tipo' para saber si se trata del botón de barrios o de hoteles y así poner ese valor en la cadena de texto de la ruta de la imagen dentro del parámetro que le asigna el valor a la propiedad 'background-image' dentro de la función css(). Así se cambia el color del botón de gris a rojo al cambiar la imagen de fondo antes de comenzar con la animación. Luego de esto comienza la función animate() que aumenta el background-size y luego con una función callback vuelve a ejecutar la función css() para que una vez que se haya agrandado la imagen de fondo vuelva al original color gris y no interfiera la lectura del texto. Posteriormente, para on mause out, simplemente con la función animate() se vuelve al tamaño original de la imagen. Juan Enrique Meyer Lopetegui