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 :

  • sId ⇒ Id de l'objet à afficher par-dessus les selects
  • sVisibility ⇒ État à mettre à l'objet (hidden ou visible)
  • exclude ⇒ Id des selects à ne pas masquer, même en cas de collision
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 –

Discussion

khama, 25/07/2007 17:14:

cette fonction permet de déterminer la position horizontale d'un élement dans la page

javascript
function findPosX(element){
 var leftelem = 0; // initialisation 
 leftelem += element.offsetLeft;
	if (element.offsetParent) 
	{
		while (element.offsetParent)
 
		{	element = element.offsetParent;
			leftelem += element.offsetLeft;
		}
	}
	else 
	{	if (element.x)
		{	leftelem += element.x;
 
		}
	}
	return leftelem;
	document.write("voici la position horizontale"+leftelem);
}

cette fonction ne marche pas avec IE je ne sais pas pourquoi ! à l'aide s'il vous plait

 
iDo, 26/07/2007 09:12:

déjà, on commence par “salut” ou “bonjour”… :)
Ensuite, la réponse est dans la fonction au dessus !
Tu n'a qu'a utliser la methode GetDomOffset:

javascript
function GetDomOffset( Obj, Prop ) {
	var iVal = 0;
	while (Obj && Obj.tagName != 'BODY') {
		eval('iVal += Obj.' + Prop + ';');
		Obj = Obj.offsetParent;
	}
	return iVal;
}
alert ("position de l'objet :" + GetDomOffset(document.getElementById("mondiv") ,"left") );
 
Si vous ne pouvez pas lire les lettres, tlchargez ce fichier WEV et coutez les.