Comunidad de diseño web y desarrollo en internet online

desplazamiento div

Citar            
MensajeEscrito el 14 Feb 2011 01:33 pm
Muy buenas gente.
Normalmente escribo en el foro de AS3, así que si me equivoco y esto no va aquí, os pido disculpas.
Resulta que me han pedido que haga que un div se deplace por la pantalla como lo hace el "quieres más información" de esta página:
http://tutiendaenfacebook.com/inicio.html
La verdad es que he buscado información (pensaba que sería encontrarlo porque lo había visto antes) pero no encuentro nada.
He supuesto que estaría hecho con ajax o jquery.
¿Alguien sabría darme una pista?
Muchas gracias!

Por SeiyaJapon

54 de clabLevel



 

España

firefox
Citar            
MensajeEscrito el 14 Feb 2011 05:38 pm
AJAX no pinta para nada en ese efecto. Y JQuery podrías usarlo aunque no hace falta. Para el caso la página usa Prototype y MooTools... pero el "truco" en sí se basa en usar el evento onScroll del objeto window e ir variando la propiedad "top" del div de acuerdo al offset del div respecto del desplazamiento (offset) de window.

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 14 Feb 2011 08:20 pm
Primero, muchas gracias por responder.

Ahora, mi duda:
Yo he visto que la página contiene este script:

var divclass = '#breadcrumbs';
var offset = $j(divclass).offset();var topPadding = 20;

Código Javascript :

function doOnScroll() 
{
   if ($j(window).scrollTop() > offset.top)
    {
      $j(divclass).stop().animate({
           marginTop: $j(window).scrollTop() - offset.top + topPadding + 20
          });
   } 
    else 
    {
      $j(divclass).stop().animate({
          marginTop: 20
          });
   };
}
window.onscroll = doOnScroll;


El problema es que lo he probado con la librería de js normal y no me ha funcionado.
Por eso no estoy seguro de como funciona.
Otra opción que había pensado era que me faltaba la librería adecuada, y de todas las que tienen:

Código HTML :

<script type="text/javascript" src="/config/admin/000-wb.js?tmsp=20110214"></script>
<script type="text/javascript" src="/config/skin/00_xpress_common/js/0-prototype.lite.js?tmsp=20110214"></script>
<script type="text/javascript" src="/config/skin/00_xpress_common/js/1-moo.fx.js?tmsp=20110214"></script>
<script type="text/javascript" src="/config/skin/00_xpress_common/js/2-litebox-1.0.js?tmsp=20110214"></script>
<script type="text/javascript" src="/config/skin/00_xpress_common/js/3-jquery.js?tmsp=20110214"></script>
<script type="text/javascript" src="/config/skin/00_xpress_common/js/4-jquery-no-conflict.js?tmsp=20110214"></script>
<script type="text/javascript" src="/config/skin/00_xpress_common/js/ajax_shopping_cart.js?tmsp=20110214"></script>
<script type="text/javascript" src="/config/skin/00_xpress_common/js/common.js?tmsp=20110214"></script>
<script type="text/javascript" src="/config/skin/00_xpress_common/js/fancybox/10-jquery.mousewheel.pack.js?tmsp=20110214"></script>
<script type="text/javascript" src="/config/skin/00_xpress_common/js/fancybox/11-jquery.fancybox.js?tmsp=20110214"></script>
<script type="text/javascript" src="/config/skin/00_xpress_common/js/MRW.js?tmsp=20110214"></script>
<script type="text/javascript" src="/config/ws/cms/js/content_search_adv.js?tmsp=20110214"></script>
<script type="text/javascript" src="/config/admin/150-lightbox.js?tmsp=20110214"></script>
<script type="text/javascript" src="/config/flvideo/swfobject.js?tmsp=20110214">


No se cual debe de ser. Pensaba que tenia que ser una por defecto que contuviese la función "animate" y/o la "scrollTop" que contiene el script, porque la función "offset" tengo entendido que vienen en la librería común.
¿Me equivoco?
Si estoy en lo cierto ¿Sabríais decirme que librería es?
También podría probarlo con todos, a ver si suena la flauta (que puede que no suene tampoco), pero me parecía mas correcto preguntarlo por aquí XD

Bueno, ya me decís algo, vale?
Muchas gracias!!

Por SeiyaJapon

54 de clabLevel



 

España

safari
Citar            
MensajeEscrito el 16 Feb 2011 04:44 pm
Primero que nada, "librería" es incorrecto, lo correcto es "bibloteca". "Biblioteca" => "Library", "Librería" => "Bookstore".
Las únicas bibliotecas que conozco de esa lista es JQuery y Fancy. Esta última no pinta para nada. El pedazo de código que muestras parece usar JQuery o Prototype. Lamentablemente no tengo experiencia con esta última.

Por DriverOp

Claber

2510 de clabLevel



 

opera

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.