tus camisetas frikis en camisetafriki.com

Archive

Archive for March, 2009

Tooltip en css y javascript para menu desplegable que funciona en internet explorer 6

March 19th, 2009 Fernando Gallego No comments

Antes de que sigas leyendo, no, no es posible hacer un tooltip en cada opción del desplegable en IE6 ya que ni el atributo title ni los eventos de ratón están disponibles para la etiqueta option. Para otros navegadores consulta mi post anterior.

Para hacer un tooltip funcional en IE6, se debe incluir el código siguiente:

1
2
3
4
5
6
7
8
9
10
11

<style>
#tooltip {
  position: absolute;
  display:none;
  padding:1px 2px 1px 2px;
  border: 1px solid black;
  background-color:#FFFF99;
  width:400px;
  z-index:1000;
}			
</style>

Esto crea la clase tooltip en CSS para asignar al div que almacenerá el texto del tooltip.

Ahora incluimos las funciones en javascript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<script language="javascript" type="text/javascript">
// This function checks the mouse event
function checkEvent(e) {
	if (!e) var e = window.event;
	if (e.target) targ = e.target;
	else if (e.srcElement) targ = e.srcElement;
	showHideToolTip(targ, e, e.type)
}
// This function shows/hides the tooltip
function showHideToolTip (theDropDown, e, eType)
{
 var toolTipObj = new Object();
 toolTipObj = document.getElementById("tooltip");
 toolTipObj.innerHTML = theDropDown.options[theDropDown.selectedIndex].text;
 if(eType == "mouseout"){
  toolTipObj.style.display = "none";
   } else
 {
  toolTipObj.style.display = "inline";
  toolTipObj.style.top = e.y + 15;
  toolTipObj.style.left = e.x + 10;
 }
}

Esto sirve para comprobar el evento sobre el control y para mostrar u ocultar el tooltip.

Luego solo hay que añadir en el html el siguiente div

<div id="tooltip"></div>

Y añadir al select o dropdown que tengamos lo siguiente antes de cerrar el tag (>):

onMouseOver="checkEvent(this.event);" 
onMouseOut="checkEvent(this.event);" 
onMouseMove="checkEvent(this.event);"

Ver demo (solo IE7+)

Categories: Programacion Tags: , ,

Tooltip en menús desplegables tipo select,combo y dropdown

March 18th, 2009 Fernando Gallego 2 comments

Buenas, siguiendo estos días unos posts dedicados al infernal Internet Explorer y cómo algunas empresas, no sólo se empeñan en jorobar empleandolo, sino además manteniendo la versión 6 como “corporativa”, hoy vamos a aprender como implementar un tooltip para menús desplegables tipo select (html) o dropdown(asp.net)

Para IE7 y navegadores que funcionan bien como Firefox, podemos hacer uso del atributo title de los elementos html ya que se dispara el tooltip en el evento mouseover automáticamente (cosa que en IE6 no ocurre por eso hay que hacerlo de otra manera).

Si tenemos un desplegable que se llena dinámicamente, no podemos poner el title a cada option, ya que aun no existen a la hora de diseñar el formulario, por esto se puede echar mano de javascript con la siguiente funcion:

1
2
3
4
5
6
7
8
9
10

function tooltips(){			
        items = document.getElementsByTagName("option");
	for(i=0; i<items.length; i++)
	{
	       items[i].title=items[i].text;				
	}
	drop = document.getElementById("select");
	drop.onchange = tooltipselect;
	tooltipselect();
};

llamando a esta funcion en el body así:

1

<body onload="javascript:tooltips()";>

Con esto añadiremos el title a todos los dropdowns de la página así al desplegar el select, nos aparecerá un tooltip para cada option.

Para añadir también un tooltip a la opción seleccionada se incluye la siguiente función, que como se ve, es llamada al final de la anterior (asumiendo que el select tiene como id=”select”):

1
2
3
4
5

function tooltipselect()
{
	drop = document.getElementById("select");
	drop.title = drop.options[drop.selectedIndex].text;
};

Esto hace que al cambiar la opción, se actualice el tooltip del desplegable cerrado.

Ver una demo

Categories: Programacion, Viaje a italia, fotolog Tags: , ,

Instalar múltiples versiones de Internet Explorer

March 17th, 2009 Fernando Gallego No comments

A raíz del post anterior donde podemos detectar la version del internet explorer, hoy podemos instalar más de una versión simultánea del mismo con el fin de probar distintas maquetaciones, dada la gran afición del Internet Explorer 6 a joder modificar la maquetación debido a mútiples bugs features, siempre viene bien tener distintas versiones a mano para optimizar el diseño y aplicación a mútiples navegadores con sus tocahuevos usuarios detrás.

No voy a explicar como funciona, para eso lo veis aquí pero se puede instalar descargandolo de Multiple IE Setup(10,3 MB sólo Win XP )

Como sólo te instala hasta el IE6, recomiendo instalar el 7 de forma normal y luego instalar esto para disponer de las demás versiones.

Menu de instalacion de multiples IE

Forgotten Projects recomienda encarecidamente usar Mozilla Firefox que es más seguro, más estable, más útil, más bonito, más ampliable, más opensource y más más

Categories: Programacion, Tecnología Tags: , ,

Javascript, detectar la versión de Internet Explorer

March 16th, 2009 Fernando Gallego 2 comments

Como hace mucho que no escribo, voy a hacerlo comentando algo que he necesitado hoy en el curro, que es identificar la versión de internet explorer para poder realizar una función u otra, que sabemos que no va a ser compatible en una versión y en otra si, vamos, lo típico.

Una manera es a partir de la versión de javascript, la cual no es muy fiable.

El código que nos sirve para almacenar la versión en una variable es el siguiente:

1
2

var ieVer=/*@cc_on function(){ switch(@_jscript_version){ case 1.0:return 1; case 3.0:return 3; case 5.0:return 5; case 5.1:return 5; case 5.5:return 5.5; case 5.6:return 6; case 5.7:return 7; case 5.8:return 5.8; }}()||@*/0;
if(/MSIE 6.0/i.test(navigator.userAgent)) {ieVer=6;}

Las instrucciones entre /*@cc_on y */ son comentarios condicionales (y que ni yo sabía que existía tal cosa) y por lo visto es tan poco estándar que sólo internet explorer lo lee, así que de entrada ignoramos que otros navegadores se metan por ahí y la lien. De este modo valdrá 0 para el resto de navegadores (y podemos entonces comparar la versión de éstos de otras maneras).

La parte de dentro del comentario chungo, asocia un valor a cada versión del IE, de este modo, la versión 1 devuelve 1, la versión 3 devuelve 3, etc…

Se comprueba hasta el 5.8, luego el 6 se comprueba fuera del comentario. La versión 7 y 8 del Internet Explorer devuelve 7 u 8 según proceda pese a no estar contemplado en el código (intuyo que va implícito en la versión de javascript que implementen).

Así, para comprobar si el navegador es inferior a una versión, solo hay que hacer:

1

if (ieVer<=6) {funcionEjecutada();}

Otro método más fiable es parsear con una expresión regular la versión del navegador. El código es el siguiente:

1

function vIE(){return (navigator.appName=='Microsoft Internet Explorer')?parseFloat((new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})")).exec(navigator.userAgent)[1]):-1;}

Devuelve la versión de internet explorer devuelta por la variable UserAgent en caso de ser Internet Explorer o -1 para el resto de navegadores (curioso que el appName del firefox sea el difunto Netscape aunque luego en el userAgent se indique Firefox).

Fuente:outbook

Categories: Programacion Tags: