Código js para averiguar si tenemos activada la tecla «Bloq Mayus» en nuestro teclado, la cual activa el uso continuo de las letras mayúsculas, y puede que en algunos casos eso no nos interese. Un ejemplo en un input password: […]

Podemos usar la regla @media con pointer: coarse de css para detectar dispositivos con pantallas táctiles como pueden ser tablets o smartphones y en ese caso aplicar los estilos que necesitemos dentro. Un ejemplo: @media (pointer: coarse) { /* tus […]

Ejemplo CSS si quieres usar varias veces la pseudoclase :not() para un único selector que tiene diferentes atributos. input:not([type="radio"]):not([type="checkbox"]){ background: red; } div:not(.inner):not(.wrapper){ background: blue; }

CSS: efecto Marquee

Un ejemplo para conseguir un bonito efecto marquee usando solo CSS. Básicamente lo conseguimos repitiendo un par de veces el texto en el html, y usando una animación infinita CSS con translateX para mover el contenedor horizontalmente de inicio a […]

Ejemplo javascript para calcular el número de veces que pulsamos una determinada tecla de nuestro teclado usando el evento onkeyup y keyCode para obtener la tecla correspondiente. En el siguiente ejemplo vamos a contar el nº total de veces que […]

Si tienes un video html5 con autoplay y no se reproduce automáticamente en dispositivos iOS táctiles (iphone / ipad) comprueba que tenga los siguientes 3 atributos autoplay, muted y playsinline, ejemplo: <video width="320" height="240" autoplay muted playsinline> <source src="tu-video.mp4" type="video/mp4"> […]

Vanilla JS: on load

A continuación un par de formas de comprobar en JavaScript cuando se ha cargado la página completamente. Si quieres saber cuando se carga toda página, incluido su html, imágenes, css, js… puedes usar alguno de estos 2 códigos js: window.addEventListener('load', […]

Para clonar un determinado elemento/s es muy sencillo usando el método cloneNode() de javascript, con el cual puedes clonar solo el elemento padre o tmabien los hijos que tenga este. Clonar solo el elemento «padre» const clonar = document.querySelector('.mi-elemento').cloneNode(); Clonar […]

Ejemplo de cómo reproducir automáticamente videos en html5 automáticamente al scrollear usando IntersectionObserver en javascript. De esta forma recorreremos todos los elementos video que haya en la página y observaremos cuando están visibles al hacer scroll para reproducir/pausar de forma […]

Solo 2 simples pasos para ocular la insignia del reCAPTCHA v3 de Google. Esta puede llegar a ser muy intrusiva en el diseño de nuestra web, especialmente en versiones móviles ocupando la parte inferior derecha de la pantalla. Para poder […]