javascript & jquery: detectar cuando un div es visible al hacer scroll

fuente: https://oscargascon.es/como-detectar-con-jquery-si-un-elemento-por-su-posicion-es-visible-en-el-navegador/

Buenas a tod@s

Necesitaba hacer el tipico efecto de aparicion de un elemento DIV al hacer scroll, es decir; al ir bajando por la web para verla que cuando tenga que aparecer un div lo haga con algun efecto de aparicion … frase rara, lo se

Direis “hombre con animate.css por ejemplo, chupao” pues si, con animate.css puedes aplicar cualquier efecto de animacion a un div; pero lo guapo es que ese efecto se aplique cuando aparece en escena el div. Por poner un ejemplo, yo quiero hacerle un efecto al footer el cual esta abajo del todo de la web. Si no implementamos el siguiente codigo javascript + jquery pues le va a aplicar el efecto segun se cargue la web con lo que cuando lleguemos a ver el footer no vamos a ver ningun efectillo. Por mas que intento explicarme decentemente no lo consigo, asi que probar vosotros mismos este codigo y sabreis de lo que hablo xDD

 


function elementVisible(elem) {
var visible = true;
var windowTop = $(document).scrollTop();
var windowBottom = windowTop + window.innerHeight;
windowBottom = windowBottom - 400;
var elementPositionTop = elem.offset().top;
var elementPositionBottom = elementPositionTop + elem.height();
if (elementPositionTop >= windowBottom) {
visible = false;
}
return visible;
}

// invoco una función anónima en el evento scroll sobre window
$(window).on("scroll" ,function() {
let elem = $('#a1'); // obtengo el elemento por id

if(elementVisible(elem)){
elem.addClass('fadeInUp animated');
elem2.addClass('fadeInUp animated');
}

});

El codigo pertenece a Oscar Gascon, yo lo he modificado ligeramente disponible otro tipo de funcionalidades. Podeis ver el artículo original en la siguiente URL: https://oscargascon.es/como-detectar-con-jquery-si-un-elemento-por-su-posicion-es-visible-en-el-navegador/

Anuncios

HTML & CSS: DIV banner y texto desaparece por debajo del contenido web

Buenas a tod@s

Por exigencia del guion necesito hacer un banner o un slide de imagen + texto que al hacer scroll para ver el resto de la web se quede fijo en su posicion desapareciendo por debajo del resto del contenido de la web … frase rara lo se, mal explicado lo se tambien. Probar este codigo y entendereis por donde van los tiros y si alguno de vosotros sabe decirme como se llama esto os agradeceria eternamente que me lo dijerais!

CSS:


#main-header { /* banner que se quedara por debajo del contenido al hacer scroll */
	position:fixed; /* Hacemos que la cabecera tenga una posición fija */	
	z-index: 1;
}

#main-content{ /* contenedor principal */
	z-index: 9999;
	position:relative;
	}

HTML


<body>
        
<div id="main-header">BANNER + TEXTO</div>
	
<section id="main-content">BLA BLA BLA BLA</section>

</body>

Espero haberle servido de ayuda a alguien mas que a mi mala memoria, la proxima vez que me tope de nuevo con esta necesidad ya vengo a tiro fijo

Un saludo !

wordpress: Modificando el Loop de WordPress: query_posts() by guidacode.com

Buenas a tod@s

He añadido un scroll infinito con click en “leer mas” y debajo de los post muestro el resto de post de la categoria … pero me encuentro con el siguiente problema, cada vez que le doy a leer mas vuelve a empezar el bucle de cero y me muestra los mismos resultados de nuevo y no los siguientes

Esto es debido a que no tuve en cuenta que query_posts() debe prepararse para paginación o no … y lo estaba usando como si no tuviera paginacion

Resultados con paginacion:


<?php

$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;

query_posts("cat=$idioma&paged=$paged");

if(have_posts()):while(have_posts()):the_post();

?>

No me daba cuenta de mi error hasta que lei el artículo de anieto2k.com aqui: http://www.anieto2k.com/2008/08/13/query_posts-y-el-problema-de-la-paginacion/ me ha servido de mucha ayuda, muchas gracias !

wordpress: scroll infinito o Load More

Buenas a tod@s

Por exigencias ajenas a mi necesitaba un scroll infinito pero que fuera clickando y no automatico, es decir; cuando llegas al final de los posts visualizados que se carguen mas sin recargar la web pero solo si el usuario hace click

Gracias al plug-in Easy Load More en dos minutos lo tendremos preparado:

  • lo descargamos y lo instalamos
  • lo activamos y vamos a configuracion
  • en el primer campo nos solicita Post List Wrap Selector aqui debemos indicar el id del div que contiene el bucle que muestra los posts
  • guardamos y a continuacion vamos al php donde queremos agregar el boton load more
  • tenemos que incluir load_more_button(); entre las marcas de codigo php justo despues del cierre del contenedor o div donde esta el bucle

Yo lo he probado y funciona muy bien, ahora queda css y dejarlo bonito. Suerte!

Javascript – On Scroll Header / invocar evento al mover el scroll vertical

Buenas a tod@s

Este articulo se refiere a la posibilidad de realizar acciones derivadas del movimiento vertical del scroll … para entendernos mejor; yo tengo una cabecera (header) que mide de alto 100px y quiero que cuando el usuario desplace verticalmente la web para ver el contenido el header pase de 100px a 50. Pues gracias a este javascript podremos controlar este tema

Os dejo link del articulo completo y el codigo, a mi me ha servido de mucha ayuda –> https://www.w3schools.com/howto/howto_js_sticky_header.asp

Un saludo

wordpress: scroll infinito para paginar contenidos by ayudawp.com

UPDATE: no pierdas el tiempo en este post, no se que paso que te lleva a un enlace pa descargar un .js y no la carpeta del plugin. Vete a este otro post que he publicado que funciona perfecto: https://coudlain.wordpress.com/2018/12/20/wordpress-scroll-infinito-o-load-more/
wordpress: scroll infinito para paginar contenidos by ayudawp.com

fuente: https://ayudawp.com/scroll-infinito-en-wordpress/

fragmento del artículo, para ver completo ir a https://ayudawp.com/scroll-infinito-en-wordpress/

… no tienes que ir haciendo clic a enlaces del tipo de “página siguiente” sino que cuando llegas a bajo de una web esta se va extendiendo, mostrando más contenido, hasta el infinito …Hay un plugin, Infinite-Scroll, basado en jQuery, que nos ofrece exactamente esto. Solo hay que instalarlo y activarlo y ya tenemos scroll infinito en nuestro WordPress …