Foros del Web » Programando para Internet » Javascript »

Visualizar DIV cuando se termina el topic

Estas en el tema de Visualizar DIV cuando se termina el topic en el foro de Javascript en Foros del Web. Estaba navengando por internet y encontre esta web http://www.orangesoda.com/blog/the-f...-3-promotions/ la misma cuando se esta leyendo el topic o post, y al final de repente aparece ...
  #1 (permalink)  
Antiguo 17/08/2010, 12:04
Avatar de vicram10  
Fecha de Ingreso: enero-2009
Ubicación: Asuncion
Mensajes: 326
Antigüedad: 15 años, 10 meses
Puntos: 27
Visualizar DIV cuando se termina el topic

Estaba navengando por internet y encontre esta web

http://www.orangesoda.com/blog/the-f...-3-promotions/

la misma cuando se esta leyendo el topic o post, y al final de repente aparece unos social bookmarks arriba...

he buscado y ese efecto lo hace este script para WP http://www.orangesoda.com/blog/activ...for-wordpress/

Estoy tratando de hacer lomismo con la ayuda de este tutorial

http://lineadecodigo.com/jquery/carg...usando-jquery/

y interpretando el codigo que tiene el JS que el plugin de WP usa...

al final tengo este codigo

Código Javascript:
Ver original
  1. $(document).ready(function(){
  2.       document.getElementById("broken-facebook span.fb_share_no_count").removeClass('fb_share_no_count');
  3.     document.getElementById("broken-facebook span.fb_share_count_inner").html('0');
  4.                            
  5.     var status = 'closed';
  6.     var active_share_comment_marker = document.getElementById("active-share-comment-marker");
  7.     var as_share_window = document.getElementById("as-share-window");
  8.     var h = ((active_share_comment_marker.offsetTop)-($(window).height()/2));    
  9.     if (h < 200) { h = 200; }
  10.     $(document).scroll(function(){        
  11.         if ((($(window).scrollTop()) > h) && as_share_window.style.top == '-150px' && status == 'closed') {
  12.             as_share_window.style.top = '0px';
  13.             status = 'opened';
  14.         }
  15.         else if (($(window).scrollTop() < h) && as_share_window.style.top == '0px' && status == 'opened'){
  16.             as_share_window.style.top = '-150px';            
  17.             status = 'closed';
  18.         }  
  19.     });
  20. });

y en el template donde se visualiza los topicos (SMF) lo puse que solo se imprima este codigo

Código PHP:
Ver original
  1. <div id="active-share-comment-marker"></div>

una sola ves y lamisma se localiza al final del cuerpo del primer mensaje del topico (no en las respuestas)

este div lo que haces es activar el JS cuando la misma alcanza su poscion comparando con el scroll o mejor dicho cuando se esta haciendo con el scroll hacia abajo para leer el topic...

Pero nose que esta faltando o si en que parte estoy fallando por que no me lee o mejor dicho, no aparece, asi como el ejemplo de WP de esa pagina..

El div que contiene los Social Bookmarks o lo que uno quiere tiene esta estructura

Código PHP:
        <div id="as-share-window" style="width:90%; height: 100px; display: block; position: fixed; top: -150px; background-color: #000;z-index: 100;">
        <
div style="width: 800px; margin: 20px auto;">
                       
CONTENIDO
        
</div></div>; 
un ejemplo parecido, pero en ves de cargar datos que aparezca ese div es este

http://lineadecodigo.com/wp-content/...on-scroll.html

Alguna Sugerencia o idea??

Desde ya gracias
  #2 (permalink)  
Antiguo 17/08/2010, 13:12
Avatar de vicram10  
Fecha de Ingreso: enero-2009
Ubicación: Asuncion
Mensajes: 326
Antigüedad: 15 años, 10 meses
Puntos: 27
Respuesta: Visualizar DIV cuando se termina el topic

Me auto respondo, en el JS debo reemplazar

Código Javascript:
Ver original
  1. $(document).ready(function(){
  2.       document.getElementById("broken-facebook span.fb_share_no_count").removeClass('fb_share_no_count');
  3.     document.getElementById("broken-facebook span.fb_share_count_inner").html('0');
  4.                            
  5.     var status = 'closed';
  6.     var active_share_comment_marker = document.getElementById("active-share-comment-marker");
  7.     var as_share_window = document.getElementById("as-share-window");
  8.     var h = ((active_share_comment_marker.offsetTop)-($(window).height()/2));    
  9.     if (h < 200) { h = 200; }
  10.     $(document).scroll(function(){        
  11.         if ((($(window).scrollTop()) > h) && as_share_window.style.top == '-150px' && status == 'closed') {
  12.             as_share_window.style.top = '0px';
  13.             status = 'opened';
  14.         }
  15.         else if (($(window).scrollTop() < h) && as_share_window.style.top == '0px' && status == 'opened'){
  16.             as_share_window.style.top = '-150px';            
  17.             status = 'closed';
  18.         }  
  19.     });
  20. });

Por este otro

Código Javascript:
Ver original
  1. $(window).scroll(function(){
  2.         if ((($(window).scrollTop()) > ((document.getElementById("active-share-comment-marker").offsetTop)-($(window).height()/2))) && document.getElementById("as-share-window").style.top == '-150px') {
  3.             document.getElementById("as-share-window").style.top = '0px';  
  4.         }                                      
  5.         if ((($(window).scrollTop()) < ((document.getElementById("active-share-comment-marker").offsetTop)-($(window).height()/2))) && document.getElementById("as-share-window").style.top == '0px') {
  6.             document.getElementById("as-share-window").style.top = '-150px';   
  7.         }                                                          
  8. });

Haciendo que justamente cuando estoy terminado de leer el topico (justo antes de la firma de usuario esta el div que llama al JS)

aparezca el div que quiero asi como la pagina original de ejemplo...

Etiquetas: cuando
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




La zona horaria es GMT -6. Ahora son las 23:47.