Para obtener el ancho o alto de la «ventana» actual en javascript, basta con usar el objeto window con la propiedad innerWidth para el ancho, y innerHeight para el alto: var ancho = window.innerWidth; var alto = window.innerHeight;
Simple código vanilla js para detectar si estamos scrolleando hacia arriba o hacia abajo usando el método addEventListener para detectar el scroll y getBoundingClientRect para conocer la posición. var scrollPos = 0; window.addEventListener('scroll', function(){ if ((document.body.getBoundingClientRect()).top > scrollPos) // ARRIBA […]
A continuación 5 formas diferentes de recorrer y interactuar con arrays en vanilla javascript: 1. Usando FOR: var ciudades = [ "León", "Zamora", "Salamanca" ]; for(var i = 0; i < ciudades.length; i++){ console.log(ciudades[i]); }; // "León", // "Zamora", // […]
Simular el efecto FadeIn de jQuery usando solo Vanilla JS. La siguiente función fadeIn() consta de 2 parámetros: elemento y duración (este ultimo opcional). function fadeIn(element, duration = 600) { element.style.display = ''; element.style.opacity = 0; var last = +new […]
Uno de los efectos que más use de jQuery fue la función de slideToggle(). A continuación he creado ese efecto de deslizamiento en Vanilla JS, re-utilizable para múltiples elementos en la misma página. He utilizado la clase «js-toggle» para asignar […]
Código javascript vanilla del método scroll() de jQuery para detectar el scroll sobre un determinado elemento. En el siguiente ejemplo vamos a detectar el movimiento del scroll sobre toda ventana del navegador. En jQuery veníamos usando: $(window).scroll(function(){ console.log('Estas scrolleando'); }); […]
Si buscas en como vanillear en javascript el método scrollTop() de jQuery para obtener la posición actual (eje Y) de la barra de desplazamiento vertical: En jQuery veníamos usando: var scrollTop = $(window).scrollTop(); Y en Vanilla JS sería: var scrollTop […]
Código javascript vanilla al uso de evento mousemove con jQuery, si queremos hacer algo cuando el puntero del ratón se mueva dentro de un determinado elemento, por ejemplo de toda la ventana. En jQuery veníamos usando: $(document).mousemove(function(event){ console.log('paso'); }); El […]
Para obtener en javascript el valor de cualquier atributo de un determinado elemento se usa el método getAttribute(). A continuación 2 ejemplo de uso: Ejemplo para obtener los valores de los atributo «src» y «data-fecha» del siguiente elemento: <img src="foto.jpg" […]
2 ejemplos para validar o detectar si un checkbox esta seleccionado (checek) usando vanilla javascript. 1. El ejemplo básico para saber si un checkbox esta seleccionado: var isChecked = document.getElementById('test').checked; if(isChecked){ alert('checkbox esta seleccionado'); } 2. Y si quieres detectar […]