Table des matières
Niveau
..........
En rapport...

Select "always on top"

Vous l'avez surement remarqué, sous IE il est impossible de faire passer un élément (une div par exemple) par-dessus une select box. Et ceux même en changeant les zIndex.
Il n'existe pas vraiment de solution miracle. Seulement quelques “bidouilles”.
En voici une : Le principe est de faire disparaître les selectbox qui sont en contact avec notre div et de les faire réapparaitre lorsque la div disparait (ou change de place)

Fonction

javascript
/*
Récupère la position réelle d'un objet dans la page (en tenant compte de tous ses parents)
IN 	: Obj => Javascript Object ; Prop => Offset voulu (offsetTop,offsetLeft,offsetBottom,offsetRight)
OUT	: Numérique => position réelle d'un objet sur la page.
*/
function GetDomOffset( Obj, Prop ) {
	var iVal = 0;
	while (Obj && Obj.tagName != 'BODY') {
		eval('iVal += Obj.' + Prop + ';');
		Obj = Obj.offsetParent;
	}
	return iVal;
}
/*
Affiche ou masque un objet (identifié par son ID) et fait disparaître les select gênant (en cas d'affichage)
Va déterminer si un (ou plus) des selectbox de la page est en "collision" avec l'objet dont l'id est fourni
IN	: sId => Id de l'objet à afficher par-dessus les selects ; sVisibility => Etat à mettre à l'objet (hidden ou visible)  ; exclude => Id des selects à ne pas masquer, même en cas de collision
*/
function SwapSelect(sId,sVisibility,exclude) {
	//constitue la chaine pour gérer les exclusions
	exclude=';'+((exclude=='')?'undefined':exclude)+';';
	//Récupère l'objet et lui applique la visibilité choisie
	oObj = document.getElementById(sId);
	oObj.style.visibility=sVisibility;
	//Récupère les coordonnées exacte de l'objet sur la page
	Top_Element  = GetDomOffset(oObj, 'offsetTop');
	Left_Element  = GetDomOffset(oObj, 'offsetLeft');
	Largeur_Element  = oObj.offsetWidth;
	Hauteur_Element  = oObj.offsetHeight;
	//Récupère la liste des select de la page
	oSelects = document.getElementsByTagName('SELECT');
	if (oSelects.length > 0) {
		//Parcours la liste des selects
		for (i = 0; i < oSelects.length; i++) {
			oSlt = oSelects[i];
			//Compare l'ID du select en cours de lecture avec la liste des ID à exclure
			if (exclude.indexOf(';'+oSlt.id+';')!=-1) continue;
			//Si il n'est pas exclue on se retourve ici
			//Recupere les coordonnées exacte du select sur la page
			Top_Select = GetDomOffset(oSlt, 'offsetTop');
			Left_Select = GetDomOffset(oSlt, 'offsetLeft');
			Largeur_Select = oSlt.offsetWidth;
			Hauteur_Select = oSlt.offsetHeight;
			//Compare les positions de l'objet et du select pour savoir s'ils ont des pixels en collision (qui se chevauche)
			isLeft = false;
			if ((Left_Element > (Left_Select - Largeur_Element)) && (Left_Element < (Left_Select + Largeur_Select)))
				isLeft = true;
			isTop = false;
			if ((Top_Element > (Top_Select - Hauteur_Element)) && (Top_Element < (Top_Select + Hauteur_Select)))
				isTop = true;
			if (isLeft && isTop) {
				//S'il y a collision, on fait disparaitre le select
				sVis = (oObj.style.visibility == 'hidden') ? 'visible' : 'hidden';
				if (oSlt.style.visibility != sVis) 
					oSlt.style.visibility = sVis;
			} else
				//Sinon, on le remet visible
				if (oSlt.style.visibility != 'visible') 
					oSlt.style.visibility = 'visible';
		}
	}
}

Utilisation

La fonction prend 3 paramètres :

sVisibility peut etre égal à “hidden” ou “visible” selon que vous vouliez faire disparaître ou apparaître votre objet (celui qui doit passer par-dessus les selects)
exclude peut etre soit vide (= '') soit contenir les ID des select à ne pas masquer. Il faut les séparer par des ”;”
javascript
SwapSelect('test','visible','inselect');
SwapSelect('test','visible','inselect;nohide;restevisible');
SwapSelect('test','hidden',' ');

Exemple

L'exemple ci-dessous vous montrera l'utilisation de la fonction :
swapselect.htm

Source

L'idée d'origine proviens de : http://www.asp-php.net/scripts/scripting/jsieselect.php



19/06/2006 12:15 -

iDo –