Perl en Español
  1. Home
  2. Tutoriales
  3. Foro
  4. Artículos
  5. Donativos
  6. Publicidad
 

Select Multiple con Javascript

 
Publicar nuevo tema   Responder al tema    Foros de discusión -> HTML
Mensaje Lun Mar 06, 2006 8:57 am
macgregor
Perlero Frecuente
Perlero Frecuente
 Registrado: 09 Dic 2004
Mensajes: 117
Ubicación: españa
Select Multiple con Javascript Responder citando
Hola a todos.
En este mensaje pongo el código html resultado de un cgi.
Lo pongo para que tengan un ejemplo de como resolvi el problema de gestionar un select multiple con javascript en un formulario.

Lo cierto es que lo pongo en el foro de HTML porque necesito que alguien me diga como hacer que esta pagina tenga un tamaño mas pequeño.
con una resolucion de 1024x768 me ocupa practicamente toda la ventana de ancho.
He jugado con el css y el tamaño de letra pero no consigo ningun resultado Sad
me siguen saliendo unas letras demasiado grandes Sad Crying or Very sad
Alguien me puede hechar una mano?

Gracias.

Código:
         <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
         <HTML>
         <HEAD>
         <TITLE> HYBRIDIZATION </TITLE>
         <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
         <link rel="stylesheet" type="text/css" href="../forms.css">
         <script type="text/javascript" src="../cookie.js"></script>
         
         <script type="text/JavaScript">
            <!--
            function sesion()
            {
               var id_session=GetCookie("session");
               if (id_session!=null)
               {
                  document.formulario.id_login.value=id_session;
               }
               else
               {
                  alert("Your entry is expired. Please login again.");
                  window.location.href="http://mi.server.es/cgi-bin/login.cgi";
               }
            }
            // -->
         </script>
         <script type="text/JavaScript">
         <!--
            function add_values(objetoSelect)
            {
               var opt_selected = new Array();
               var index = 0;
               for (var i=0;i < objetoSelect.options.length;i++)
               {
                  if (objetoSelect.options[i].selected)
                  {
                     opt_selected[index] = objetoSelect.options[i].value;
                     index++;
                  }
               }
               return opt_selected;
             }
         -->
         </script>
      </HEAD>
      <body onLoad="sesion()">
      <CENTER>
      <BR>
      <FORM name="formulario" id="formulario" action="http://mi.server.es/cgi-bin/DB_read_hibrid.cgi" method="post" enctype="application/x-www-form-urlencoded">
      <input type="hidden" name="id_login" value= "0">
      <TABLE BORDER="1" CELLSPACING="0" CELLPADDING="0" BGCOLOR="#D9D9D9" style ="text-align:center; color:#3131FF; border-color:#C9C9C9; border-style:ridge;">
      <TR><TD>
         <TABLE BORDER="0" style="text-align:center;color:#3131FF;">
         <TR>
            <th nowrap style="color:#000000;background-color:#B9B9B9">Exp. Reference</th>
            <th nowrap style="color:#000000;background-color:#B9B9B9">Slide</th>
            <th nowrap style="color:#000000;background-color:#B9B9B9">Array Type</th>
            <th nowrap style="color:#000000;background-color:#B9B9B9">Data Owner</th>
            <th nowrap style="color:#000000;background-color:#B9B9B9">Note Book H.</th>
            <th>&nbsp;</th>
            <th>Users</th>
            <th>&nbsp;</th>
            <th>New Users</th>
            <th>&nbsp;</th>
            <th rowspan="11" valign="top">
               <TABLE border="0">
                  <TR><TH nowrap style="color:#000000;background-color:#B9B9B9">Select Users</TH></TR>
                  <TR><TD><IMG alt="" WIDTH="1" HEIGHT="50" BORDER="0" src="../img/spacer.gif"/></TD></TR>
                  <TR><TD>
                  <SELECT name="SELECT_USER" id="SELECT_USER" size="10" multiple>
   <option value="121">121.- AALCARAZ</option><option value="105">105.- ABIGAS</option><option value="141">141.- ANAVARRO</option><option value="129">129.- ASKOUDY</option><option value="139">139.- CBENDOV</option><option value="107">107.- CFILLAT</option><option value="120">120.- CLOPEZ</option><option value="133">133.- CPUIGDOMEN</option><option value="102">102.- CPUJADES</option><option value="101">101.- FPOSAS</option><option value="135">135.- FSOLE</option><option value="110">110.- JARAN</option><option value="132">132.- JBAULIDA</option><option value="124">124.- JFERRER</option><option value="134">134.- JGARCIA</option><option value="138">138.- JGOMEZ</option><option value="137">137.- JMARTINEZ</option><option value="118">118.- JVALCARCEL</option><option value="103">103.- LAROLA</option><option value="127">127.- LFLORENSA</option><option value="131">131.- LPEREZ</option><option value="111">111.- LSEVILLA</option><option value="100">100.- MALDEA</option><option value="117">117.- MARBONES</option><option value="125">125.- MBACH</option><option value="116">116.- MBEATO</option><option value="115">115.- MCOROMINAS</option><option value="119">119.- MDIERSSEN</option><option value="114">114.- MFIGUERAS</option><option value="106">106.- MGUITART</option><option value="112">112.- MMARTELL</option><option value="136">136.- MMILA</option><option value="144">144.- MVILARDELL</option><option value="113">113.- MVIVES</option><option value="108">108.- NNOGUES</option><option value="122">122.- PPUIG</option><option value="128">128.- PREAL</option><option value="142">142.- PSARAGUETA</option><option value="109">109.- RMENDEZ</option><option value="126">126.- RTORRE</option><option value="143">143.- TDELRIO</option><option value="123">123.- TTHOMSON</option><option value="130">130.- TWAES</option><option value="140">140.- VCAMPUZANO</option><option value="104">104.- XESTIVILL</option>      
                  </SELECT>
                  </TD></TR>
               </TABLE>
            </th>
         </TR>
   
      <TR>
         <TD>28-OCT-04</TD>
         <TD>251239118111_DS</TD>
         <TD>Agilent 44K</TD>
         <TD>PREAL</TD>
         <TD>DOTERO</TD>
         <TD>&nbsp;</TD>
         <TD><Input type="textarea" value="" disabled="true" size="20"></TD>
         <TD>&nbsp;</TD>
         <TD><Input type="textarea" name="hid_485" id="hid_485" size="18"></TD>
         <TD><button type="button" name="add_1" id="add_1" onclick="javascript:document.formulario.hid_485.value=add_values(document.formulario.SELECT_USER);"> <IMG src="../img/add.png"/> </button></TD>
      </TR>
   
      <TR>
         <TD>20-OCT-04</TD>
         <TD>251239118110_DS</TD>
         <TD>Agilent 44K</TD>
         <TD>PREAL</TD>
         <TD>DOTERO</TD>
         <TD>&nbsp;</TD>
         <TD><Input type="textarea" value="" disabled="true" size="20"></TD>
         <TD>&nbsp;</TD>
         <TD><Input type="textarea" name="hid_483" id="hid_483" size="18"></TD>
         <TD><button type="button" name="add_1" id="add_1" onclick="javascript:document.formulario.hid_483.value=add_values(document.formulario.SELECT_USER);"> <IMG src="../img/add.png"/> </button></TD>
      </TR>
   
      <TR>
         <TD>20-OCT-04</TD>
         <TD>251239118108</TD>
         <TD>Agilent 44K</TD>
         <TD>PREAL</TD>
         <TD>DOTERO</TD>
         <TD>&nbsp;</TD>
         <TD><Input type="textarea" value="" disabled="true" size="20"></TD>
         <TD>&nbsp;</TD>
         <TD><Input type="textarea" name="hid_482" id="hid_482" size="18"></TD>
         <TD><button type="button" name="add_1" id="add_1" onclick="javascript:document.formulario.hid_482.value=add_values(document.formulario.SELECT_USER);"> <IMG src="../img/add.png"/> </button></TD>
      </TR>
   
      <TR>
         <TD>20-OCT-04</TD>
         <TD>251239118107_DS</TD>
         <TD>Agilent 44K</TD>
         <TD>PREAL</TD>
         <TD>DOTERO</TD>
         <TD>&nbsp;</TD>
         <TD><Input type="textarea" value="" disabled="true" size="20"></TD>
         <TD>&nbsp;</TD>
         <TD><Input type="textarea" name="hid_481" id="hid_481" size="18"></TD>
         <TD><button type="button" name="add_1" id="add_1" onclick="javascript:document.formulario.hid_481.value=add_values(document.formulario.SELECT_USER);"> <IMG src="../img/add.png"/> </button></TD>
      </TR>
   
      <TR>
         <TD>20-OCT-04</TD>
         <TD>251239118106</TD>
         <TD>Agilent 44K</TD>
         <TD>PREAL</TD>
         <TD>DOTERO</TD>
         <TD>&nbsp;</TD>
         <TD><Input type="textarea" value="" disabled="true" size="20"></TD>
         <TD>&nbsp;</TD>
         <TD><Input type="textarea" name="hid_480" id="hid_480" size="18"></TD>
         <TD><button type="button" name="add_1" id="add_1" onclick="javascript:document.formulario.hid_480.value=add_values(document.formulario.SELECT_USER);"> <IMG src="../img/add.png"/> </button></TD>
      </TR>
   
      <TR>
         <TD>19-OCT-04</TD>
         <TD>251239118518</TD>
         <TD>Agilent 44K</TD>
         <TD>PREAL</TD>
         <TD>DOTERO</TD>
         <TD>&nbsp;</TD>
         <TD><Input type="textarea" value="" disabled="true" size="20"></TD>
         <TD>&nbsp;</TD>
         <TD><Input type="textarea" name="hid_479" id="hid_479" size="18"></TD>
         <TD><button type="button" name="add_1" id="add_1" onclick="javascript:document.formulario.hid_479.value=add_values(document.formulario.SELECT_USER);"> <IMG src="../img/add.png"/> </button></TD>
      </TR>
   
      <TR>
         <TD>19-OCT-04</TD>
         <TD>251239118517</TD>
         <TD>Agilent 44K</TD>
         <TD>PREAL</TD>
         <TD>DOTERO</TD>
         <TD>&nbsp;</TD>
         <TD><Input type="textarea" value="" disabled="true" size="20"></TD>
         <TD>&nbsp;</TD>
         <TD><Input type="textarea" name="hid_478" id="hid_478" size="18"></TD>
         <TD><button type="button" name="add_1" id="add_1" onclick="javascript:document.formulario.hid_478.value=add_values(document.formulario.SELECT_USER);"> <IMG src="../img/add.png"/> </button></TD>
      </TR>
   
      <TR>
         <TD>19-OCT-04</TD>
         <TD>251239118516</TD>
         <TD>Agilent 44K</TD>
         <TD>PREAL</TD>
         <TD>DOTERO</TD>
         <TD>&nbsp;</TD>
         <TD><Input type="textarea" value="" disabled="true" size="20"></TD>
         <TD>&nbsp;</TD>
         <TD><Input type="textarea" name="hid_477" id="hid_477" size="18"></TD>
         <TD><button type="button" name="add_1" id="add_1" onclick="javascript:document.formulario.hid_477.value=add_values(document.formulario.SELECT_USER);"> <IMG src="../img/add.png"/> </button></TD>
      </TR>
   
      <TR>
         <TD>19-OCT-04</TD>
         <TD>251239118515</TD>
         <TD>Agilent 44K</TD>
         <TD>PREAL</TD>
         <TD>DOTERO</TD>
         <TD>&nbsp;</TD>
         <TD><Input type="textarea" value="" disabled="true" size="20"></TD>
         <TD>&nbsp;</TD>
         <TD><Input type="textarea" name="hid_476" id="hid_476" size="18"></TD>
         <TD><button type="button" name="add_1" id="add_1" onclick="javascript:document.formulario.hid_476.value=add_values(document.formulario.SELECT_USER);"> <IMG src="../img/add.png"/> </button></TD>
      </TR>
   
      <TR>
         <TD>19-OCT-04</TD>
         <TD>251239118514</TD>
         <TD>Agilent 44K</TD>
         <TD>PREAL</TD>
         <TD>DOTERO</TD>
         <TD>&nbsp;</TD>
         <TD><Input type="textarea" value="" disabled="true" size="20"></TD>
         <TD>&nbsp;</TD>
         <TD><Input type="textarea" name="hid_475" id="hid_475" size="18"></TD>
         <TD><button type="button" name="add_1" id="add_1" onclick="javascript:document.formulario.hid_475.value=add_values(document.formulario.SELECT_USER);"> <IMG src="../img/add.png"/> </button></TD>
      </TR>
   
         </TABLE>
      </TD></TR>
      </TABLE>
      </CENTER>
      </BODY>
      </HTML>
Mensaje Lun Mar 06, 2006 10:35 am
monoswim
Vive para Perl en Español
Vive para Perl en Español
 Registrado: 18 Nov 2003
Mensajes: 716
Ubicación: Buenos Aires
Responder citando
la única solución que veo es la de achicar las letras...Tiene muchas columnas esa tabla, no veo otra forma de achicarlo...

Espero que te sirva

Saludos
PD: Talvés usando otro formato de listado que cada fila tenga las columnas en sub filas como ser
col1.1=col1.1
col1.2=col1.2
col2.1=col2.1
col2.2=col2.2
Mensaje Lun Mar 06, 2006 11:01 am
explorer
Moderador
Moderador
 Registrado: 24 Jul 2005
Mensajes: 4103
Ubicación: Valladolid, España
Responder citando
¿Has definido el tamaño de letra dentro de la tabla?
Código:
td {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 8pt;
}

Yo tengo un problema mayor... Smile
Mensaje Lun Mar 06, 2006 11:37 am
macgregor
Perlero Frecuente
Perlero Frecuente
 Registrado: 09 Dic 2004
Mensajes: 117
Ubicación: españa
Responder citando
en el fichero css tengo definido

Código:
TH { font-size: 10pt; text-decoration: none; }
td { font-family:verdana,Arial; font-size:8pt; }


tambien he provado poniendo font-size: 60%; en la tabla sin incluir la definición del fichero css.
No entiendo porque me sigue saliendo tan grande el tamaño de las letras.

En resoluciones grandes se ve perfecto pero en resoluciones pequeñas es un horror. Sad

a ver si alguien me sabe decir que hago mal. Confused

Gracias de antemano.
Mensaje Lun Mar 06, 2006 4:11 pm
explorer
Moderador
Moderador
 Registrado: 24 Jul 2005
Mensajes: 4103
Ubicación: Valladolid, España
Responder citando
Primero... la regla básica del html... NUNCA sabremos exáctamente cómo va a ver nuestra página el usuario. No sabemos si está utilizando una pantalla de 21 pulgadas o la pantalla de un celular. Lo ideal sería hacer la salida independientemente de la pantalla.
Pero como ese no es el caso, estamos obligados a dar una apariencia a nuestros textos para que se vean bien en la mayoría de monitores.
Haz la prueba de cambiar el 8pt a 6pix (o 6px, ya no me acuerdo).
Otra unidad de medida MUY recomendable es el em. Importante es que sigas utilizando la Verdana como fuente de letras (comprueba que efectivamente la está utilizando y no la Arial, si no es así, quizás o no está instalada, o no la encuentra -comprueba que escribes en el css Verdana (con la 'V' mayúscula)).
Mensaje Lun Mar 06, 2006 4:30 pm
explorer
Moderador
Moderador
 Registrado: 24 Jul 2005
Mensajes: 4103
Ubicación: Valladolid, España
Responder citando
Vas a hacer lo siguiente:
En el fichero css pones algo como esto:
Código:
th { font-size: 8pt; text-decoration: none; }
td { font-family: Verdana,Arial; font-size: 6pt; }
.m { font-family: Verdana,Arial; font-size: 6pt; }
La clase m es para definir el estilo en aquellos elementos que quieres también hacer 'pequeños'.
Luego, en el código html, vete a todas las marcas <input> y dentro de ellas agregas class="m".
Finalmente, si también quieres empequeñecer la lista de opciones que hay a la derecha, vete a la etiqueta <select> y haces lo mismo, le agregas la clase m.
Mensaje Lun Mar 06, 2006 8:56 pm
kidd
Creador de Perl en Español
Creador de Perl en Español
 Registrado: 15 Oct 2003
Mensajes: 1389
Ubicación: México
Responder citando
Hola:

Más fácil que poner la clase m a cada input puedes hacer:

Código:

SELECT,INPUT,TEXTAREA{
font-family:sans-serif,arial,helvetica;
font-size:8pt;
font-weight:normal;
}



SALUDOS
Mensaje Mar Mar 07, 2006 4:37 am
macgregor
Perlero Frecuente
Perlero Frecuente
 Registrado: 09 Dic 2004
Mensajes: 117
Ubicación: españa
Responder citando
Muchas gracias a todos por vuestros consejos.

En principio el error era que tenia definido Verdana con la V minuscula. Shocked

Pero tendre en cuenta lo que me habeis dicho para mejorar la presentación de mis paginas.

Gracias Very Happy

Esta es la parte principal del fichero css que tenia y he modificado.

Explorer, hasta que no lo has dicho no me habia fijado en lo de pt y px. va a ser que los dos son validos, supongo que px es pixel y pt point Smile

Código:

body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px;
   background-image: url(img/crg-microarray.jpg);
   margin-top: 20px; margin-right: 10px; margin-bottom: 10px; margin-left: 10px}
p { margin: 10px 15px 10px 25px ;
   text-align:justify; text-indent: 30px;
}
A {text-decoration: none}
a:link {color: #0000FF} 
a:visited {color: #6800AE}
a:hover {color: #FF0000}
a:active {color: #0000FF}
li { font-size: 12px; }
TABLE { font-family:Verdana,Arial}
TH { font-size: 9pt; text-decoration: none; }
td { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7pt;}

textarea {background-color:#ECE9D8; overflow:auto; border: solid; border-color:#555555; border-width: 1px; color: #000099; font-size: 8pt; z-index:0;}
input { background-color:#ECE9D8; border: 1px solid #666666; font-size:10pt; color: #000099; font-size: 8pt; z-index:0;}
select { background-color:#EDEDED; border: 1px solid #666666; font-size:10pt; color: #000099; font-size: 8pt; z-index:0;}
button {background-color:#ECE9D8; border: solid; border-color:#555555; border-width: 1px; color: #000099; font-size: 8pt; z-index:0;}



Ya puestos aprovecho para pedirles que si lo saben me den una explicacion a algo que no alcanzo a comprender. Bueno si, tiene que ver con las famosas incompatibilidades entre navegadores.

En la pagina principal del sitio en el que trabajo he creado un menu desplegable que al expandirse se posiciona encima de todos los elementos que hay en pantalla.

(He jugado un poco con los z-index....)

Bueno menos de los de tipo select!!! en morcilla y en notescapes va bien, pero en mocosoft no Sad

Despues de hacer varias pruebas solo se me ocurre ponerlos lo suficientemente "lejos" del desplegable, para que no se note que al expandirse no los tapa. Sad

Gracias de nuevo.

PD: Crying or Very sad es una pena que lo mas usado en informatica sea muy a menudo lo mas cutre y lamentable. Y que los politiqueos entre empresas le toquen la moral a los programadores de todo el mundo Sad
Mensaje Mar Mar 07, 2006 5:20 am
explorer
Moderador
Moderador
 Registrado: 24 Jul 2005
Mensajes: 4103
Ubicación: Valladolid, España
Responder citando
macgregor escribió:
Explorer, hasta que no lo has dicho no me habia fijado en lo de pt y px. va a ser que los dos son validos, supongo que px es pixel y pt point Smile
Sí, pero es siempre preferible usar pt a px, y siempre em a pt. Con px se refiere a pixel de pantalla, con lo que puedes crear páginas con un tamaño fijo de tipo de letra, lo cuál está mal, porque no le das opción al usuario a ampliarla, en caso de que tenga alguna dificultad visual. Con el pt pasa algo parecido, pero algunos navegadores permiten el escalado de todos los tipos definidos así. Por eso, en Firefox o IExplorer, puedes cambiar el tamaño relativo del tipo de letra con sólo utilizar el botón de rueda del ratón. Con em es todo relativo, con lo que entonces le das control total al usuario para elegir el tamaño de todos los elementos.
No es aconsejable fiarse del tamaño de monitor y resolución que tiene un cliente. Es más fácil seguir las estadísticas a nivel mundial. Las que existen en este momento dicen que el 55% de los internautas tienen resoluciones de 1024x768 y un 15%, superiores. Hay otro 15% que tiene 800x600. Del resto, no se sabe (utilizan sistemas muy variopintos, como ordenadores embebidos, pantallas LCD, teléfonos móviles, PDA, etc. etc.
macgregor escribió:
Bueno menos de los de tipo select!!! en morcilla y en notescapes va bien, pero en mocosoft no Sad
Y eso que también puedes pensar en lo siguiente: tanto en IExplorer como en Firefox (sobre todo este último), los usuarios pueden agregar complementos a esos programas que modifiquen el comportamiento de esos o de otros controles. Por ejemplo, yo utilizo una extensión de Firefox que me permite reescalar al tamaño que me de la gana las cajas de texto textarea, con sólo pinchar y arrastrar cualquiera de sus cuatro lados y/o esquinas. El control no volverá a su tamaño original hasta que pulse el botón de enviar. Es muy útil para cuando estás en un formulario con una textarea muy pequeña (como puede ser el caso de este foro, por ejemplo).
macgregor escribió:
PD: Crying or Very sad es una pena que lo mas usado en informatica sea muy a menudo lo mas cutre y lamentable. Y que los politiqueos entre empresas le toquen la moral a los programadores de todo el mundo Sad
Yo no tengo problemas... sólo uso estándares. Si un navegador no sigue el estándar, no es problema mío. Si el cliente se queja, que se queje a microsoft. Bueno, por fortuna va a salir la versión 7 y ya tendréis muchas cosas arregladas (y a saber las incompatibilidades que generará...)
Publicar nuevo tema   Responder al tema    Foros de discusión -> HTML Todas las horas son GMT - 6 Horas
Página 1 de 1



Powered by phpBB © 2001, 2005 phpBB Group