Categoría: css

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

por coudlain, posted in css, html, Javascript

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

por coudlain, posted in css, html, Javascript, jquery

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

Height 100% métodos alternativos con CSS3 by @espaibarcelona

por coudlain, posted in css, html

fuente: https://www.espai.es/blog/2017/02/height-100-css/

Seguramente ya sabréis que para determinar el “tamaño” de un elemento en css podemos utilizar unidades como los píxeles, puntos, porcentajes o incluso em. Pero quizá no hayáis oído hablar de las unidades vh y vw.  Una unidad vh (viewport height) equivale a un 1% de la altura del viewport (el total de la pantalla del dispositivo que muestre nuestra web). 1vh = 1% del total de la pantalla, 100vh = 100%. Como os habréis imaginado, la unidad vw es el equivalente para el ancho.

Usando estas unidades podemos determinar una altura fullheight de la siguiente manera:

1
2
3
4
5
.fullHeight {
height: 100vh;
}

Leer artículo completo en ESPAI.ES

CSS: Alinear elementos en bootstrap4 by mialtoweb.es

por coudlain, posted in css

CSS: Alinear elementos en bootstrap4 by mialtoweb.es

fuente: http://mialtoweb.es/alinear-elementos-en-bootstrap4/

Gran artículo con unos cuantos ejemplos de utilizacion basica de maquetacion con bootstrap, os dejo un pequeño extracto que me ha servido de gran ayuda

En bootstrap 4 también podemos alinear elementos de forma vertical por medio de las clases align-items-[alineación] que nos permite ir alineando las filas según nos interese.

1
2
3
4
5
6
7
8
<div class="row align-items-center" style="height:300px; background: aquamarine">
    <div class="col-4">
        <p>Texto 1</p>     
    </div>
    <div class="col-4">
        <p>Texto 2</p>     
    </div>
</div>

Pero aún hay mas, ya que se puede alinear dentro de cada caja el contenido de forma vertical utilizando la clase align-self-[alienación]

1
2
3
4
5
6
7
8
9
10
11
<div class="row align-items-center" style="height:300px; background: aquamarine">
    <div class="col-4 align-self-start">
        <p>Texto 1</p>     
    </div>
    <div class="col-4 align-self-center">
        <p>Texto 2</p>     
    </div>
    <div class="col-4 align-self-end">
        <p>Texto 2</p>     
    </div>
</div>

ver articulo completo de mialtoweb.es aqui: http://mialtoweb.es/alinear-elementos-en-bootstrap4/

EJEMPLOS DE ENLACE «LEER MÁS» CON JQUERY Y CSS by estudionexos.com

por coudlain, posted in css, html, jquery

EJEMPLOS DE ENLACE «LEER MÁS» CON JQUERY Y CSS by estudionexos.com

fuente:  https://www.estudionexos.com/post/ejemplos-de-enlace-leer-mas-con-jquery-y-css/

Es habitual que en determinados casos nos soliciten que textos más o menos largos se presenten en forma abreviada con la posiblidad de desplegarlos completamente o volverlos a ocultar. En este gran artículo podras encontrar la manera de hacerlo usando jquery o usando solo CSS para evitar problemas de conflictos entre versiones de jquery que ya estes usando y la que necesitas par aeste ejemplo. Ver artículo completo aquí

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

por coudlain, posted in css, html, Javascript

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

por coudlain, posted in css, html, Javascript, jquery

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/