He regresado al foro para ver si pueden ayudarme con un tema que me ha tenido desvelado por las pasados 2 semanas y, siempre que parezco solucionarlo, aparece algun navegador no compatible y me tira las esperanzas abajo.
La cuestion es la siguiente: yo tengo un div en donde hay informacion, y la idea es que ese div sea una hoja (o ficha de informacion). La idea es que si ese contenido es mucho, se pueda hacer un scroll para ir viendo el contenido que tiene ese div. La cosa es que el cliente (con buena razon) no quiere que se vea el scroll predeterminado del navegador, ya que quedaria visualemente feo, sino que quiere un scroll personalizado, con botones que el me da, etc.
Encontre 3 codigos, pero siempre surgia un problema. Ahora, he encontrado uno nuevo. El problema generlamente era Firefox ya que el codigo JS generalmente estaba mal. Ahora el problema no es ni firefox ni Opera: es el maldito Explorer. Lo que pasa es que, simplemente, no funciona, y encima el CSS no se ve como se ve en el resto de los navegadores.
Espero que puedan ayudarme a encontrar qué es lo que estoy haciendo mal y así, poder resolver de una vez por todas este lio.
El codigo JS:
Código:
El html:scrollList=new Array();
*
function registraScroll(idAbajo, idArriba, div, velAbajo, velArriba)
{
* * if(scrollList[idAbajo]==null) scrollList[idAbajo]=new Array();
* * if(scrollList[idArriba]==null) scrollList[idArriba]=new Array();
* * scrollList[idAbajo].push(new Array(div, velAbajo));
* * scrollList[idArriba].push(new Array(div, velArriba));
}
*
window.onload=inicializar;
*
function getEl(elementId)
{
* * return document.getElementById(elementId);
}
*
function inicializar()
{
* * for(key in scrollList)
* * {
* * * * var elemento=getEl(key);
* * * * elemento.onmouseover=iniciaScroll;
* * * * elemento.onmouseout=detieneScroll;
* * }
}
*
function iniciaScroll()
{
* * scrollDivs=new Array();
* * velDivs=new Array();
* * for(key in scrollList[this.id])
* * {
* * * * scrollDivs.push(getEl(scrollList[this.id][key][0]));
* * * * velDivs.push(scrollList[this.id][key][1]);
* * }
* * identificador=setInterval('scrollNow()', 50);
}
*
function detieneScroll()
{
* * clearInterval(identificador);
}
*
function scrollNow()
{
* * for(key in scrollDivs)
* * {
* * var desplazamientoActual=scrollDivs[key].scrollTop;
* * var nuevoDesplazamiento=desplazamientoActual+velDivs[key];
* * scrollDivs[key].scrollTop=nuevoDesplazamiento;
* * }
}
Código HTML:
<!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>Final Preve</title> <link href="../style.css" rel="stylesheet" type="text/css" /> <link href="style_pro.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="../submenu.js"></script> <script type="text/javascript" src="../scroll.js"></script> <script type="text/javascript"> registraScroll('flechaAbajo','flechaArriba','sinopsis_texto',2,-2); registraScroll('flechaAbajo2','flechaArriba2','ficha_texto',2,-2); </script> </head> <body style="background-color:transparent;" > <div id="secciones"> <div id="contenido_secc"> <a href="#" onclick="sinopsis_fx();"><div id="sinopsis"></div></a> <div id="fondo_sinopsis2"></div> <div id="sinopsis_cont"><div id="padding"></div> <div id="fondo_sinopsis"> <div class="flechas"> * * <div id="flechaArriba" class="flecha"><img src="http://www.forosdelweb.com/f13/images/flecha_arriba.png"></div> * * <div id="flechaAbajo" class="flecha"><img src="http://www.forosdelweb.com/f13/images/flecha_abajo.png"></div> </div> <div id="sinopsis_texto">Filmado en Argentina, los Estados Unidos, y Europa, este documental es una voz para los que sufren del Mal de Chagas, y para los que buscan una cura para esta enfermedad que afecta a 20 millones de personas en el mundo, pero es prácticamente desconocida para el publico internacional. </div> </div> </div> <a href="#" onclick="ficha_fx();"><div id="ficha"></div></a> <div id="ficha_cont"> <div id="fondo_ficha"> <div class="flechas"> * * <div id="flechaArriba2" class="flecha"><img src="http://www.forosdelweb.com/f13/images/flecha_arriba.png"></div> * * <div id="flechaAbajo2" class="flecha"><img src="http://www.forosdelweb.com/f13/images/flecha_abajo.png"></div> </div> <div id="ficha_texto"> <span class="titulo">PRENSA EN LOS EEUU:</span><span class="persona"> John Kelly, [email protected] 001 (434) 296-5577</span><br/> <span class="titulo">ASISTENTE DE PRODUCCION EN ARGENTINA:</span><span class="persona"> Ramón Cardini, [email protected], 0054-11-4811-3016</span><br/> <span class="titulo">DISTRIBUCION EN ARGENTINA:</span><span class="persona"> Mario Feraboli, Forever Films SRL, [email protected], 0054-11-4864-7674</span><br/> <span class="titulo">DISTRIBUCION EN ESPAÑA:</span><span class="persona"> Antoni Sole, ABS Production Barcelona, [email protected], 0034-93-487-8436</span><br/><br/> </div> </div> </div> </div> <div id="fondo_secc"> <div id="titulo"><img src="http://www.forosdelweb.com/f13/images/proyectos/documentales/chagas.png"/></div> <div id="foto"></div> </div> </div> </body> </html>
Código:
Aca el codigo en funcionamiento. Quienes tengan los distintos navegadores podran apreciar lo que comento:#fondo_sinopsis2{background:url('../images/pantalla.png') no-repeat; position:absolute; z-index:-3; width:367px; height:425px;display:none; margin-top:20px; margin-left:5px}
#fondo_sinopsis{width:367px; height:425px;position:absolute; z-index:-1; display:none}
#sinopsis_texto{width:320px; height:200px; overflow:hidden; margin-top:15px; margin-left:20px; font-size:12px;color:#b9ab97}
#fondo_ficha{background:url('../images/ficha_blanca.jpg') no-repeat; position:absolute; z-index:-1; width:400px; height:331px}
#ficha_texto{width:340px; height:260px; overflow:hidden; margin-top:60px; margin-left:15px; font-size:12px}
.flechas{z-index:2; position:absolute;}
#flechaArriba{margin-left:335px}
#flechaArriba2{margin-top:40px; margin-left:360px}
#flechaAbajo{margin-left:337px; margin-top:140px}
#flechaAbajo2{margin-left:362px; margin-top:215px}
.flecha{cursor:pointer}
http://www.prevefilms.com/nuevo/docu...es/chagas.html
Desde ya, muchisimas gracias por su ayuda, y a quien pueda colaborar a resolver este problemita o dar link con algun tipo de scroll que funcione en todos los navegadores, o decirme que parte del CSS tengo mal, en fin, cualquier tipo de ayuda!, le estaré eternamente agradecido!
Saludos!
Pablo
