Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
[Mini MOD] Scrollbar Path Style Scroll
#1
Esto consiste en Mostrar el Nivel de la Pagina en la que se Encuentra por ejemplo si esta a la mitad de la pagina muestra un Mensaje

[Imagen: gxptz0d.png]

En main_header.tpl Buscan

Código PHP:
<div id="loading" style="display:none"><img src="{$tsConfig.tema.t_url}/images/ajax-loader.gif" alt="Cargando"Procesando...</div

Abajo Agregan

Código PHP:
<div id="scrollbubble"></div>
Luego en  extras.css Al Final Agregan
#scrollbubble {
    
displaynone;
    
positionfixed;
    
top0;
    
right20px;
    
z-index500;
    
padding3px 8px;
    
background-color#000;
    
color#FFF;
    
border-radius3px;
}

#scrollbubble:after {
    
content" ";
    
positionabsolute;
    
top50%;
    
right: -8px;
    
height0;
    
width0;
    
margin-top: -4px;
    
border4px solid transparent;
    
border-left-color#000;
}
Luego en acciones.js Al final Agregan
var scrollTimer null;

$(
window).scroll(function() {
   var 
viewportHeight = $(this).height(),
       
scrollbarHeight viewportHeight / $(document).height() * viewportHeight,
       
progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
       
distance progress * (viewportHeight scrollbarHeight) + scrollbarHeight - $('#scrollbubble').height() / 2
       
;
 
    $(
'#scrollbubble')
        .
css('top'distance)
        .
text('Progress (' Math.round(progress 100) + '%)')
        .
fadeIn(100)  
    ;

    
// Fade out the annotation after 1 second of no scrolling.
    
if (scrollTimer !== null) {
        
clearTimeout(scrollTimer);
    }
    
scrollTimer setTimeout(function() {
        $(
'#scrollbubble').fadeOut();
    }, 
500);
}); 

Bueno esto Fue Todo Espero y Les Sea Util y les Guste Esta pequeña (MINI-MOD) Estoy Preparando algo Grande y Bueno para el Script Cuando lo termine Lo Comparto y espero y les gusten mis pequeños aportes!!
Firma editada por Moderación: Sitio web no alojado en Skylium (spam).
#2
Buen MOD, pereo creo que de mucho no sirve ¿No?
#3
Esta bueno, pero fíjate si podes editar y colocar bien los códigos, están todos en 1 sola caja.. Sigue aportando así Guiño

Saludos.-


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  [Mini-Mod][SEO]Descripcion al crear post... casper 2 839 16-12-2014, 01:24 PM
Último mensaje: Vicen
  PHPOST [Mini Mod] Entrar al perfil desde http://TuWeb/USUARIO/ casper 0 546 04-10-2014, 09:49 PM
Último mensaje: casper
  [Mini MOD] Links ocultos para visitantes LCNetwork 8 1,335 24-08-2014, 12:41 PM
Último mensaje: TheBomberbe
  PHPOST [Mini MOD] Anti AdBlock LCNetwork 4 1,034 13-08-2014, 04:24 PM
Último mensaje: Vicen
  PHPOST Mini fix Imagen "Cargando..." Al Agregar Post Boreas 18 2,388 13-08-2014, 02:32 PM
Último mensaje: albert2227
  [Mini MOD]Top User con más Posts LCNetwork 4 781 01-07-2014, 03:22 PM
Último mensaje: Vicen
  [Mini-MOD]Header con movimiento LCNetwork 2 731 30-06-2014, 10:30 PM
Último mensaje: mispracticas2009
  [Mini MOD] Hover en imagen de perfil LCNetwork 0 488 21-06-2014, 05:17 AM
Último mensaje: LCNetwork
  PHPOST [Mini MOD] Pagina de Mantenimiento LCNetwork 0 504 21-06-2014, 04:53 AM
Último mensaje: LCNetwork
  PHPOST [Mini MOD] Bloquear Input de URL (admin) LCNetwork 0 429 21-06-2014, 04:02 AM
Último mensaje: LCNetwork



Usuarios navegando en este tema: 1 invitado(s)