Efecto de Scrolling con JavaScript -jsScrolling v2

2 Comments + Add Comment

• 
  sebastian 26 noviembre 2010 a las 9:14

  corrijo la ultima parte

  ***** aqui cambie todo poniendo una f adelante de las variables asi no usaba dos variables iguales en cada scroll+++

  Peso: gr. 
• 
  sebastian 26 noviembre 2010 a las 9:03

  hola buen dia, te comento mi caso para ver si me puedes dar una mano.

  instale este scrolling en mi pagina y me va muy bien, el problema que tengo es que en una misma pagina necesito utilizar dos scrool una para hacer el scroll a una lista de imagenes y otra para hacer el scroll a un texto, lo instale para el scroll de las imagenes y me funciona muy bien, pero cuando lo instalo en el cuadro de texto para hacer el scrool del texto me muestra lo botones pero no funciona,

  te explico como lo hice
  para el scroll de las imagenes defini en el css todos los estilos para que el scroll las pueda usar, luego para el scroll de la imagenes use variables de estilos distintas asi no se confunde una con otra, este es el codigo css que hice y me funciona porque hace ver todo en su sitio y con sus respectivas imagenes.

  vale decir que cada scroll se esta usando desde dos archivos php distintos y que estos dos se abren dentro de uno que es el principal

  codigo en el css

  /* stilos para el scroll del texto */

  .Container {
  position: absolute;
  top: -1px;
  left: 2px;
  width: 70px;
  height: 430px;
  background: #000;
  }
  #Scroller-1 {
  position: absolute;
  overflow: hidden;
  width: 70px;
  height: 430px;
  left: 3px;
  top: -4px;
  }
  #Scroller-1 p {
  margin: 0; padding: 10px 20px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  text-indent: 20px;
  color: #6F6048;
  }
  .Scroller-Container {
  position: absolute;
  top: 0px; left: 0px;
  }
  #Scrollbar-Container {
  position: absolute;
  top: 40px;
  left: 86px;
  }
  .Scrollbar-Up {
  cursor: pointer;
  position: absolute;
  top: -26px;
  left: 3px;
  }
  .Scrollbar-Track {
  width: 16px;
  height: 335px;
  position: absolute;
  top: -6px;
  left: -5px;
  background:url(../scroll/images/scrollbar_track.gif) right

  }
  .Scrollbar-Handle {
  position: absolute;
  width: 10px;
  height: 10px;
  left: 3px;
  top: 6px;
  }
  .Scrollbar-Down {
  cursor: pointer;
  position: absolute;
  top: 334px;
  left: 3px;
  }

  /* stilos para el scroll del texto */
  .fContainer {
  position: absolute;
  top: 320px;
  left: 13px;
  width: 320px;
  height: 102px;
  background: #fff;
  }
  #fScroller-1 {
  position: absolute;
  overflow: hidden;
  width: 305px;
  height: 85px;
  left: 6px;
  top: 11px;
  }
  #fScroller-1 p {
  margin: 0; padding: 10px 20px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  text-indent: 20px;
  color: #6F6048;
  }
  .fScroller-Container {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 302px;
  height: 76px;
  }
  #fScrollbar-Container {
  position: absolute;
  top: 53px;
  left: 86px;
  }
  .fScrollbar-Up {
  cursor: pointer;
  position: absolute;
  top: 279px;
  left: 256px;
  }
  .fScrollbar-Track {
  width: 16px;
  height: 55px;
  position: absolute;
  top: 296px;
  left: 255px;
  background:url(../scroll/images/fscrollbar_track.gif) right

  }
  .fScrollbar-Handle {
  position: absolute;
  width: 10px;
  height: 10px;
  left: 1px;
  top: 0px;
  }
  .fScrollbar-Down {
  cursor: pointer;
  position: absolute;
  top: 352px;
  left: 256px;
  }

  codigo archivo php para el scrool de las imagenes

  var scroller = null;
  var scrollbar = null;
  window.onload = function () {
  scroller = new jsScroller(document.getElementById(“Scroller-1″), 800, 200);
  scrollbar = new jsScrollbar (document.getElementById(“Scrollbar-Container”), scroller, false);
  }

  total_registros>0)
  {
  for($i=0;$itotal_registros;$i++)
  {$verificar->siguiente();

  $imagen_prin=$verificar->fila["imagen"];

  echo”fila["id"].”‘ target=’producto_desc’>“;
  }
  }?>

  codigo archivo php para el scrool del texto

  var fscroller = null;
  var fscrollbar = null;
  window.onload = function () {
  fscroller = new fjsScroller(document.getElementById(“fScroller-1″), 800, 200);
  fscrollbar = new fjsScrollbar (document.getElementById(“fScrollbar-Container”), fscroller, false);
  }

  aqui cambie todo poniendo una f adelante de las variables asi no usaba dos variables iguales en cada scroll

  Peso: gr. 

  tengo dos dias en esto y no se como resolver el problema, t agradezco de antemano tu ayuda.

  gracias