Archivo de la categoría: JavaScript

Todo lo relacionado con la programación con JavaScript

Comprobar si existe un elemento en un Array con jQuery

Si queremos comprobar si existe un elemento en un array de Javascript podemos usar el método .inArray() de jQuery. Este método es muy parecido a la función indexOf().

Este metodo devuelve -1 cuando no encuentra el elemento y el numero de indice si lo encuentra. Hay que tener en cuenta que este método devuelve 0 si detecta el primer elemento del array, por eso a la hora de realizar la función es conveniente no hacer la comparación con verdadero o falso, y hay que hacerla con -1. Podemos usar un ultimo parámetro si queremos comprobar la existencia de ese valor en ese indice, si existe devuelve 1, si no existe devuelve 0.

Uso: $.inArray(valor, array [,indice])

var colores = ['Azul', 'Rojo', 'Verde', 'Amarillo'];
$.inArray('Verde', colores); //devuelve 2
$.inArray('Azul', colores); // devuelve 0
$.inArray('Rojo', colores, 1); // devuelve 1
$.inArray('Rojo', colores, 2); // devuelve -1
$.inArray('Morado', colores);// devuleve -1

Mas Info: https://api.jquery.com/jQuery.inArray/

Anuncio publicitario

Animaciones de Hide y Show con jQuery

Uno de los efectos a la hora de distribuir el contenido dentro de una pagina web es el de ocultar y mostrar, el .show() y el .hide() de jQuery. Este efecto, a mi modo de entender, queda mas visual si le aplicamos un efecto con jQuery UI. Una manera simple de aplicar estos métodos con efecto es el uso de .slideUp() y .fadeOut() para ocultar y .slideDown() y .fadeIn() para mostrar.

El slideUp() lo que hace es ocultar el contenido con un efecto que hace subir el texto hacia el párrafo superior ocultándose, y slideDown() hace aparecer el texto por debajo del párrafo superior.

El .fadeIn() lo que hace es desvanecer el contenido y el fadeOut() lo contrario.

A estos 4 métodos le podemos pasar como parámetro el tiempo en milisegundos que queremos que dure este, o bien slow, normal, fast, o no pasarle ningún parámetro para que lo haga a velocidad normal. Os dejo un ejemplo con estos 4 efectos

https://jsfiddle.net/rubenlacasa/fw5x54qo/

Mas Info: http://api.jquery.com/category/effects/

Crea libros de programación y ejercicios con GitBook

Este es un proyecto con el cual podemos crear nuestros libros de cursos de programación o webs con ejercicios. Os recomiendo que veais el ejemplo de curso de Javascript

ScrollMagic – Plugin de jQuery de efectos para el scroll

Estoy deseando poder empezar un proyecto en el cual pueda encajar este plugin, el cual, nos permite realizar efectos de animación según avanzamos en nuestra pagina web. No os perdáis la pagina de demostración del plugin.

http://janpaepke.github.io/ScrollMagic/

20 Plugins Tipograficos jQuery

Os dejo aquí un enlace de la web de speckyboy en la cual hay un recopilatorio con 20 plugins de jQuery para aplicar efectos, controlar como van a mostrarse las fuentes en otros dispositivos y como se van a alinear estas.

http://speckyboy.com/2014/02/10/jquery-typography-plugins

 

CodePen – Comparte tus ejemplos HTML CSS JS

CodePen es un editor HTML, CSS y Javascript en nuestro navegador el cual nos permite generar vistas previas de nuestros ejemplos, ademas podemos compartir estos. Aparte de esto es también una red social y colaborativa de proyectos y nos permite probar nuestros desarrollos en distintos dispositivos.

http://codepen.io

jQuery Geocoding y Places Autocomplete Plugin

Gracias a este plugin vamos a poder usar el api de google places de una manera mas sencilla de lo habitual. Tiene opciones de solo autocompletar, para poder tener las direcciones bien formateadas, y tiene la opción de poder visualizar en el mapa la dirección que le pasemos. Una autentica maravilla.

http://ubilabs.github.io/geocomplete/

jQuery-lifestream – El listado de tu vida en internet

Con este plugin de jQuery podemos generar un listado de toda nuestra vida en internet en un montón de redes sociales. Si queréis probarlo y ver todas vuestras menciones y entradas en las redes sociales ir a http://christianv.github.io/jquery-lifestream/me/ y poner vuestro usuario en las distintas redes y darle a generar.

jQuery Lifestreamhttps://github.com/christianv/jquery-lifestream

 

Fotorama: Galeria de imágenes con jQuery

He encontrado esta galeria fotografica basada en jQuery muy buena, muy personalizable y fácil de configurar

http://fotorama.io

Javascript basico para impacientes

Siguiendo con la linea de los tutoriales, he encontrado este para los que quieran aprender Javascript de una manera rápida y sencilla.

http://www.2ality.com/2013/06/basic-javascript.html