Javascript: Detectar la aparición y desaparición de un div by Jasoft.org

Artículo publicado en JASOFT.ORG por José Manuel Alarcón

Gran publicación en la que nos facilitan una librería para poder detectar cuando cualquier elemento aparece en la región visible de la web o pantalla del usuario. Os dejo un pequeño extracto, para ver el articulo completo pulsa AQUI

Para conseguir algo así nos vendría muy bien disponer de un evento inViewport o similar que nos informase de cuándo un elemento aparece o desaparece de la parte visible de la página. Nos suscribiríamos a este evento y recibiríamos automáticamente notificaciones si el elemento aparece o desaparece.

JQUERY (javascript) CSS y HTML: igualar el alto (Height) de un DIV a otro

Buenas a todos

Tengo la tipica seccion de dos columnas (50%) donde la parte izquierda es una foto y la derecha es texto. La columna de texto es mucho mas alta, pero quiero que los divs esten igualados en altura al de la foto, para que en la parte del texto salga scroll

Con esta sencilla funcion que he tardado mas de dos horas en encontrar en google, y no entera si no cogiendo cachitos de aqui y cachitos de alli (por eso no indico fuente) podreis realizar lo que os cuento xDD


<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function() {

//alert('El alto del div es de: ' + $("#b4image").innerHeight() + 'pixels');
var newHeight2 = $("#b4image").innerHeight();
$("#b4text").height(newHeight2);

});

</script>

El alert es solo para comprobar que la funcion esta operativa

Lo que hace es igualar el alto del div con id b4text al de la imagen

Podria ser que el desencadenante de la funcion o “escuchador” document.ready pueda crear problemas al trabajar con imagenes por los tiempos de carga.

Hay otros desencadenantes o listeners que google os enseñara encantado xDD

javascript: funcion temporizador, ejecutar accion despues de x tiempo

buenas a tod@s

el titulo no me deja margen a explicar mas …


var timout;
function MiFuncionJS(){
timout=setTimeout(function(){
document.getElementById("headerslider").style.visibility="visible";
},500,"JavaScript");
}

donde 500 es medio segundo … se trata de una inicializacion de propiedad de un DIV. Cuando llamamos a la funcion tarda medio segundo en realizar la accion

HTML & CSS & Javascript: imagen en DIV con Efecto Parallax

HTML & CSS & Javascript: imagen en DIV con Efecto Parallax

fuente: http://www.falconmasters.com/web-design/efecto-parallax-sencillo/

Por aqui os dejo el javascript (necesita cargar libreria jquery)


$(document).ready(function(){
$(window).scroll(function(){
var barra = $(window).scrollTop();
var posicion = (barra * 0.80);
$('#paralax').css({'background-position': '0 -' + posicion + 'px'});
});
});

y este sera nuestro DIV


<div id="paralax" style="background-image: url(img/banner-2.jpg);background-repeat:repeat;background-attachment: fixed;height: 565px;width: 100%;background-size: cover;background-position:center;"></div>
});

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/

Javascript: calcular el tamaño de la ventana del navegador

Buenas a tod@s

Si necesitais saber que tamaño tiene la ventana del navegador (ancho y alto) para por ejemplo mostrar unos estilos CSS u otros con javascript porque por lo que sea con CSS no podeis … este es vuestro codigo:

 

function tamVentana() {
  var tam = [0, 0];
  if (typeof window.innerWidth != 'undefined')
  {
    tam = [window.innerWidth,window.innerHeight];
  }
  else if (typeof document.documentElement != 'undefined'
      && typeof document.documentElement.clientWidth !=
      'undefined' && document.documentElement.clientWidth != 0)
  {
    tam = [
        document.documentElement.clientWidth,
        document.documentElement.clientHeight
    ];
  }
  else   {
    tam = [
        document.getElementsByTagName('body')[0].clientWidth,
        document.getElementsByTagName('body')[0].clientHeight
    ];
  }
  return tam;
}

Un saludo

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