Los códigos más votados de JQuery

Listado de los códigos más votados desde su publicación.
Imágen de perfil
Val: 389
Oro
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

Ejemplo de utilizar jquery con un select


JQuery

estrellaestrellaestrellaestrellaestrella(3)
Publicado el 19 de Febrero del 2013 por Xavi (530 códigos)
60.252 visualizaciones desde el 19 de Febrero del 2013
Código que muestra como utilizar jquery con un <select>. Muestra como seleccionar, activar y desactivar una opción, y validar que haya una opción seleccionada.
Imágen de perfil
Val: 389
Oro
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

Efecto lupa al pasar el ratón por encima de una imagen


JQuery

estrellaestrellaestrellaestrellaestrella(3)
Actualizado el 21 de Junio del 2019 por Xavi (530 códigos) (Publicado el 31 de Octubre del 2013)
19.571 visualizaciones desde el 31 de Octubre del 2013
Simple código que muestra como mediante jquery se puede visualizar el zoom de una imagen al ir pasando el ratón por encima.

zoom-imagen
Imágen de perfil
Val: 389
Oro
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

Mantener siempre visible el menú en la parte superior al hacer scroll con html5 y jquery


JQuery

estrellaestrellaestrellaestrellaestrella(3)
Publicado el 18 de Diciembre del 2013 por Xavi (530 códigos)
22.461 visualizaciones desde el 18 de Diciembre del 2013
Código que muestra como mantener siempre visible un menú en la parte superior de la pantalla al hacer un scroll.
Imágen de perfil
Val: 389
Oro
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

Código que muestra como enviar un valor de un input a una pagina en php mediante jquery


JQuery

estrellaestrellaestrellaestrellaestrella(2)
Publicado el 4 de Julio del 2012 por Xavi (530 códigos)
11.582 visualizaciones desde el 4 de Julio del 2012
Simple código que muestra como enviar desde un formulario en HTML mediante JQUERY el valor de un input a un archivo php y devolver un resultado.
Imágen de perfil
Val: 401
Oro
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

Cambiar el color de una columna al seleccionar un checkbox


JQuery

estrellaestrellaestrellaestrellaestrella(2)
Publicado el 25 de Abril del 2017 por Xve (281 códigos)
4.527 visualizaciones desde el 25 de Abril del 2017
Este código de ejemplo, muestra como seleccionar toda una fila de una tabla y cambiarla de color según si el checkbox de la fila esta seleccionado o no.

checkbox-selecciona-fila-tabla
Imágen de perfil
Val: 401
Oro
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

Simular la pulsación de la tecla Enter


JQuery

estrellaestrellaestrellaestrellaestrella(2)
Publicado el 1 de Septiembre del 2017 por Xve (281 códigos)
6.740 visualizaciones desde el 1 de Septiembre del 2017
Este simple código, muestra como generar la pulsación de una tecla desde código
Imágen de perfil
Val: 23
Ha aumentado 1 puesto en JQuery (en relación al último mes)
Gráfica de JQuery

Cambiar de color de las celdas según el contenido


JQuery

estrellaestrellaestrellaestrellaestrella(2)
Publicado el 21 de Noviembre del 2017 por Miqi666
6.056 visualizaciones desde el 21 de Noviembre del 2017
Este código marca las filas de diferente color segun el texto del contenido de una des sus filas.
El código de abajo es un ejemplo de como funciona, es muy sencillo ojala les sirva....

color-segun-contenido
Imágen de perfil
Val: 169
Plata
Ha disminuido 1 puesto en JQuery (en relación al último mes)
Gráfica de JQuery

Cronómetro jQuery


JQuery

estrellaestrellaestrellaestrellaestrella(2)
Publicado el 26 de Abril del 2018 por Santi (5 códigos)
2.954 visualizaciones desde el 26 de Abril del 2018
cronometro

cronometro-jquery


Cronómetro creado con jQuery muy sencillo.

Demo -> http://webcamp.es/ejemplos/cronometro/

No tiene mucha más explicación.

Haz lo que quieras con el código ;)
Imágen de perfil
Val: 389
Oro
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

Mostrar imagenes


JQuery

estrellaestrellaestrellaestrellaestrella(1)
Actualizado el 9 de Septiembre del 2017 por Xavi (530 códigos) (Publicado el 3 de Octubre del 2012)
13.422 visualizaciones desde el 3 de Octubre del 2012
Simple código que muestra un listado de imágenes en tamaño pequeño (thumbnails), y al pulsar sobre cada una de ellas, se visualiza dicha imagen en grande con una cruz para poder cerrarla.

listado-imagenes-1

listado-imagenes-2
Imágen de perfil
Val: 389
Oro
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

Secuencia de imágenes


JQuery

estrellaestrellaestrellaestrellaestrella(1)
Actualizado el 19 de Octubre del 2015 por Xavi (530 códigos) (Publicado el 4 de Octubre del 2012)
7.623 visualizaciones desde el 4 de Octubre del 2012
Código que permite mostrar una capa para visualizar una secuencia de imágenes pulsando en las flechas de derecha e izquierda para ir moviéndote entre todas las imágenes.

jquery-secuenda-imagenes
Imágen de perfil
Val: 389
Oro
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

doble click para hacer un link


JQuery

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 18 de Octubre del 2012 por Xavi (530 códigos)
6.624 visualizaciones desde el 18 de Octubre del 2012
Sencillo código que muestra como ir a un enlace haciendo doble click con el ratón.
Imágen de perfil
Val: 389
Oro
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

Mostrar un mensaje al pulsar el botón derecho de ratón


JQuery

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 15 de Junio del 2013 por Xavi (530 códigos)
6.378 visualizaciones desde el 15 de Junio del 2013
Código que muestra un alert al pulsar el botón derecho del mouse
Imágen de perfil
Val: 389
Oro
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

Ejemplo de seleccionar una fecha con jquery-ui (datepicker)


JQuery

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 21 de Febrero del 2014 por Xavi (530 códigos)
19.258 visualizaciones desde el 21 de Febrero del 2014
Ejemplo de la utilización de datepicker de jquery-ui para seleccionar una fecha dada.
Imágen de perfil
Val: 389
Oro
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

Ejemplo de carga del contenido de la pagina a medida que baja el scroll del navegador


JQuery

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 13 de Marzo del 2014 por Xavi (530 códigos)
8.754 visualizaciones desde el 13 de Marzo del 2014
Código que muestra como ir recargando el contenido de la página a medida que se va llegado al final de la misma.
En este ejemplo se va añadiendo texto, pero se puede añadir imágenes, contenido a través de ajax, etc...
Imágen de perfil
Val: 389
Oro
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

Como poner un botón para subir al inicio de nuestra página


JQuery

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 23 de Julio del 2014 por Xavi (530 códigos)
4.080 visualizaciones desde el 23 de Julio del 2014
Este código añade un botón en la parte inferior de la página cuando se desplaza la barra vertical del navegador (scroll) hacia abajo. Ese botón, nos permite con un simple efecto animado, subir al inicio de la página cuando es pulsado.
Imágen de perfil
Val: 389
Oro
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

Recortar el texto de un div para posteriormente permitir visualizarlo


JQuery

estrellaestrellaestrellaestrellaestrella(1)
Actualizado el 11 de Diciembre del 2019 por Xavi (530 códigos) (Publicado el 3 de Septiembre del 2014)
4.672 visualizaciones desde el 3 de Septiembre del 2014
Código que dada una cadena superior a 100 caracteres, la recorta y añade al final del mismo un texto de "(más)" para mostrar todo el contenido nuevamente. De igual forma, aparece el texto "(menos)" al final para recortarlo posteriormente.

El funcionamiento del mismo, es que se guardan las cadenas de texto en un array de valores de javascript, para de esta manera, poder visualizar nuevamente todo el contenido.

recortar-texto-div
Imágen de perfil
Val: 401
Oro
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

Reloj mientras se esta cargando la página


JQuery

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 22 de Octubre del 2014 por Xve (281 códigos)
5.786 visualizaciones desde el 22 de Octubre del 2014
Este código muestra una ventana en medio de la pantalla, la cual no desaparece hasta que se ha cargado el contenido entero de la pagina web.

carga_de_pagina


El funcionamiento es simple, al cargar la página muestra la capa y hace una petición AJAX para cargar el contenido de nuestra página. Una vez se recibe el contenido de nuestra página, se elimina el mensaje.
Imágen de perfil
Val: 401
Oro
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

Mover una capa o bloque al mover el scroll de la pagina


JQuery

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 16 de Diciembre del 2014 por Xve (281 códigos)
5.047 visualizaciones desde el 16 de Diciembre del 2014
Simple código que muestra como mover un bloque o capa al deslizar el scroll de la pantalla, para que siempre este visible.
En este ejemplo con HTML5, es el <aside> el que baja o sube dependiendo del movimiento del scroll, pero puede ser cambiado a cualquier elemento de una página web.
Imágen de perfil
Val: 389
Oro
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

Juego del Simon


JQuery

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 18 de Febrero del 2015 por Xavi (530 códigos)
3.545 visualizaciones desde el 18 de Febrero del 2015
Este código simula el juego del "Simon" en el cual tienes que ir pulsando una combinación de colores que te va dando Simon. Cada vez que completas dicha secuencia, Simon te muestra la misma secuencia añadiendo un nuevo color cada vez, haciendo cada vez mas difícil de recordar.
En el momento que no pulsas la secuencia correcta de colores el juego finaliza mostrándote donde has fallado.
simon-jquery
Imágen de perfil
Val: 401
Oro
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

Seleccionar y de-seleccionar todos los elementos de un select


JQuery

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 22 de Enero del 2015 por Xve (281 códigos)
12.522 visualizaciones desde el 22 de Enero del 2015
En este ejemplo, muestro como pulsando un botón, se pueden seleccionar o de-seleccionar todos los <option> de un <select>
Imágen de perfil
Val: 401
Oro
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

Como poner una viñeta de información al lado de un formulario


JQuery

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 23 de Marzo del 2015 por Xve (281 códigos)
4.526 visualizaciones desde el 23 de Marzo del 2015
Este código, muestra como visualizar una viñeta de información al lado de un input type=text cuando recibe el foco del cursor.
También se muestra una viñeta de error cuando el campo esta vació.

vineta

vineta-con-errores
Imágen de perfil
Val: 401
Oro
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

Cuando se han pulsado dos enlaces, habilita un tercer enlace


JQuery

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 18 de Mayo del 2015 por Xve (281 códigos)
1.658 visualizaciones desde el 18 de Mayo del 2015
Este simple código, tienes escondido un enlace, el cual no aparece hasta que se ha pulsado dos veces en otros enlaces.
Imágen de perfil
Val: 401
Oro
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

Slider a pantalla completa


JQuery

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 2 de Julio del 2015 por Xve (281 códigos)
5.481 visualizaciones desde el 2 de Julio del 2015
Aquí os adjunto un simple slider, con lo básico, que rota unos divs con imágenes, textos, y el contenido que se desee. Este slider, esta pensado para poner al principio de la pagina, ya que ocupa el navegador por completo. Al adaptarse al navegador es responsive.

slider


Solo tienes que añadir los div's que desees y automáticamente añadirá el selector y rotara dichos divs con su contenido
Imágen de perfil
Val: 401
Oro
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

Calculo para el sistemas de numerología en JavaScript


JQuery

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 26 de Marzo del 2015 por Xve (281 códigos)
4.716 visualizaciones desde el 26 de Marzo del 2015
Aquí he desarrollado un código con javascript y jquery donde realizo un calculo de numerología.

Este calculo, lo que hace es:

1.- Sumar las letras de tu nombre en relación a la tabla:
1
2
3
4
1 2 3 4 5 6 7 8 9
a b c d e f g h i
j k l m n o p q r
s t u v w x y z

Donde si tu nombre es "jose", tus valores numéricos son: 1 6 1 5 que sumados son: 13 que sumados son 4

2.- sumar los valores de tu fecha de nacimiento para devolver un valor numérico. Si ese valor números es superior a 10, se suman los dígitos del resultado.
Ejemplo: 27/9/1970 = 35 = 8
Imágen de perfil
Val: 401
Oro
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

Introducir un url y habilitar un botón que abra dicha página


JQuery

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 28 de Diciembre del 2015 por Xve (281 códigos)
2.212 visualizaciones desde el 28 de Diciembre del 2015
Este simple código, muestra como permite añadir varias direcciones de Internet en diferentes cuadros de texto, y habilita un botón para abrir dicha página si la dirección es correcta.

habilitar-boton-al-introducir-una-direccion-de-internet
Imágen de perfil
Val: 401
Oro
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

Visualizador de imagenes para móvil


JQuery

estrellaestrellaestrellaestrellaestrella(1)
Actualizado el 16 de Mayo del 2016 por Xve (281 códigos) (Publicado el 13 de Mayo del 2016)
1.668 visualizaciones desde el 13 de Mayo del 2016
Este código que utiliza la librería hammer.js, permite detectar el movimiento del dedo en dispositivo móvil, por lo que podemos hacer una animación para pasar las fotos con el dedo.

Este código coge las imágenes que se encuentran en la carpeta "images/" de la web, y las va mostrando según las vamos pasando con el dedo.

En cada movimiento de la imagen, se realiza una petición AJAX al servidor, para obtener la siguiente y anterior imagen para el siguiente movimiento del dedo, ya sea hacia adelante o hacia atras.
Imágen de perfil
Val: 243
Plata
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

Enviar formularios independientes en jquery


JQuery

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 6 de Agosto del 2016 por Vainas
1.711 visualizaciones desde el 6 de Agosto del 2016
Si tienes varios formularios en una web y quieres subir cada uno independientemente. Es solo agregar una clase a todos los formularios y utilizar dentro del submit el elemento this para obtener el formulario y despues usar serialize o serializeArray para obtener los valores de inputs dentro de mismo.

Dejo el codigo funciona aqui: https://jsfiddle.net/p8ch3uka/
Imágen de perfil
Val: 401
Oro
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

Contar los checkbox seleccionados y poner un limite


JQuery

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 19 de Agosto del 2016 por Xve (281 códigos)
14.495 visualizaciones desde el 19 de Agosto del 2016
Este código es un ejemplo para ver como limitar el numero de checkbox seleccionados en un formulario.
Permite especificar el número máximo de checkbox que se permiten marcar, no dejando marcar mas de lo especificado.
Imágen de perfil
Val: 12
Ha aumentado su posición en 2 puestos en JQuery (en relación al último mes)
Gráfica de JQuery

Cubo de rubik


JQuery

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 12 de Enero del 2017 por Diego (2 códigos)
2.019 visualizaciones desde el 12 de Enero del 2017
CoboDos
CuboUno

Es un diseño del cubo_rubik personalizado y donde se puede jugar con el cubo en movimiento como si fuera real fisicamente.
¿haber que os parece?.
Imágen de perfil
Val: 401
Oro
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

Cuenta atras con barra de progreso con JQuery


JQuery

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 27 de Noviembre del 2018 por Xve (281 códigos)
1.673 visualizaciones desde el 27 de Noviembre del 2018
Este código realiza una cuenta atrás utilizando "animation" de CSS para mostrar la barra de progreso y jquery para mostrar los valores a cada segundo.

Actualmente la cuenta atrás va de 10 a 0, pero si se desea modificar, se debe modificar la variable "contador" de js y el estilo "animation" de CSS poniendo en los dos lados el mismo valor.

La cuenta atrás, es iniciada desde jquery a los 500 milisegundos de cargar la pagina.

Se especifica la anchura de la barra en la case "meter" de css.

Una vez finalizado el tiempo, se ejecuta la función de js finalCuantaAtras() para poder ejecutar cualquier proceso.

cuenta-atras-barra-de-progreso