Foros del Web » Programando para Internet » Javascript »

varias areas con scroll

Estas en el tema de varias areas con scroll en el foro de Javascript en Foros del Web. Hola a todos Necesito hacer varias areas con scroll en una misma página pero sin usar la barra de desplazamiento del navegador (ya que en ...
  #1 (permalink)  
Antiguo 26/06/2008, 06:41
Avatar de chiquirf  
Fecha de Ingreso: noviembre-2005
Ubicación: Madrid
Mensajes: 215
Antigüedad: 18 años, 5 meses
Puntos: 3
varias areas con scroll

Hola a todos

Necesito hacer varias areas con scroll en una misma página pero sin usar la barra de desplazamiento del navegador (ya que en firefox no le puedo cambiar los colores).

Me tope de casualidad con esta web: http://www.criteria.es/es/conoce.aspx donde aparece justo lo que necesitaba.

Buscando en este fofo encontré el mismo código que de la web de arriba: http://www.forosdelweb.com/f17/perso...ollbar-119785/

El problema es que solo funciona para una sola area ya que ataca al id de las capas.

Me he pasado días cambiando cosas para tratar de hacerlo funcionar para varias areas (casa una con su propio scroll) pero no encuentro como hacerlo.

Supongo que la forma más fácil es agregar un parámetro más a las funciones de los botones para indicar que capa es la que tiene que hacer subir o bajar, pero no he podido.

Alguien me puede dar alguna pauta para lograrlo???

Muchas gracias

Saludos

Carlos
  #2 (permalink)  
Antiguo 26/06/2008, 07:59
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 20 años
Puntos: 834
Respuesta: varias areas con scroll

Probá así:
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml">
<
head>
<
meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<
title></title>
<
style>
.
contenedorExtposition:relativeheight:300px;width:323pxmargin:10px;}
.
contenedor{width:290pxheight:300pxoverflow:hidden;padding:3pxborder:1px solid #000}
.arribawidth:10pxheight:10pxbackground-color:#666666; border:1px solid #000; position:absolute; left:305px; top:10px; cursor:pointer;}
.abajowidth:10pxheight:10pxbackground-color:#666666; border:1px solid #000; position:absolute; left:305px; bottom:10px;cursor:pointer;}
</style>
<
script>
function 
getElementsByClassName(rel){
    var 
col=[];
    var 
tCol=document.getElementsByTagName('*');
    for(var 
i=0;i<tCol.length;i++)
        if(
tCol[i].className==rel)
            
col.push(tCol[i])
    return 
col;
}
function 
addEvent(objevTypefnuseCapture){
 
 if (
obj.addEventListener){
    
obj.addEventListener(evTypefnuseCapture);
    
  } else if (
obj.attachEvent){
    
obj.attachEvent("on"+evTypefn);
   
  } else {
   
obj['on'+evType]=fn;
  }
}
function 
subir(e){
var 
e=|| window.event;
var 
obj=e.target || e.srcElement;
var 
intervalo=setInterval(function(){
var 
capa=obj.parentNode.firstChild;
capa.scrollTop-=1;
obj.onmouseout=function(){clearInterval(intervalo);}
},
10)
}
function 
bajar(e){
var 
e=|| window.event;
var 
obj=e.target || e.srcElement;
var 
intervalo=setInterval(function(){
var 
capa=obj.parentNode.firstChild;
capa.scrollTop+=1;
obj.onmouseout=function(){clearInterval(intervalo);}
},
10)
}
window.onload=function(){
    var 
botsArriba=getElementsByClassName('arriba');
    var 
botsAbajo=getElementsByClassName('abajo');
    for(var 
i=0;i<botsArriba.length;i++){
        
addEvent(botsArriba[i], 'mouseover'subirfalse);
        
addEvent(botsAbajo[i], 'mouseover'bajarfalse);
    }
}
</script>
</head>

<body>
<div class="contenedorExt"><div class="contenedor">Lorem Ipsum is simply dummy text of the printing and
  typesetting industry. Lorem Ipsum has been the industry's standard dummy text
  ever since the 1500s, when an unknown printer took a galley of type and scrambled
  it to make a type specimen book. It has survived not only five centuries, but
  also the leap into electronic typesetting, remaining essentially unchanged.
  It was popularised in the 1960s with the release of Letraset sheets containing
  Lorem Ipsum passages, and more recently with desktop publishing software like
  Aldus PageMaker including versions of Lorem Ipsum. Why do we use it? It is
  a long established fact that a reader will be distracted by the readable content
  of a page when looking at its layout. The point of using Lorem Ipsum is that
  it has a more-or-less normal distribution of letters, as opposed to using 'Content
  here, content here', making it look like readable English. Many desktop publishing
  packages and web page editors now use Lorem Ipsum as their default model text,
  and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
  Various versions have evolved over the years, sometimes by accident, sometimes
  on purpose (injected humour and the like).Lorem Ipsum is simply dummy text
  of the printing and typesetting industry. Lorem Ipsum has been the industry's
  standard dummy text ever since the 1500s, when an unknown printer took a galley
  of type and scrambled it to make a type specimen book. It has survived not
  only five centuries, but also the leap into electronic typesetting, remaining
  essentially unchanged. It was popularised in the 1960s with the release of
  Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
  publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  Why do we use it? It is a long established fact that a reader will be distracted
  by the readable content of a page when looking at its layout. The point of
  using Lorem Ipsum is that it has a more-or-less normal distribution of letters,
  as opposed to using 'Content here, content here', making it look like readable
  English. Many desktop publishing packages and web page editors now use Lorem
  Ipsum as their default model text, and a search for 'lorem ipsum' will uncover
  many web sites still in their infancy. Various versions have evolved over the
  years, sometimes by accident, sometimes on purpose (injected humour and the
  like).Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
  when an unknown printer took a galley of type and scrambled it to make a type
  specimen book. It has survived not only five centuries, but also the leap into
  electronic typesetting, remaining essentially unchanged. It was popularised
  in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
  and more recently with desktop publishing software like Aldus PageMaker including
  versions of Lorem Ipsum. Why do we use it? It is a long established fact that
  a reader will be distracted by the readable content of a page when looking
  at its layout. The point of using Lorem Ipsum is that it has a more-or-less
  normal distribution of letters, as opposed to using 'Content here, content
  here', making it look like readable English. Many desktop publishing packages
  and web page editors now use Lorem Ipsum as their default model text, and a
  search for 'lorem ipsum' will uncover many web sites still in their infancy.
  Various versions have evolved over the years, sometimes by accident, sometimes
  on purpose (injected humour and the like).Lorem Ipsum is simply dummy text
  of the printing and typesetting industry. Lorem Ipsum has been the industry's
  standard dummy text ever since the 1500s, when an unknown printer took a galley
  of type and scrambled it to make a type specimen book. It has survived not
  only five centuries, but also the leap into electronic typesetting, remaining
  essentially unchanged. It was popularised in the 1960s with the release of
  Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
  publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  Why do we use it? It is a long established fact that a reader will be distracted
  by the readable content of a page when looking at its layout. The point of
  using Lorem Ipsum is that it has a more-or-less normal distribution of letters,
  as opposed to using 'Content here, content here', making it look like readable
  English. Many desktop publishing packages and web page editors now use Lorem
  Ipsum as their default model text, and a search for 'lorem ipsum' will uncover
  many web sites still in their infancy. Various versions have evolved over the
  years, sometimes by accident, sometimes on purpose (injected humour and the
  like).</div><div class="arriba"></div><div class="abajo"></div></div>
</body>
</html> 

Última edición por Panino5001; 26/06/2008 a las 08:07
  #3 (permalink)  
Antiguo 26/06/2008, 09:29
Avatar de chiquirf  
Fecha de Ingreso: noviembre-2005
Ubicación: Madrid
Mensajes: 215
Antigüedad: 18 años, 5 meses
Puntos: 3
Respuesta: varias areas con scroll

de PM... justo lo que necesitaba...

Muchas gracias Panino.

Saludos

Chiqui
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 02:56.