Barra deslizadora en el scroll

CORADA · #1 (**permalink**) 05/08/2009, 04:39

Hola a todos, soy nuevo por aquí, me dedico al diseño gráfico pero la programación no es mi fuerte y tengo una duda que comentaros.

El caso es que estoy haciendo una página web en dreamweaber, a base de capas y necesito incluir mucho texto.

Pensando en esto he colocado un scroll sencillito con dos flechas una para que el texto avance hacia abajo y otra par que suba, hasta aquí todo bien, el código funciona perfectamente.

Pero el caso es que además quisiera colocar una barra deslizadora que acompase al texto y que al seleccionarla el texto suba y baje, vamos algo bastante común, pero que a mi que estoy totalmente pez en java se me escama.

¿Podriais ayudarme? como siempre en esto del diseño los trabajos son para antes de ayer.

Un saludo a todos y felicidades por vestro trabajo, realmente me han sacado de más de una.

mateando · #2 (**permalink**) 05/08/2009, 07:41

Quizas te pueda dar una mano, pero no comprendo muy bien lo que estas buscando... alguna web de ejemplo para poder ver lo que quieres¿?

Saludos!

CORADA · #3 (**permalink**) 05/08/2009, 09:29

Si, quizás me haya expresado, lo siento, sería algo como esto:

riojawine.com/es/rioja.php?op1=0&op2=0&sec=1#

En la que estoy desarrollando no tengo problema con el scrip de las flechas de arriba y abajo, pero la barra del scroll, no se si llama scrollbar exactamente, no se que código debe llevar. Ni a que clase de capas hay q aplicarlo, si es algún tipo flotante o trasparente o no se, ya que como expliqué estoy bastante pez con este tema, antes me las arreglaba con los comportamientos de dreamweaber, pero nunca he sabido hacer un scroll como el que se ve en el enlace desde cero en java.

E tenido que quitar el http por que el foro no me permite poner aun enlaces

mateando · #4 (**permalink**) 05/08/2009, 09:50

Bien, ahora si entendi... seria un Scroll dentro de otro....

Tenes una etiqueta DIV donde colocaste todo el texto, esa etiqueta pude tener un estilo asi:

<div class="scroll">texto texto texto texto texto texto</div>

Y el css seria asi:

.scroll { width:300px; height:170px; overflow:auto; }

Recorda darle un alto y un ancho fijo....

Espero que sea lo que buscabas...

CORADA · #5 (**permalink**) 06/08/2009, 03:33

Si, pero el problema es que aparece el scroll por defecto del navegador.
Yo tengo algo así, esto es una prueba, pero bueno, en ella estan configuradas las opciones de arriba y abajo, pero me falta la barra deslizadora, no se el código y tampoco si se le puede aplicar a la misma etiqueta div.

Cita:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#divControl {position:absolute; left:120px; top:190px; width:250px; font-size:10pt; font-family:arial,helvetica,sans-serif; visibility:hidden;}
#divControl_2 {position:absolute; left:120px; top:190px; width:250px; font-size:10pt; font-family:arial,helvetica,sans-serif; visibility:hidden;}
#divCont {position:absolute; left:120px;top:250px; width:250px; height:150px; clip:rect(0px 250px 150px 0px);}
.clScroll {position:absolute; font-size:10pt; font-family:arial,helvetica,sans-serif; visibility:hidden;}
</style>
<style type="text/css">
#divControl {
position:absolute;
left:628px;
top:106px;
width:15px;
font-size:10pt;
font-family:arial,helvetica,sans-serif;
visibility:visible;
height: 15px;
}
#divControl_2 {
position:absolute;
left:629px;
top:241px;
width:12px;
font-size:10pt;
font-family:arial,helvetica,sans-serif;
visibility:visible;
height: 14px;
}
#divCont {
position:absolute;
left:377px;
top:105px;
width:250px;
height:150px;
clip:rect(0px 250px 150px 0px);
}
.clScroll {
position:absolute;
font-size:10pt;
font-family:arial,helvetica,sans-serif;
visibility:visible;
}
#apDiv1 {
position:absolute;
width:14px;
height:34px;
z-index:1;
background-image: url(rioja.php_files/thumb1.gif);
left: 629px;
top: 123px;
}
</style>

<script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript">

function lib_bwcheck(){ //Browsercheck (needed)
this.ver=navigator.appVersion
this.agent=navigator.userAgent
this.dom=document.getElementById?1:0
this.opera5=(navigator.userAgent.indexOf("Opera")>-1 && document.getElementById)?1:0
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0;
this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
this.ie=this.ie4||this.ie5||this.ie6
this.mac=this.agent.indexOf("Mac")>-1
this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5)
return this
}
var bw=lib_bwcheck()

timSpeed = 50

contHeight = 100

function makeScrollObj(obj,nest){
nest=(!nest) ? "":'document.'+nest+'.'
this.el=bw.dom?document.getElementById(obj):bw.ie4 ?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):0;
this.css=bw.dom?document.getElementById(obj).style :bw.ie4?document.all[obj].style:bw.ns4?eval(nest+'document.'+obj):0;
this.height=bw.ns4?this.css.document.height:this.e l.offsetHeight
this.top=b_gettop
return this
}

var px = bw.ns4||window.opera?"":"px";

function b_gettop(){
var gleft=(bw.ns4 || bw.ns6)?parseInt(this.css.top):eval(this.css.pixel Top);
return gleft;
}

var scrollTim = 1;
var active = 0;

function scroll(speed){
clearTimeout(scrollTim)
way = speed>0?1:0
if ((!way && oScroll[active].top()>-oScroll[active].height+contHeight) || (oScroll[active].top()<0 && way)){
oScroll[active].css.top = (oScroll[active].top()+speed)+px
scrollTim = setTimeout("scroll("+speed+")",timSpeed)
}
}

function noScroll(){
clearTimeout(scrollTim)
}

function changeActive(num){
oScroll[active].css.visibility = "hidden"
active = num
oScroll[active].css.top = 0+px
oScroll[active].css.visibility = "visible"
}

function scrollInit(){
oScroll = new Array()

// You can add and remove scrollObjects here.
oScroll[0] = new makeScrollObj('divScroll1','divCont')
oScroll[1] = new makeScrollObj('divScroll2','divCont')
oScroll[2] = new makeScrollObj('divScroll3','divCont')
oScroll[3] = new makeScrollObj('divScroll4','divCont')

oScroll[0].css.left = 0+px
oScroll[0].css.top = 0+px
oScroll[0].css.visibility = "visible"
oControl = new makeScrollObj('divControl')
oControl.css.visibility = "visible"
}

onload = scrollInit;

</script>

<script language="JavaScript" type="text/javascript">
function lib_bwcheck(){ //Browsercheck (needed)
this.ver=navigator.appVersion
this.agent=navigator.userAgent
this.dom=document.getElementById?1:0
this.opera5=(navigator.userAgent.indexOf("Opera")>-1 && document.getElementById)?1:0
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0;
this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
this.ie=this.ie4||this.ie5||this.ie6
this.mac=this.agent.indexOf("Mac")>-1
this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5)
return this
}
var bw=lib_bwcheck()

//The speed of the timeout between each scroll.
timSpeed = 50

//The height of the container (change this when it scrolls to much or to little)
contHeight = 100

function makeScrollObj(obj,nest){
nest=(!nest) ? "":'document.'+nest+'.'
this.el=bw.dom?document.getElementById(obj):bw.ie4 ?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):0;
this.css=bw.dom?document.getElementById(obj).style :bw.ie4?document.all[obj].style:bw.ns4?eval(nest+'document.'+obj):0;
this.height=bw.ns4?this.css.document.height:this.e l.offsetHeight
this.top=b_gettop
return this
}

var px = bw.ns4||window.opera?"":"px";

function b_gettop(){
var gleft=(bw.ns4 || bw.ns6)?parseInt(this.css.top):eval(this.css.pixel Top);
return gleft;
}
var scrollTim = 1;
var active = 0;

function scroll(speed){
clearTimeout(scrollTim)
way = speed>0?1:0
if ((!way && oScroll[active].top()>-oScroll[active].height+contHeight) || (oScroll[active].top()<0 && way)){
oScroll[active].css.top = (oScroll[active].top()+speed)+px
scrollTim = setTimeout("scroll("+speed+")",timSpeed)
}
}
function noScroll(){
clearTimeout(scrollTim)
}

function changeActive(num){
oScroll[active].css.visibility = "hidden"
active = num
oScroll[active].css.top = 0+px
oScroll[active].css.visibility = "visible"
}

function scrollInit(){
oScroll = new Array()

oScroll[0] = new makeScrollObj('divScroll1','divCont')

oScroll[0].css.left = 0+px
oScroll[0].css.top = 0+px
oScroll[0].css.visibility = "visible"
oControl = new makeScrollObj('divControl')
oControl.css.visibility = "visible"
}

onload = scrollInit;

function MM_effectSlide(targetElement, duration, from, to, toggle)
{
Spry.Effect.DoSlide(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
}
</script>
</head>
<div id="divControl">
<a href="#" onMouseOver="scroll(5)" onMouseOut="noScroll()" onClick="return false"><img src="rioja.php_files/up1.gif" width="10" height="10"></a> </div>
<div id="divControl_2">
<a href="#" onMouseOver="scroll(-5)" onMouseOut="noScroll()" onClick="return false"><img src="rioja.php_files/dn1.gif" width="10" height="10"></a></div>
<div id="divCont" onClick="MM_effectSlide('divCont', 1000, '100%', '0%', false)">
<div id="divScroll1" class="clScroll">
Esto es una prueba, sin contenido real.
Este texto es figurado y no tiene contenido real.
Esto es una prueba de estilo, no es para ser leido<br>
<br>text text dummy texttext text dummy texttext text dummy text<br>
<br>text text dummy text text text dummy text text text dummy text <br>
<br>text text dummy texttext text dummy texttext text dummy text<br>
<br>text text dummy text text text dummy text text text dummy text <br>
<br>text text dummy texttext text dummy texttext text dummy text<br>
<br>text text dummy text text text dummy text text text dummy text <br>
<br>text text dummy texttext text dummy texttext text dummy text<br>
<br>text text dummy text text text dummy text text text dummy text <br>
</div>
</div>

</body>

CORADA · #6 (**permalink**) 06/08/2009, 03:46

Acabo de ver de echo que en este foro hay un scroll como el que tengo:

forosdelweb.com/f17/personalizar-scrollbar-119785/

Publicado por CORE, tiene el código más límpio que el que he puesto, el problema sigue siendo el mismo, le falta la barra de desplazamiento.

CORADA · #7 (**permalink**) 12/08/2009, 02:47

¿Nadie puede echarme una mano?

No consigo crear la scrollbar.

Saludos