Foros del Web » Programando para Internet » Javascript »

como colocar un scroll horizontal en un select

Estas en el tema de como colocar un scroll horizontal en un select en el foro de Javascript en Foros del Web. Mi duda es la siguiente: Tengo un select de tamaño(size) 15 y contiene x cantidad de valores. (donde x > 0) Si se pasa de ...
  #1 (permalink)  
Antiguo 02/01/2004, 11:28
 
Fecha de Ingreso: diciembre-2003
Mensajes: 45
Antigüedad: 20 años, 4 meses
Puntos: 0
como colocar un scroll horizontal en un select

Mi duda es la siguiente:

Tengo un select de tamaño(size) 15 y contiene x cantidad de valores. (donde x > 0) Si se pasa de los 15 valores en el select me aparecera un scroll vertical con el que me puedo mover entre todos los valores. El ancho del select se determina por el valor que contenga mas caracteres, lo que quiero es que el select tenga un valor ancho fijo y que si uno o mas valores del select se pasan del ancho no me extienda el select, si no que pueda tener un scroll horizontal con el que pueda moverme de derecha a izquierda y viceversa, sin necesidad de cambiar el ancho de mi scroll.


Si esto se puede hacer de una manera secilla les agradeceria me lo comunicaran.

Si es de una manera complicada, pues tambien. :)

Gracias.

Oscar.
  #2 (permalink)  
Antiguo 02/01/2004, 11:32
 
Fecha de Ingreso: diciembre-2003
Mensajes: 45
Antigüedad: 20 años, 4 meses
Puntos: 0
Re: como colocar un scroll horizontal en un select

Cita:
Mensaje Original por ascar
sin necesidad de cambiar el ancho de mi scroll.
Perdon es el ancho de mi select no scroll
  #3 (permalink)  
Antiguo 07/01/2004, 17:10
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 5 meses
Puntos: 317
Hola ascar:

No estoy seguro del por qué estás usando un select y no check o

radio que solucionarían varios de tus problemas. Seguramente es un tema de diseño más que de

practicidad; como el de no poner el select centrado y que ocupe el espacio que necesite hasta el ancho

de ventana.

Mi inquina hacia las limitaciones de formato en los elementos de formulario ya es visceral. He lanzado diatribas ( algunas en

estos foros ) que terminaron hasta sugiriendo el reemplazo por otros elementos simulados, princpalmente con Javascript,

para darle formato a selects , input files , checkboxes que se comporten como los reales.

Ésto no va a resolver tu tema, aunque espero que te sirva como una idea nueva.

Código:
<HTML>
<HEAD>
<SCRIPT>

var valor="0"

function alfa(tt,vv){
if(tt.className=="sel"){
tt.className="des"; valor=(valor*1)-(vv*1)}
else {
tt.className="sel"; valor=(vv*1)+(valor*1)}
}

function bravo(){
celdas=document.all.tags("TD");
alert(valor);
for(i=0;i<celdas.length;i++) celdas[i].className="des";
valor=0;
}



function charly(){
valor="";
celdas=document.all.tags("TD");
for(i=0;i<celdas.length;i++){
if(celdas[i].className=="sel") valor+=celdas[i].innerText+" \r\n";
}
alert(valor);
for(i=0;i<celdas.length;i++) celdas[i].className="des";
valor="";

}
</SCRIPT>
<STYLE>
.des{background-color:white; color:black}
.sel{background-color:navy; color:white}
td{}

</STYLE>
</HEAD>
<BODY>
<center>
<div style="width:200px; height:110px; overflow:auto">
<table border=0 style=cursor:default>
<tr><TD class=des onclick="alfa(this,1)"><nobr><b>VALE 01 </b>QWERTYUIOPQWE</nobr></td></tr>
<tr><td class=des onclick="alfa(this,2)"><nobr><b>VALE 02 </b></nobr></td></tr>
<tr><td class=des onclick="alfa(this,4)"><nobr><b>VALE 04 </b>QWERTYUIOPQWERTY</nobr></td></tr>
<tr><td class=des onclick="alfa(this,8)"><nobr><b>VALE 08 </b></nobr></td></tr>
<tr><td class=des onclick="alfa(this,16)"><nobr><b>VALE 16 </b>QWERTYUIOP</nobr></td></tr>
<tr><td class=des onclick="alfa(this,32)"><nobr><b>VALE 32 </b></nobr></td></tr>
<tr><td class=des onclick="alfa(this,64)"><nobr><b>VALE 64 </b>QWERTYUIOPQWERTYUIOP</nobr></td></tr>
</table>
</div>
<p>
<INPUT type=button onclick=bravo() value="Suma Valores">
<p>
<INPUT type=button onclick=charly() value="Suma Cadenas">
</center>
</BODY>
</HTML>
Di por hecho que estás usando un selector múltiple ( la verdad, no sé por qué ); en éste no es necesario usar [CTRL]

para seleccionar más de una opción, pero tampoco funciona el [SHIFT] para selección "desde-hasta", ni las teclas de

dirección para bajar o subir, ni las opciones alfanuméricas; así que el saldo termina siendo negativo. Sí, bueno, es sólo un

ejemplo que hice apurado, seguro se puede mejorar.

saludos

furoya
  #4 (permalink)  
Antiguo 07/01/2004, 18:01
 
Fecha de Ingreso: diciembre-2003
Mensajes: 45
Antigüedad: 20 años, 4 meses
Puntos: 0
De acuerdo

Gracias por el script.

Como apenas estoy empezando a programar con javascript me queda dificil entender el codigo pero todo es cuestion de meterle la mano.

Lo que quiero es mas sencillo de lo que crees solo necesito un select de una sola opcion a selecionar, necesito que se seleccione una opcion y me devuelva la posicion de esta, por ejemplo si se selecciona la tercera me devuelve un 3.

Con este indice tomo unos dato que me llegan de otro lado.

Te agradezco de nuevo la ayuda voy a ver como puedo usar el script en mi trabajo.

P.D: Yo ya daba por muerto este tema pero resurgio de las cenizas como el fenix

ascar :adios
  #5 (permalink)  
Antiguo 11/01/2004, 13:58
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 5 meses
Puntos: 317
Bueno. &nbsp;Bueno. &nbsp;Bueno. ... Parece que no huiste despavorido después de ver el engendro -digo- el ejemplo &nbsp;que puse más arriba. Éso habla bien de ti; demuestra que tienes la mente abierta; o que me das la razón como a los locos.

Me hubiera gustado una copia del código de tu select, pero vamos a suponer que sea algo como ésto:

Código:
<select size="15"/*CANTIDAD DE OPCIONES VISIBLES*/ >
<option value=1>1 QWERTYUO
<option value=2>2
<option value=3>3 QWERTYUOPQWER
<option value=4>4
<option value=5>5 QWE
<option value=6>6
<option value=7>7 QWERTYUOPQ
<option value=8>8
<option value=9>9 QWERTY
<option value=10>10
<option value=11>11 QWERTYUOPQWER
<option value=12>12
<option value=13>13
<option value=14>14 QWERTY
<option value=15>15
<option value=16>16
<option value=17>17 QWERTYUOPQ
<option value=18>18
<option value=19>19
<option value=20>20 QWERTYUOPQWERTYUOP
<option value=21>21
<option value=22>22
<option value=23>23
<option value=24>24 QWER
<option value=25>25
<option value=26>26
<option value=27>27
<option value=28>28 QWERTYUOPQWE
<option value=29>29
<option value=30>30
</select>
Usé value para darle un valor a cada opción, que luego va a ser leido por el escript. Por supuesto que se puede usar cualquier otro método.

Ahora veamos un híbrido entre los dos códigos.

Código:
<form name="formulario1">

<div style="overflow:auto; border:1px black solid; 
height:150pt; width:90pt">

<select name="selector1" size="30"/*CANTIDAD DE OPCIONES*/ >
<option value=1>1 QWERTYUO
<option value=2>2
<option value=3>3 QWERTYUOPQWER
<option value=4>4
<option value=5>5 QWE
<option value=6>6
<option value=7>7 QWERTYUOPQ
<option value=8>8
<option value=9>9 QWERTY
<option value=10>10
<option value=11>11 QWERTYUOPQWER
<option value=12>12
<option value=13>13
<option value=14>14 QWERTY
<option value=15>15
<option value=16>16
<option value=17>17 QWERTYUOPQ
<option value=18>18
<option value=19>19
<option value=20>20 QWERTYUOPQWERTYUOP
<option value=21>21
<option value=22>22
<option value=23>23
<option value=24>24 QWER
<option value=25>25
<option value=26>26
<option value=27>27
<option value=28>28 QWERTYUOPQWE
<option value=29>29
<option value=30>30
</select>

</div>

</form>
<p>
<button 
onclick="javascript:alert(document.formulario1.selector1.value)">
Muestra Valor</button>
Como notarás, casi no usa Javascript ( podría perfectamente estar en un foro de HTML ), por lo que no vas a tener problemas en adaptarlo para tu select.

Una aclaración. Todos los códigos son para IE5+, otros navegadores pueden necesitar una sintaxis diferente.

Por último, conviene revisar los mensajes cada tanto; ya que no todos nos conectamos todos los días, ni todas las respuestas se encuentran al toque. A veces es necesario experimentar un poco, o buscar en la red o, como recomienda JavierB, enviar un mail al que sabe ( y esperar que responda ).

saludos

furoya
  #6 (permalink)  
Antiguo 13/01/2004, 10:20
 
Fecha de Ingreso: diciembre-2003
Mensajes: 45
Antigüedad: 20 años, 4 meses
Puntos: 0
De acuerdo

El ejemplo esta muy bueno pero quiero manipularlo mas pero no entiendo muy bien en html el uso del tag <div> en especial el uso que le diste.

Si sabes donde puedo encontrar informacion sobre el uso completo del tag <div> te lo agradeceria.

ascar
  #7 (permalink)  
Antiguo 17/01/2004, 20:14
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 5 meses
Puntos: 317
En cualquier tutorial; pero yo no sabría recomendarte ninguno. Prueba en las FAQs de CSS y HTML, o pregunta en esos foros.

También puedes entrar

overflow scroll hidden auto div

en algún buscador.

saludos

furoya.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 21:29.