Foro - Perl en Español

La comunidad de programadores en Perl de habla hispana.

Obviar


  • Publicidad

Select Multiple con Javascript

Preguntas y comentarios relacionadas con HTML y CSS.
Publicar una respuesta

Select Multiple con Javascript

Notapor macgregor » 2006-03-06 09:57 @456

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 :(
me siguen saliendo unas letras demasiado grandes :( :cry:
Alguien me puede hechar una mano?

Gracias.

Código: Seleccionar todo
         <!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>
MACGREGOR [TM]
Avatar de Usuario
macgregor
Perlero nuevo
Perlero nuevo
 
Mensajes: 80
Registrado: 2004-12-09 07:32 @355
Ubicación: españa
Arriba

Publicidad

Notapor monoswim » 2006-03-06 11:35 @524

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
MonoSwim
Perl Programming Language
Avatar de Usuario
monoswim
Perlero nuevo
Perlero nuevo
 
Mensajes: 452
Registrado: 2003-11-18 16:13 @717
Ubicación: Buenos Aires
Arriba

Re: Select Multiple con Javascript

Notapor explorer » 2006-03-06 12:01 @542

¿Has definido el tamaño de letra dentro de la tabla?
Código: Seleccionar todo
td {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 8pt;
}

Yo tengo un problema mayor... :)
JF^D Perl programming & Raku programming. Grupo en Telegram: https://t.me/Perl_ES
Avatar de Usuario
explorer
Administrador
Administrador
 
Mensajes: 14480
Registrado: 2005-07-24 18:12 @800
Ubicación: Valladolid, España
Arriba

Notapor macgregor » 2006-03-06 12:37 @567

en el fichero css tengo definido

Código: Seleccionar todo
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. :(

a ver si alguien me sabe decir que hago mal. :?

Gracias de antemano.
MACGREGOR [TM]
Avatar de Usuario
macgregor
Perlero nuevo
Perlero nuevo
 
Mensajes: 80
Registrado: 2004-12-09 07:32 @355
Ubicación: españa
Arriba

Re: Select Multiple con Javascript

Notapor explorer » 2006-03-06 17:11 @758

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)).
JF^D Perl programming & Raku programming. Grupo en Telegram: https://t.me/Perl_ES
Avatar de Usuario
explorer
Administrador
Administrador
 
Mensajes: 14480
Registrado: 2005-07-24 18:12 @800
Ubicación: Valladolid, España
Arriba

Re: Select Multiple con Javascript

Notapor explorer » 2006-03-06 17:30 @770

Vas a hacer lo siguiente:
En el fichero css pones algo como esto:
Código: Seleccionar todo
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.
JF^D Perl programming & Raku programming. Grupo en Telegram: https://t.me/Perl_ES
Avatar de Usuario
explorer
Administrador
Administrador
 
Mensajes: 14480
Registrado: 2005-07-24 18:12 @800
Ubicación: Valladolid, España
Arriba

Notapor kidd » 2006-03-06 21:56 @955

Hola:

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

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



SALUDOS
Uriel Lizama Perl programmer fundador de Perl en Español
Perl Programming Language
Avatar de Usuario
kidd
Creador de Perl en Español
Creador de Perl en Español
 
Mensajes: 1166
Registrado: 2003-10-15 16:52 @744
Ubicación: México
Arriba

Notapor macgregor » 2006-03-07 05:37 @275

Muchas gracias a todos por vuestros consejos.

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

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

Gracias :D

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 :)

Código: Seleccionar todo
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 :(

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. :(

Gracias de nuevo.

PD: :cry: 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 :(
MACGREGOR [TM]
Avatar de Usuario
macgregor
Perlero nuevo
Perlero nuevo
 
Mensajes: 80
Registrado: 2004-12-09 07:32 @355
Ubicación: españa
Arriba

Re: Select Multiple con Javascript

Notapor explorer » 2006-03-07 06:20 @306

macgregor escribiste: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 :)
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 escribiste:Bueno menos de los de tipo select!!! en morcilla y en notescapes va bien, pero en mocosoft no :(
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 escribiste:PD: :cry: 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 :(
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á...)
JF^D Perl programming & Raku programming. Grupo en Telegram: https://t.me/Perl_ES
Avatar de Usuario
explorer
Administrador
Administrador
 
Mensajes: 14480
Registrado: 2005-07-24 18:12 @800
Ubicación: Valladolid, España
Arriba
Publicar una respuesta

Volver a HTML

¿Quién está conectado?

Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 0 invitados

Powered by phpBB® Forum Software © phpBB Group
Traducción al Español Mexicano por nextgen en colaboración con phpbb-es.com
phpBB SEO
Advertisements by Advertisement Management