You are currently browsing the category archive for the ‘HTML’ category.

En una página web, se cargan muchas veces las opciones de un elemento SELECT de forma dinámica. Una forma de hacerlo es asignar un nuevo valor al atributo innerHTML. Desgraciadamente esto no funciona con el navegador Internet Explorer.

El atributo innerHTML no es estándar en Javascript, pero todos los navegadores suelen saber interpretarlo como el código HTML entre la etiqueta de inicio y del fin; es decir, el texto entre <SELECT> y </SELECT>. Es un atributo tan poderoso y tan fácil de entender, que cuesta aceptar que el Internet Explorer no lo entiende para un elemento como SELECT, que tantas veces carga un contenido dinámico.
Me imagino que todos los programadores de páginas web se ha estropeado con este problema alguna vez – unos como yo incluso varias veces por no haberse apuntado una nota sobre esta trampa. Espero que este artículo sirva de acortar las penurias de los más prójimos.

Echamos un vistazo al elemento SELECT y los dos botones “Cambiar innerHTML” y “Cambiar outerHTML”. Como este sitio web no permite incluir Javascript, no puedo incluir el ejemplo directamente en el artículo. Para probar y jugar se puede copiar el siguiente código en un fichero vacío, nombrarlo “select.html” y abrirlo en un navegador.

<div style="border: 1pt solid silver; text-align: center;">
	<script type="text/javascript">
		function changeInnerHtml()
		{
			mi_select = document.getElementById("mi_select");
			mi_select.innerHTML =
				"<option>Valor modificado por innerHTML</option>";
		}

		function changeOuterHtml()
		{
			mi_select = document.getElementById("mi_select");
			mi_select.outerHTML = "<select id='mi_select'>" +
				"<option>Valor modificado por outerHTML</option>" +
				"</select>";
		}
	</script>
	<select id="mi_select">
		<option>Valor inicial</option>
	</select>
	<br>
	<input type="submit" value="Cambiar innerHTML" onClick="changeInnerHtml();">
	<input type="submit" value="Cambiar outerHTML" onClick="changeOuterHtml();">
</div>

Inicialmente el elemento SELECT contiene una opción con el texto “Valor inicial”. Pulsando uno de los dos botones se cambia el contenido del elemento SELECT por una opción “Valor modificado”. Podemos elegir entre dos estrategias:

  1. Cambiar el atributo innerHTML, es decir, el texto entre las etiquetas <SELECT> y </SELECT> o
  2. Cambiar el atributo outerHTML que es el código que incluye las etiquetas de inicio y fin del elemento SELECT.

Podemos pulsar estos botones sin miedo – para reiniciar las opciones del elemento SELECT recarga la página.

Dependiendo del navegador que usamos, estos botones funcionan o no. En Mozilla Firefox, por ejemplo, el botón “Cambiar outerHTML” no tiene efecto, ya que el navegador desconoce el atributo outerHTML. Igual que innerHTML, el atributo outerHTML no es estándar tampoco. Sin embargo, Internet Explorer lo reconoce.

En versiones anteriores de Internet Explorer el elemento SELECT aparece vacío tras cambiar su atributo innerHTML.
Microsoft está consciente del problema (ya desde la versión veterana 5 del Internet Explorer) y ha propuesto varias alternativas en su comunicado Error de Internet Explorer establecer la propiedad del objeto seleccionar innerHTML. (Este es el título que fue calculado por el traductor automático en su momento. El título en inglés es “BUG: Internet Explorer Fails to Set the innerHTML Property of the Select Object”.)

Parece que se ha “resuelto” este problema en la versión 8: Ahora cambiar el atributo innerHTML no hace nada y se muestra en la lista de errores el mensaje: “El objeto no acepta esta propiedad o método.” Desgraciadamente no es una solución satisfactoria tampoco y no hay más remedio que utilizar una de la propuestas en el artículo mencionado arriba. Para hacer la elección más fácil, la versión 8 de Internet Explorer trata el atributo outerHTML igual como el atributo innerHTML. Es decir, no funciona – igual como en Mozilla Firefox donde nunca funcionó.

En conclusión, la única solución será añadir las opciones de una en una al
elemento SELECT
. En este contexto vale echar un ojo a JSON (JavaScript
Object Notation) antes de componer un bucle de Javascript mediante PHP u otro lenguaje de servidor.
Otra opción, desde luego, es usar un navegador como Opera. Este programa entiende ambas propiedades: innerHTML y outerHTML.

Referencias

Directamente relacionado con este artículo:

Información adicional:

Páginas web de los navegadores mencionados:

Artículos sobre HTML en este blog:

Anuncios

Cuando tenemos una tabla dentro de un texto, muchas veces nos parece lo más bonito de colocarla centrada. Sin embargo, hay una diferencia entre navegadores a la hora de colocar una tabla en el centro de la línea. No es posible conseguirlo únicamente con atributos de estilo. Es necesario especificar el atributo align de la tabla.

El siguiente código es una tabla dentro un elemento DIV con alineamiento centrado:

<div style="border: 1pt solid #fbb; text-align: center;">
	Una tabla con una celda
	<table border="1">
		<tr>
			<td>Una celda</td>
		</tr>
	</table>
</div>

Esto aparece en el navegador así:

Una tabla con una celda 

Una celda

Si tienes abierto este artículo en Mozilla Firefox o Opera, entonces la tabla se encuentra alineado a la izquierda. Si lo tienes abierto en Internet Explorer, entonces la tabla se encuentra centrada – aunque no dentro de este artículo (el autor de CSS de WordPress sabrá como). Hay que copiar el código en un fichero HTML vacío para ver este efecto.

Para poder centrar la tabla en los otros navegadores, es imprescindible de usar el atributo align:

<div style="border: 1pt solid #bfb;">
	Otra tabla con una celda
	<table border="1" align="center">
		<tr>
			<td>Una celda</td>
		</tr>
	</table>
</div>

El navegador muestra este código así:

Otra tabla con una celda 

Una celda

Esta representación aparece con el mismo alineamiento en todos los navegadores.

Referencias

Los tooltips son estás pequeñas etiquetas emergentes que se muestran cuando el cursor del ratón queda parado durante unos instantes encima de un componente visual de una ventana. Son muy prácticos para suministrar una información adicional relacionada a este componente.

En HTML es fácil crear un tooltip con el atributo title. El atributo title es válido para todos los elementos de HTML, por lo cual se puede poner un tooltip a absolutamente todo. Con el elemento SPAN es incluso posible añadir un tooltip a un texto sin más.

Por ejemplo, el código de HTML


Soy una <SPAN title="Soy un tooltip">prueba de tooltip</SPAN>.

aparece en el navegador como en la imagen.

Ejemplo de tooltip en HTML

La etiqueta con la frase “Soy un tooltip” emergió porque, durante unos instantes, dejé el cursor parado encima del contenido del elemento SPAN, la expresión “prueba de tooltip”.

Mediante hojas de estilo puedo crear un tooltip más sofisticado que aprovecha la característica hover del elemento A. Cómo sólo este elemento tiene esta característica, debo incluir cualquier objeto con este tipo de tooltip en un elemento A.


Soy otra <A class="mi_hover">prueba de tooltip</A>.

Lógicamente debo definir la clase de estilo mi_hover de forma apropiada. Como se puede observar, el elemento A no tiene el atributo href, por lo cual no es un enlace.

Una tercera manera de crear tooltips es mediante los eventos OnMouseOver y OnMouseOut. Estos eventos pueden llamar a funciones de Javascript que pueden hacer aparecer de todo. Es la forma más compleja de hacer un tooltip pero también la más completa.

Referencias

Escribe tu dirección de correo electrónico para suscribirte a este blog, y recibir notificaciones de nuevos mensajes por correo.

Únete a otros 50 seguidores

Archivos

mayo 2018
L M X J V S D
« Abr    
 123456
78910111213
14151617181920
21222324252627
28293031  
Anuncios