Vanilla JS

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, reutilizable para múltiples elemetos en la misma página. He utilizado la clase “js-toggle” para asignar […]

Leer más...

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'); }); […]

Leer más...

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 […]

Leer más...

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 […]

Leer más...

Para obtener en javascript el valor de un atributo de un determinado elemento se usa el método getAttribute(). A continuación 2 ejemplo de uso: Ejemplo para obtener el valor del atributo “src” de una imagen: <img src="foto.jpg" id="e1" /> document.querySelector('#e1').getAttribute('src'); […]

Leer más...

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 […]

Leer más...

A continuación el código vanilla javascript equivalente a las propiedades $(window).width() y $(window).height() de jQuery para obtener el ancho y alto de la ventana en pixeles. var w = window, d = document, e = d.documentElement, g = d.getElementsByTagName('body')[0], window_width […]

Leer más...

El código javascript document.body.scrollTop esta obsoleto por varios navegadores (chrome y ff), si te retorna siempre valor “0”, tienes que utilizar la síntaxis correcta. // Mal document.body.scrollTop // Bién document.documentElement.scrollTop

Leer más...

Vanilla JS: click

Método para ejecutar el evento “click” en javascript, usando vanilla js, sin frameworks… A continuación 2 ejemplos de ejecutar el evento click para un selector por id y para múltiples selectores por clase: // Ej. id="test" document.getElementById('test').addEventListener("click",function(){ alert("teststring"); }); // […]

Leer más...

Código Vanilla JS (JavaScript) equivalente a los métodos addClass(), removeClass() y toggleClass() de jQuery para añadir/quitar determinada/s clases css a un elemento. elemento + classList + método (add, remove, toggle) A continuación un par de ejemplos de añadir/quitar la clase […]

Leer más...