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: 302
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(2)
Publicado el 19 de Agosto del 2016 por Xve (294 códigos)
22.168 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: 23
Ha mantenido su posición 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
11.598 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: 293
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 (548 códigos) (Publicado el 3 de Octubre del 2012)
19.864 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: 293
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 (548 códigos) (Publicado el 4 de Octubre del 2012)
8.376 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: 293
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 (548 códigos) (Publicado el 3 de Septiembre del 2014)
7.249 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: 302
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 (294 códigos)
10.175 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: 302
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 (294 códigos)
5.900 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: 293
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 (548 códigos)
4.494 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: 302
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 (294 códigos)
6.424 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: 302
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 (294 códigos) (Publicado el 13 de Mayo del 2016)
2.330 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: 12
Ha mantenido su posición 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.688 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: 20
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

Menú vertical multinivel


JQuery

estrellaestrellaestrellaestrellaestrella(1)
Actualizado el 11 de Julio del 2021 por Marc (13 códigos) (Publicado el 18 de Junio del 2017)
5.695 visualizaciones desde el 18 de Junio del 2017
Menú vertical multinivel responsivo, que funciona gracias a la librería jQuery.

screenshot
Imágen de perfil
Val: 27
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
2.757 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: 302
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 (294 códigos)
3.169 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