slidebar / trackbar en html ...

radge · #1 (**permalink**) 08/06/2004, 01:08

Buenas , estoy intentando hacer una trackbar o slidebar en HTML pero no encuentro nada en google , he enkontrado esto k no tira ni pa atrás ... a ver si alguien puede darme una ayudita ...

Código PHP:

  Sliders, Spin Controls and Gauges  
The INPUT element can be used for both of these.  
 
 
(a) Slider (or Trackbar)  
<INPUT CLASS=slider TYPE=RANGE NAME=slider1 MIN=1 MAX=10 VALUE=1>  
Users can move the slider between the limits designated by MIN and MAX.

Al fin y al kabo lo k kiero hacer es esto

salu2 rAdGe

furoya · #2 (**permalink**) 15/06/2004, 10:49

Hola radge :

Para empezar, si buscas un código en HTML te equivocaste de foro : estamos es JavaScript. Pero no le hace mucha diferencia, porque seguramente el mensaje terminaría movido a este foro tarde o temprano.

Nunca había vsto ese INPUT; lo pobé en IE5 y no funciona, sospecho que debe ser un código propietario de algún otro navegador ( ¿Conqueror? , ¿Safari? *) y por eso es ignorado en los demás.

Ésto no significa que en HTML no existan los botones deslizantes, lo que ocurre es que, al igual que con otros elementos como p.e. el BUTTON, tiene muy poca utilidad en este lenguaje y hay que combinarlo con JavaScript para que tenga un uso más flexible ( agregándole un evento tipo onclick u onmouseover con una función ). Por eso decía que tu mensaje iba a ser trasladado aquí en algún momento.

Si alguien todavía no se dió cuenta de qué botón deslizante estoy hablando, puede miar hacia la derecha ( esa derecha → ), allá donde termina la ventana.

. . .

Sí, las scrollbars contienen un botón deslizable, que en HTM sólo sirve para mover bloques, pero en JS se puede leer el desplazamiento y así modificar variables.

Dejo un ejemplo típico : todos conocemos las barras RGB de los editores de color. Éstas no son muy precisas, pero están sólo de muestra.
El código está hecho para IE ( mejor 5.5+ ) pero seguramente se puede adaptar a otros navegadores.

Código:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
<HTML> 
<HEAD> 
<TITLE> CAMBIA COLOR CON BOTONES DESLIZANTES.</TITLE> 
<SCRIPT>
<!-- 
var cRojo=0;
var cVerde=0;
var cAzul=0;
var vHexa="0123456789ABCDEF";

function Rojo(){
r=bRojo.scrollLeft;
cRojo=Math.floor(r/4);
if(cRojo>255){cRojo=255};
frm.dRojo.value=cRojo;
hR= vHexa.charAt(parseInt(cRojo/16)) + vHexa.charAt(cRojo%16)
frm.hRojo.value=hR;
pR=Math.ceil(cRojo*100/256);
frm.pRojo.value=pR;
color()
}

function Verde(){
v=bVerde.scrollLeft;
cVerde=Math.floor(v/4);
if(cVerde>255){cVerde=255};
frm.dVerde.value=cVerde;
hV= vHexa.charAt(parseInt(cVerde/16)) + vHexa.charAt(cVerde%16)
frm.hVerde.value=hV;
pV=Math.ceil(cVerde*100/256);
frm.pVerde.value=pV;
color()
}

function Azul(){
a=bAzul.scrollLeft;
cAzul=Math.floor(a/4);
if(cAzul>255){cAzul=255};
frm.dAzul.value=cAzul;
hA= vHexa.charAt(parseInt(cAzul/16)) + vHexa.charAt(cAzul%16)
frm.hAzul.value=hA;
pA=Math.ceil(cAzul*100/256);
frm.pAzul.value=pA;
color()
}

function color(){
muestra.style.background='rgb('+ cRojo +','+ cVerde +','+ cAzul +')';
}
// --> 
</SCRIPT> 
<STYLE>
<!--
#bRojo{zoom:0.75; scrollbar-face-color:red; scrollbar-highlight-color:black; scrollbar-shadow-color:black; scrollbar-arrow-color:black; scrollbar-track-color:#FFDDDD; scrollbar-base-color:none; scrollbar-3dlight-color:black; scrollbar-darkshadow-color:black; }
#bVerde{zoom:0.75; scrollbar-face-color:#00FF00; scrollbar-highlight-color:black; scrollbar-shadow-color:black; scrollbar-arrow-color:black; scrollbar-track-color:#DDFFDD; scrollbar-base-color:none; scrollbar-3dlight-color:black; scrollbar-darkshadow-color:black; }
#bAzul{zoom:0.75; scrollbar-face-color:#0000FF; scrollbar-highlight-color:black; scrollbar-shadow-color:black; scrollbar-arrow-color:black; scrollbar-track-color:#DDDDFF; scrollbar-base-color:none; scrollbar-3dlight-color:black; scrollbar-darkshadow-color:black; }
#muestra{background:#000000; text-align:center; font-family:sans-serif; font-weight:bold}
td{padding:0 10px;background:#FFFFFF; cursor:default}
input{text-align:center; cursor:default}
#codigo{cursor:hand}
#codigo{cursor:pointer}
// -->
</STYLE>
</HEAD> 
<BODY onload=document.frm.reset()>
<h2>Botones deslizantes usando <i>scrollbars</i> para modificar la composición de color.</h2>
<center>
<table id=muestra name=muestra border=0 cellspacing=0>
<form name=frm>
<tr> <td width=150> COLOR </td> <td> </td> <td title="Valor en Decimal."> D </td> <td title="Valor en Hexadecimal."> H </td> <td title="Valor en Porcentaje."> % </td> <td> BARRAS </td> </tr>

<tr> <td style=background:transparent"> </td> <td title="Rojo."> R </td> <td><input id=dRojo name=dRojo size=3 value="0" readonly> </td> <td> <input id=hRojo name=hRojo size=3 value="00" readonly> </td> <td> <input id=pRojo name=pRojo size=3 value="0" readonly> </td> <td> <div onscroll=Rojo() id=bRojo name=bRojo style="width:400px; height:30px; overflow:auto">
<img style="position:absolute;" src=0.0 width=1228 height=0></div> </td> </tr>

<tr> <td style=background:transparent"> </td> <td title="Verde."> G </td> <td><input id=dVerde name=dVerde size=3 value="0" readonly> </td> <td> <input id=hVerde name=hVerde size=3 value="00" readonly> </td> <td> <input id=pVerde name=pVerde size=3 value="0" readonly> </td> <td> <div onscroll=Verde() id=bVerde name=bVerde style="width:400px; height:30px; overflow:auto">
<img style="position:absolute;" src=0.0 width=1228 height=0></div> </td> </tr>

<tr> <td style=background:transparent"> </td> <td title="Azul."> B </td> <td><input id=dAzul name=dAzul size=3 value="0" readonly> </td> <td> <input id=hAzul name=hAzul size=3 value="00" readonly> </td> <td> <input id=pAzul name=pAzul size=3 value="0" readonly> </td> <td> <div onscroll=Azul() id=bAzul name=bAzul style="width:400px; height:30px; overflow:auto">
<img style="position:absolute;" src=0.0 width=1228 height=0></div> </td> </tr>
</form>
</table>
<p>
<button onclick="codigo.value='rgb('+ frm.dRojo.value +','+ frm.dVerde.value +','+ frm.dAzul.value +');'">Código Decimal</button> 
<button onclick="codigo.value='#'+ frm.hRojo.value+frm.hVerde.value+frm.hAzul.value +';'">Código Hexadecimal</button> 
<button onclick="codigo.value='rgb('+ frm.pRojo.value +'%,'+ frm.pVerde.value +'%,'+ frm.pAzul.value +'%);'">Código porcentaje</button> 
<input size=20 onclick="this.select();document.execCommand('Copy')" id=codigo title="Click para copiar."> <p>

</BODY> 
</HTML> 
<!--
posLeft
pixelLeft
.offsetParent
-->

Por otro lado, si no te gusta el formato, puedes aprovechar que estás en este foro y buscar en las FAQ o con el buscador interno; hay decenas de ejemplos hechos principalmente con imágenes que te permiten darle a tu 'slidebar / trackbar ' el aspecto que quieras.

Lo que me recuerda . . . En el tema Todo sobre colores , caricatos puso un link a una página con una herramienta como la que posteé más arriba, pero con barras más presentables. No te dejo el enlace porque intenté entrar un par de veces y no la hallé. Seguramente la movió a otra dirección. Si tenemos suerte caricatos tal vez lea este tema y nos dé la nueva ruta ( la página era muy buena ); o quizá se la pida por MP.

Espero que algo de ésto te sirva.

saludos

furoya

Edición : * - En Safari y Opera ya anda, y es el mismo código

Código:

<input type="range" min="0" max="150" value="70" step="10" onmouseout="alert(this.value)">

radge · #3 (**permalink**) 16/06/2004, 01:27

Muchas gracias lo saké de esta web

http://www.w3.org/TR/WD-forms-960308.html

La verdad que el código que me pasaste es muy interesante pero no es lo que necesito , muchas gracias de todas formas , a ver si veis algo en esta página .... necesitaria hacer-lo como en esa página y no se komo.

Atentamente rAdGe

PatomaS · #4 (**permalink**) 16/06/2004, 03:03

Hola

Bueno, por partes.

El control que quieres poner no lo he visto jamás fuera de lo que ofrece en si la estéticade plugins como realplayer, así que casi sin lugara dudas, diría que no existe ni es posible ponerlo, lo cual no quiere decir que no puedas lograr esa misma estética con imágenes y capas; eso incluye el desplazamiento del marcado, solo que te llevará un poco de trabajo y mucho javascript.

Segundo, el código puesto para las scrollbars, solo funciona en explorer, es un código propietario de Microsoft.

Tercero, la referencia que pones del w3c, es bastante vieja, pero eso no sería problema alguno, el problema es que ese documento es un «Working Draft», es decir, un borrador. Era un proyecto del momento para ampliar las funcionalidades de los formularios, pero no se llevó a cabo.

Actualmente, no se están haciendo modificaciones de ningún tipo al html, por lo que ese borrador no llegará a término nunca por esa parte.

Sin embargo, se está trabajando en las xForms 1.0 y está por empezarse el borrador de la versión 2.0, el problema es que no solo no he visto esos controles en ellas, si no que los navegadores aun no soportan bien este estandar. Puede que se logren implementar en un futuro dado que en ocasiones parecen cosas útiles, per ohabrá que ver.

Suerte

Felicidad

radge · #5 (**permalink**) 16/06/2004, 04:55

Muchas gracias !!!!

Y siento haver molestado :)

salu2 rAdGe

PatomaS · #6 (**permalink**) 16/06/2004, 05:08

Para nada molestas...

ya sabes, la mejore manera de aprender es probar, pero preguntar es el mejor complemento.

Además, investigaste para encontrar tu mismo la respuesta, lo cual está muy bien y muchísima gente no lo hace.

:)

Felicidad

furoya · #7 (**permalink**) 19/06/2004, 11:53

Hola de nuevo :

PatomaS : Cuándo dices

Cita:

... el código puesto para las scrollbars, solo funciona en explorer, es un código propietario de Microsoft. ...

significa que los otros navegadores no tienen manera de leer el desplazamiento en un DIV ?

saludos

furoya

Carlitos · #8 (**permalink**) 19/06/2004, 12:30

Hola.

Buscando por ahí encontré esto:

http://www.blueshoes.org/_bsJavascri.../example1.html
http://www.blueshoes.org/_bsJavascri.../example2.html
http://www.blueshoes.org/_bsJavascri.../example3.html
http://www.blueshoes.org/_bsJavascri.../example4.html
http://www.blueshoes.org/_bsJavascri.../example5.html
http://www.blueshoes.org/_bsJavascri.../example6.html
http://www.blueshoes.org/_bsJavascri.../example7.html

Página principal: http://www.blueshoes.org/en/javascri.../?bcRun=1&js=0

Un saludo.

furoya · #9 (**permalink**) 25/06/2004, 12:45

Hola otra vez :

Carlitos : qué buena página !. Mencioné que hay muchas versiones de botones deslizables en este foro ( casi todas para scrollbar ), pero aquí están todas juntas !.

Me pareció leer que tienen copyright y que se deben pagar los códigos para usarlos; a gente como nosotros que nos la pasamos escribiendo código para los demás, ésto puede no caernos simpático, pero supongo que el autor tiene derecho.
Además están probados en diferentes navegadores ( me guardé una págna para estudiarla en IE5 y no me anda

), que es algo que empezó a preocupame desde que estoy colaborando con el foro.

Y ya que tocamos el tema; tú no sabes si se puede leer el desplazamiento del contenido de un DIV ( quizás un IFRAME ) en otros navegadores que no sean IE ?. Supongo que PatomaS no se va a enojar si me responde otro.

saludos

furoya

PatomaS · #10 (**permalink**) 25/06/2004, 15:59

Hola

A lo que me refería, es a que las barras de desplazamiento típicas de todas las ventanas, la de abajo y la e la derecha, no se pueden modificar con códigos estandar que todos los navegadores lo entiendan.

Las propiedades scroolbar que la gente suele usar para cambiar el color y cosas parecidas, son solo de explorer.

Respecto a los ejemplos que pones Carlitos, son realmente muy buenos, claro está que son exactamente lo que mencionaba aquí, cito:

Cita:

El control que quieres poner no lo he visto jamás fuera de lo que ofrece en si la estéticade plugins como realplayer, así que casi sin lugara dudas, diría que no existe ni es posible ponerlo, lo cual no quiere decir que no puedas lograr esa misma estética con imágenes y capas; eso incluye el desplazamiento del marcado, solo que te llevará un poco de trabajo y mucho javascript.

Así que habrá que dedicarles un poco de tiempo y estudiarlos adecuadamente.

:)

Felicidad

furoya · #11 (**permalink**) 28/06/2004, 10:46

Ahora entiendo. Debí postear una barra limpia, sin formato, para evitar que se confundiera el código motor con el maquillaje. Pero, como siempre, estaba apurado y quise ahorrarme el tipeo copiando algún documento que ya tenía hecho. Y elegí el editor de colores.

La voy a postear ahora, aunque sigo sin saber cómo se comporta o cómo se adapta por lo menos a Mozila y Opera (si es que se puede), y sin muchas esperanzas de que alguien publique debajo una versión mejorada.

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<script type="text/javascript">
function charly(Bh,I){
desplH=Bh.scrollLeft;
document.getElementById(I).value=desplH;
}
</script>
<style type="text/css">

</style>
</head>
<body>
<input id="delta" size=2>
<div style="height:35px /*GROSOR APROX. DE UN SCROLLBAR(MÁXIMO)*/; width:300px /*LARGO QUE QUERRAMOS DARLE*/; overflow:auto" onscroll="charly(this,'delta')">
<div style="overflow:hidden; height:1px; width:400px /*LARGO DE SCROLLBAR + RANGO DE DESPLAZAMIENTO*/"></div>
</div>
</body>
</html>

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<script type="text/javascript">
function alfa(Bv,I){
desplV=Math.floor(Bv.scrollTop/5);
document.getElementById(I).value=desplV;
}
</script>
<style type="text/css">

</style>
</head>
<body>
<input id="bravo" size=2>
<div style="height:300px; width:35px; overflow:auto" onscroll="alfa(this,'bravo')">
<div style="overflow:hidden; height:800px; width:1px"></div>
</div>
</body>
</html>

saludos

furoya

Carlitos · #12 (**permalink**) 29/06/2004, 12:04

Interesante furoya.

Mira, tenía un ratito libre y he hecho esto: http://www.terra.es/personal8/litoszgz/slide.htm

Carlitos · #13 (**permalink**) 29/06/2004, 12:06

Acabo de comprobar que no va en netscape. Luego lo miro.

Carlitos · #14 (**permalink**) 29/06/2004, 12:13

Ya está. Probado y funcionando en IE6 y NS7.

furoya · #15 (**permalink**) 30/06/2004, 15:34

Ahora radge no va a tener que buscar.

furoya · #16 (**permalink**) 31/01/2005, 13:13

Hola de nuevo :

Me quedé pensando en eso de "generar" una barra solamente con el navegador.

Tomando el formato originalmente posteado por radge quise hacer algo en HTML y CSS, aunque obviamente tuve que usar un poco de JS.

Funcionan en IE y FF, aunque no se ven exactemente iguales.

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
<html>
<head> <title> BOTÓN DESLIZANTE.</title>
<script type="text/javascript">
//BARRA 1
var delta=0;
var eco,Gi,Gt;

function sinSeleccion(){
document.getElementById("Grad").onselectstart=new Function ("return false");
}

function Arrastra(N){
clearTimeout(eco);
Gt="G"+N;
if(delta==1){
for(i=1;i<11;i++){
Gi="G"+i;
document.getElementById(Gi).innerHTML="|"};
document.getElementById(Gt).innerHTML="<div class=BtnI></div><div class=Field></div><div class=BtnD></div><br>|";
document.getElementById("Valor").value=N};
}

function Sale(){
eco=setTimeout("delta=0",0.1)
}

function Inicia(N){
delta=1;
Arrastra(N);
}
//FIN BARRA 1

//BARRA 2
function despl(T){
valor=T.scrollLeft;
document.getElementById("muestra").value=Math.floor(valor/30);
}
//FIN BARRA 2
</script>
<style type="text/css">

#grad {border:4px inset; border-color:#cccccc; cursor:default}
#grad td{width:21px; height:30px; text-align:center; vertical-align:bottom; font-weight:900; font-size:12px; border:0}
#grad #G0 , #grad #G11{font-size:0; width:10px!important;}
.BtnI{width:10px; height:20px; border:solid 5px #333333; border-left-color:#cccccc; border-bottom-color:#cccccc; font-size:0; display:inline}
.BtnD{width:10px; height:20px; border:solid 5px #333333; border-right-color:#cccccc; border-bottom-color:#cccccc; font-size:0;; display:inline}
.Field{width:1px; height:20px; font-size:0;; display:inline}
#grad #Pista{border-width:4px 10px 0; border-style:solid; background-color:#333333; height:8px}
#Valor , #muestra{font-size:22px; text-align:center}
</style>
</head>
<body onload=sinSeleccion()>

<h2>Botón deslizante sin imagen.</h2>
<center>
<table unselectable="on" id=Grad bgcolor=#cccccc cellpadding=0 cellspacing=0 onmouseout="Sale()" onmouseup="delta=0">
<tr><td colspan=12 id=Pista></td></tr>
<tr>
<td onmouseover="Arrastra(1)" onmousedown="Inicia(1);" id=G0></td> 
<td onmouseover="Arrastra(1)" onmousedown="Inicia(1);" id=G1><div class=BtnI></div><div class=Field></div><div class=BtnD></div><br>|</td> 
<td onmouseover="Arrastra(2)" onmousedown="Inicia(2);" id=G2>|</td> 
<td onmouseover="Arrastra(3)" onmousedown="Inicia(3);" id=G3>|</td> 
<td onmouseover="Arrastra(4)" onmousedown="Inicia(4);" id=G4>|</td> 
<td onmouseover="Arrastra(5)" onmousedown="Inicia(5);" id=G5>|</td> 
<td onmouseover="Arrastra(6)" onmousedown="Inicia(6);" id=G6>|</td> 
<td onmouseover="Arrastra(7)" onmousedown="Inicia(7);" id=G7>|</td> 
<td onmouseover="Arrastra(8)" onmousedown="Inicia(8);" id=G8>|</td> 
<td onmouseover="Arrastra(9)" onmousedown="Inicia(9);" id=G9>|</td> 
<td onmouseover="Arrastra(10)" onmousedown="Inicia(10);" id=G10>|</td> 
<td onmouseover="Arrastra(10)" onmousedown="Inicia(10);" id=G11></td> 
</tr>
</table>
<p>
<input size=2 id=Valor>
</p>
</center>
<hr>
<h2>Botón deslizante con barra de desplazamiento.</h2>
<center>
<div style="overflow:auto; height:50px; width:200px" onscroll="despl(this)">
<div style="width:3200; height:1px; font-size:1px; overflow:hidden; background:transparent"></div>
</div>
<p>
<input id="muestra" size=3>
</center>
</body>
</html>

Lo que tenía en mente era crear una función del tipo

Código:

 
<script>slideBar("color","tamaño","cantidad_grados","nombre_variable")</script>

para la primera, y que la "dibuje" el navegador; pero quedará para más adelante.

saludos

furoya

Carlitos · #17 (**permalink**) 08/02/2005, 11:15

Interesante.

Pero sigo sin verle utilidad. Alguien que me diga una.

caricatos · #18 (**permalink**) 08/02/2005, 14:32

Hola a todos:

He visto que Furoya mencionaba una página mía, y pondré su enlace: http://www.pepemolina.com/barras/index.html

No estoy seguro a que se refiera a esta porque me parece que este mensaje es bastante antiguo (no entiendo ¿cómo no lo vi antes?)

De todos modos, me parece mejor el script de Carlitos (el actual de http://www.carlitos.com.es)

Si interesa el mío, se trata de iframes (me gustó mucho hacer esta página)

Saludetes

furoya · #19 (**permalink**) 10/02/2005, 15:24

Hola Caricatos : Sí, claro, era ése.

.
El tema es viejo, pero no tanto; hay mañanas en que me levanto y digo ¿qué me queda pendiente? y empiezo a poner al día mis asuntos, aunque me demore un poco (mi record son 20 años).

Hola Carlitos : Qué curioso. Nadie le preguntó a radge para qué lo quería.
Yo vengo a los foros para sacar ideas (como muchos); y me pareció coherente que alguien pretendiera una etiqueta HTML para hacer un botón deslizante, como hay en otros lenguajes; por eso me puse a trabajar. Pero no sé para que usarlo en el formato que propuso.

Aprovecho para agregar 2 comentarios sobre el código del que hice con tablas. Adolece del mismo problema que los de imágenes en cuanto a que el "botón" se escapa del puntero durante el arrastre si la velocidad de la máquina no es muy buena.
Además, hice trampa. La graduación está hecha con caracteres. Es cierto que siempre debe haber al menos 1 fuente instalada y que por eso no es necesario agregarle nada externo al navegador para que muestre la barra, pero en rigor de verdad no está generada completamente por aquel.

saludos

furoya

Edición :

En HTML 5 está incluído el

Código:

<input type="range" min="0" max="100">