bookmaster pidió hace tiempo una capa con barra de desplazamiento propia. Tras darle un par de
vueltas y tras una versión previa que ya visteis he concluido con este código que, en IE funciona
a las mil maravillas pero que en NS parece no querer funcionar...
ejemplo
Algún valiente le mete mano?
Código PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Barra desplazadora</title>
<script>
ancho=700;
altoVentana=140;
altoContenido=700;
altoBoton=20;
anchoBoton=20;
incremento=5;
// ---------------------------NO EDITAR--------------------------------
recorrido=altoVentana-(2*altoBoton)
altoBarra=recorrido*(altoVentana/altoContenido);
recorridoBarra=recorrido-altoBarra;
incrementoBarra=incremento*(recorridoBarra/(altoContenido-altoVentana));
recorridoAcumuladoBarra=0;
recorridoAcumuladoContenido=0;
no=false;
var yy=0;
pulsado=false;
if (altoVentana>=altoContenido){no=true}
altoBarra+=incrementoBarra+1
function mover(hacia){
if(document.getElementById('barra').style.posTop==0){
document.getElementById('barra').style.posTop=altoBoton;
recorridoAcumuladoBarra=altoBoton}
comprobaciones=document.getElementById('contenido').style.posTop+(hacia*incremento);
if(comprobaciones<incremento && comprobaciones>(altoVentana-altoContenido)){
recorridoAcumuladoBarra-=(hacia*incrementoBarra);
recorridoAcumuladoContenido+=(hacia*incremento);
document.getElementById('contenido').style.posTop=recorridoAcumuladoContenido;
document.getElementById('barra').style.posTop=recorridoAcumuladoBarra;
}
}
estilo='<style>';
estilo+='#ventana{'
if (no){estilo+=' height:'+altoContenido+'px;';}
else{estilo+=' height:'+altoVentana+'px;';}
estilo+=' width:'+ancho+'px;';
estilo+=' border:solid 1px black;';
estilo+=' overflow:hidden;';
estilo+=' position:relative;';
estilo+='}'
estilo+='#contenido{'
if (no){estilo+=' width:'+ancho+'px;';}
else{estilo+=' width:'+(ancho-anchoBoton)+'px;';}
estilo+=' padding:10px 10px 10px 10px;';
estilo+=' font:normal 10px/15px verdana;';
estilo+=' position:absolute;';
estilo+=' top:0 px;'
estilo+=' left:0 px;'
estilo+=' background:#ffffcc;';
estilo+=' border-right:solid black 1px;';
estilo+=' height:'+altoContenido+'px;';
estilo+=' overflow:hidden;';
estilo+=' }';
estilo+='#botonArriba{ position:absolute;';
estilo+=' top:0px;';
estilo+=' width:'+anchoBoton+'px;';
estilo+=' height:'+altoBoton+'px;';
if (no){estilo+=' visibility:hidden;';}
estilo+=' background-color:navy;';
estilo+=' left:'+(ancho-anchoBoton)+'px;';
estilo+=' }'
estilo+='#botonAbajo{ position:absolute;';
estilo+=' width:'+anchoBoton+'px;';
estilo+=' height:'+altoBoton+'px;';
estilo+=' background-color:navy;';
estilo+=' top:'+(altoVentana-altoBoton)+'px;';
if (no){estilo+=' visibility:hidden;';}
estilo+=' left:'+(ancho-anchoBoton)+'px;';
estilo+='}';
estilo+='#barra{position:absolute;';
estilo+=' width:'+anchoBoton+'px;';
estilo+=' background-color:gray;';
estilo+=' top:'+altoBoton+'px;';
estilo+=' left:'+(ancho-anchoBoton)+'px;';
estilo+=' height:'+altoBarra+'px;';
if (no){estilo+=' visibility:hidden;';}
estilo+='}';
estilo+='</style>';
document.write(estilo);
</script>
<script for="ventana" event="onmousewheel">
if (document.all){
mover(event.wheelDelta/30)}
</script>
<script for="barra" event="onmousedown">
pulsado=true;
if (document.all){
yy=event.clientY;
}
</script>
<script for="barra" event="onmousemove">
if(pulsado){
if (document.all){
y=event.clientY;
}
yy=yy-y;
yyy=yy/incrementoBarra;
mover(yyy);
yy=y;
}
</script>
<script for="barra" event="onmouseup">
pulsado=false;
</script>
<script for="barra" event="onmouseout">
pulsado=false;
</script>
</head>
<body>
<div id="ventana"
>
<div id="contenido"
>
1 Texto<br>
2 Texto<br>
3 Texto<br>
4 Texto<br>
5 Texto<br>
6 Texto<br>
7 Texto<br>
8 Texto<br>
9 Texto<br>
10 Texto<br>
-----------------------------------------<br>
11 Texto<br>
12 Texto<br>
13 Texto<br>
14 Texto<br>
15 Texto<br>
16 Texto<br>
17 Texto<br>
18 Texto<br>
19 Texto<br>
20 Texto<br>
-----------------------------------------------------
------------------------------------------------------
-----------------------------------------------------
---------------------------</br>
21 Texto<br>
22 Texto<br>
23 Texto<br>
24 Texto<br>
25 Texto<br>
26 Texto<br>
</div>
<div
id="botonArriba"
onMouseOver="pepe22=window.setInterval('mover(1)',20)"
onMouseOut="window.clearInterval(pepe22)">
</div>
<div
id="botonAbajo"
onMouseOver="if(!no){pepe22=window.setInterval('mover(-1)',20)}"
onMouseOut="if(!no){window.clearInterval(pepe22)}"
>
</div>
<div
id="barra"
onMouseOver="if(!no){pepe22=window.setInterval('mover(0)',20)}"
onMouseOut="if(!no){window.clearInterval(pepe22)}"
>
</div>
</div>
</body>
</html>
Si quereis lo explico..
Que sepas que ya lo eras, pero a partir de ahora te has reafirmado como uno de mis ídolos más admirados. Justo por debajo del Capitán Trueno y por encima de Luckie Luke!!
Muchísimas gracias!! Y jopetas! Sin preguntar nada sobre el código ni nada... con lo enrevesado que soy yo programando!!!
Este tema le ha gustado a 1 personas