Foros del Web » Programando para Internet » Javascript »

elemento visible

 Estas en el tema de elemento visible en el foro de Javascript en Foros del Web. quisiera saber como hacer para saber cuando un elemento esta siendo visto por el explorador espero que se entienda tb quedo atento a su respuesta, ...
  #1 (permalink)  
Antiguo 04/03/2012, 16:44
 
Fecha de Ingreso: septiembre-2008
Mensajes: 242
Antigüedad: 15 años, 7 meses
Puntos: 3
elemento visible
quisiera saber como hacer para saber cuando un elemento esta siendo visto por el explorador

espero que se entienda tb quedo atento a su respuesta, trate con los ejes x e y del elemento pero no llegue a nada eso pues gracias...
  #2 (permalink)  
Antiguo 04/03/2012, 20:26
Avatar de Naahuel  
Fecha de Ingreso: marzo-2011
Ubicación: localhost
Mensajes: 796
Antigüedad: 13 años, 1 mes
Puntos: 192
Respuesta: elemento visible
¿Te referís a cómo saber si un elemento determinado está dentro del area visible del navegador?

Yo tengo un script hecho por mi, para jQuery, que se encarga de esa tarea. Lo modifiqué para que lo entiendas. La idea es que un evento se dispare cuando el elemento está visible y cuando se pierde:

Código HTML: 
Ver original
  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <title>Prueba</title>
  5.     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  6.     <script type="text/javascript">
  7.         $(function(){
  8.             var elems = $('.estoy-visible');    //elementos que quiero saber si estan en el área visible
  9.             var winW = $(window).width();       //dimensiones de la ventana
  10.             var winH = $(window).height();      //dimensiones de la ventana
  11.             elems.each(function(){
  12.                 var self = $(this);
  13.                 self.on('esta/visible',function(){
  14.                     //evento personalizado que crearemos mas abajo, se dispara cuando el elemento está visible
  15.                     //lo que ponemos aca es lo que queremos hacer si el elemento aparece en pantalla
  16.                     $('#info').html('<p>Est&aacute; visible: '+$(this).text()+'</p>');
  17.                 });
  18.                 self.on('esta/invisible',function(){
  19.                     //evento personalizado que crearemos mas abajo, se dispara cuando el elemento está FUERA del area visible
  20.                     //lo que ponemos aca es lo que queremos hacer si el elemento DESAPARECE de la pantalla
  21.                     $('#info').html('<p>Se perdi&oacute;: '+$(this).text()+'</p>');
  22.                 });
  23.                 
  24.                 //obtenemos las dimensiones de cada elemento y su posicion
  25.                 var self_w = self.outerWidth(); //ancho exterior
  26.                 var self_h = self.outerHeight(); //alto exterior
  27.                 var self_l = self.offset().left; //coordenada izquierda
  28.                 var self_t = self.offset().top; //coordenada arriba
  29.                 
  30.                 //asignamos un evento a window.scroll(), para cuando se haga scroll
  31.                 //esta parte del script es algo inefectiva. No es bueno si son muchos los elementos a verificar.
  32.                 $(window).scroll(function(){
  33.                     var scroll_h = this.pageXOffset;
  34.                     var scroll_v = this.pageYOffset;
  35.                     //acá verificamos si el elemento está COMPLETAMENTE dentro de las dimensiones de la ventana
  36.                     if( (self_w + self_l - scroll_h) <= winW && (self_l) >= scroll_h &&
  37.                         (self_h + self_t - scroll_v) <= winH && (self_t) >= scroll_v ){
  38.                         self.trigger('esta/visible');
  39.                     }
  40.                     else{
  41.                         self.trigger('esta/invisible');
  42.                     }
  43.                 });
  44.             });
  45.         });
  46.     </script>
  47.     <style type="text/css">
  48.     <!--
  49.         #wrap{
  50.             height:4000px;
  51.             width:6000px;
  52.             position:relative;
  53.         }
  54.         
  55.         #info{
  56.             position:fixed;
  57.             top:0;
  58.             left:0;
  59.         }
  60.         
  61.         .estoy-visible{
  62.             background:blue;
  63.             width:200px;
  64.             height:200px;
  65.             position:absolute;
  66.             top:1000px;
  67.             left:2000px;
  68.         }
  69.     -->
  70.     </style>
  71.     
  72. </head>
  73. <body>
  74.     <div id="wrap">
  75.         <p id="info"></p>               <!-- párrafo SOLAMENTE para mostrar la info del elem 1-->
  76.         <div class="estoy-visible">Elemento 1</div> <!-- elemento que quiero saber si esta visible o no -->
  77.     </div>
  78. </body>
  79. </html>

Acá lo tenés funcionando JSBin: http://jsbin.com/ewatas

El script funciona muy bien y tiene una serie de aplicaciones. Tal vez se lo podría implementar en forma de plugin y optimizar para que no use tantos callbacks y eventos.

Espero entiendas cómo se lo aplica. Saludos.
__________________
nahueljose.com.ar
  #3 (permalink)  
Antiguo 04/03/2012, 20:28
Avatar de Naahuel  
Fecha de Ingreso: marzo-2011
Ubicación: localhost
Mensajes: 796
Antigüedad: 13 años, 1 mes
Puntos: 192
Respuesta: elemento visible
Una aplicación interesante es la de cargar imágenes (por ejemplo en una galería) sólo cuando pasan a estar visibles. Acá lo "emulo" usando fadeIn() y fadeOut(). Fijate cómo aparece y desaparece cuando se empieza a perder o a aparecer:

Código HTML: 
Ver original
  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <title>Prueba</title>
  5.     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  6.     <script type="text/javascript">
  7.         $(function(){
  8.             var elems = $('.estoy-visible');    //elementos que quiero saber si estan en el área visible
  9.             var winW = $(window).width();       //dimensiones de la ventana
  10.             var winH = $(window).height();      //dimensiones de la ventana
  11.             elems.each(function(){
  12.                 var self = $(this);
  13.                 self.on('esta/visible',function(){
  14.                     //evento personalizado que crearemos mas abajo, se dispara cuando el elemento está visible
  15.                     //lo que ponemos aca es lo que queremos hacer si el elemento aparece en pantalla
  16.                     $(this).fadeIn();
  17.                 });
  18.                 self.on('esta/invisible',function(){
  19.                     //evento personalizado que crearemos mas abajo, se dispara cuando el elemento está FUERA del area visible
  20.                     //lo que ponemos aca es lo que queremos hacer si el elemento DESAPARECE de la pantalla
  21.                     $(this).fadeOut();
  22.                 });
  23.                 
  24.                 //obtenemos las dimensiones de cada elemento y su posicion
  25.                 var self_w = self.outerWidth(); //ancho exterior
  26.                 var self_h = self.outerHeight(); //alto exterior
  27.                 var self_l = self.offset().left; //coordenada izquierda
  28.                 var self_t = self.offset().top; //coordenada arriba
  29.                 
  30.                 //asignamos un evento a window.scroll(), para cuando se haga scroll
  31.                 //esta parte del script es algo inefectiva. No es bueno si son muchos los elementos a verificar.
  32.                 $(window).scroll(function(){
  33.                     var scroll_h = this.pageXOffset;
  34.                     var scroll_v = this.pageYOffset;
  35.                     //acá verificamos si el elemento está COMPLETAMENTE dentro de las dimensiones de la ventana
  36.                     if( (self_w + self_l - scroll_h) <= winW && (self_l) >= scroll_h &&
  37.                         (self_h + self_t - scroll_v) <= winH && (self_t) >= scroll_v ){
  38.                         self.trigger('esta/visible');
  39.                     }
  40.                     else{
  41.                         self.trigger('esta/invisible');
  42.                     }
  43.                 });
  44.             });
  45.         });
  46.     </script>
  47.     <style type="text/css">
  48.     <!--
  49.         #wrap{
  50.             height:4000px;
  51.             width:6000px;
  52.             position:relative;
  53.         }
  54.         
  55.         #info{
  56.             position:fixed;
  57.             top:0;
  58.             left:0;
  59.         }
  60.         
  61.         .estoy-visible{
  62.             background:blue;
  63.             width:200px;
  64.             height:200px;
  65.             position:absolute;
  66.             top:800px;
  67.             left:300px;
  68.         }
  69.     -->
  70.     </style>
  71.     
  72. </head>
  73. <body>
  74.     <div id="wrap">
  75.         <p id="info"></p>               <!-- párrafo SOLAMENTE para mostrar la info del elem 1-->
  76.         <div class="estoy-visible">Elemento 1</div> <!-- elemento que quiero saber si esta visible o no -->
  77.     </div>
  78. </body>
  79. </html>
__________________
nahueljose.com.ar
  #4 (permalink)  
Antiguo 06/03/2012, 18:42
 
Fecha de Ingreso: septiembre-2008
Mensajes: 242
Antigüedad: 15 años, 7 meses
Puntos: 3
Respuesta: elemento visible
si a eso me refiero voy a ver tu codigo gracias

sigo a la espera de mas ayuda

Etiquetas: elemento, visible
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 21:32.