Muy buenas a todo el foro.
Tengo una capa contenedora con el atributo overflow a hidden. Dentro tiene otra con el atributo overflow a auto que no se muestra en su totalidad. Trato de mover arriba ésta última con javascript y suceden cosas extrañas en firefox.
Mando el código por si algún alma se precia...
Muy agradecido de antemano, el código de pruebas es el siguiente:
<html>
<head>
<style type="text/css">
#zona_izquierda{
position:absolute;
top:0px;
left:0px;
width: 150px;
height: 1000px;
display: block;
background-color: blue;
}
#cont_selectores{
position:absolute;
top:318px;
left:10px;
width: 134px;
height: 123px;
overflow: hidden;
}
.titulo_selector{
position:relative;
top:0px;
left:0px;
width: 128px;
height: 18px;
display: block;
border: 3px black solid;
font-family: verdana;
font-size: 10pt;
text-decoration: none;
background-color: white;
cursor: pointer;
overflow: hidden;
}
.selector{
position:relative;
top:0px;
left:0px;
width: 134px;
height: 75px;
display: block;
background-color: red;
overflow: auto;
}
#cont_selector_temas{
position:absolute;
top: 99px;
left: 0px;
width: 128px;
height: 0px;
display: block;
font-family: verdana;
font-size: 10pt;
text-decoration: none;
}
#otraCapa{
position:absolute;
top:446px;
left:10px;
width: 134px;
height: 24px;
background-color: yellow;
}
</style>
<script language="javascript" type="text/javascript">
function temas(){
cajaTemas = document.getElementById('cont_selector_temas');
var sube=cajaTemas.getAttribute("arriba");
if (sube==null){
sube = 0;
cajaTemas.setAttribute("arriba",sube);
}
arriba();
}
function arriba(){
cajaTemas = document.getElementById('cont_selector_temas');
var sube=cajaTemas.getAttribute("arriba");
if (sube<74){
++sube;
cajaTemas.setAttribute("arriba",sube);
cajaTemas.style.top = ""+(99-sube)+"px";
setTimeout("arriba()",sube)
}
}
function secciones(){
abajo();
}
function abajo(){
cajaTemas = document.getElementById('cont_selector_temas');
var sube=cajaTemas.getAttribute("arriba");
if (sube>0){
--sube;
cajaTemas.setAttribute("arriba",sube);
cajaTemas.style.top = ""+(99-sube)+"px";
setTimeout("abajo()",74-sube)
}
}
</script>
<title>mira</title>
</head>
<body>
<div id="zona_izquierda">
<div id="cont_selectores">
<div class="titulo_selector" onClick="secciones()">clic! baja</div>
<div class="selector">
<a href="/">seccion 1</a><br>
<a href="/">seccion 2</a><br>
<a href="/">seccion 3</a><br>
<a href="/">seccion 4</a><br>
<a href="/">seccion 5</a><br>
<a href="/">seccion 6</a><br>
<a href="/">seccion 7</a><br>
</div>
<div id="cont_selector_temas">
<div class="titulo_selector" onClick="temas()">clic! sube</div>
<div id="pickTemas" class="selector">
<a href="/">tema 1</a><br>
<a href="/">tema 2</a><br>
<a href="/">tema 3</a><br>
<a href="/">tema 4</a><br>
<a href="/">tema 5</a><br>
<a href="/">tema 6</a><br>
<a href="/">tema 7</a><br>
</div>
</div>
</div>
</div>
<div id="otraCapa">otra Capa</div>
</body>
</html>
