Bonjour à tous,
Voilà mon problème, j’ai un div (correspondant à un menu dynamique) qui se trouve à la même position qu’une liste déroulante de type <select><option></option></select>. C’est le menu déroulant qui est alors visible.
Je voudrai au contraire que ce soit le menu qui soit visible.
Avez vous une idée pour résoudre mon problème?
Merci par avance.
Si ce problème c’est le fait que ton <select> est toujours au dessus de n’importe quel autre élément HTML, et que cela ce produit uniquement sur IE.
C’est un bug connu, et si tu trouves le moyen de résoudre le problème ca m’interesse :o
Pareil, j’ai eu le problème, et pour contourner, je détectait que le menu était affiché (et que le borwser est IE), je masquait le champ list, et j’affichait un input text tout bête à la place pour ne pas qu’on voie que le “vrai” champ est masqué quand le menu ne masque pas entièrement ce fameux champ. le genre de bug qui traîne et qu’ils ne corrige jamais.
Ou alors tu met un menu horizontal, comme tout le monde, qui passe pas au dessus de n’importe quoi!
Sinon tu dis aux visiteurs du site qu’il utilisent un autre navigateur 
j’ai exactement le meme probleme, je ne trouve pas comment faire
il y a la solution de jouer sur les visible/hidden mais pffff
il n’y a pas de propriété css qui permet de gerer les elements au 1er plan ? :??:
Tu peux lire ça :
(http://www.google.com/search?hl=en&q=passer+au+dessus+d'un+champ+select+dans+IE+iframe&btnG=Search)
C’est tout à fait possible, et le script qui suit le fait :
function FixedElement(element, args) {
this.element = element;
this.frameElement = null;
if (args.innerFrame == undefined) {
args.innerFrame = true;
}
if (document.all && window.print && !window.opera && document.getElementById && args.innerFrame) {
this.getFrameElement = function() {
// XXX sous IE, ajoute un iframe pour palier au problème des select
if (this.frameElement == null) {
this.frameElement = document.createElement('iframe');
this.frameElement.style.display = 'none';
this.frameElement.style.filter = "alpha(opacity=0)";
this.frameElement.src = "javascript:false";
this.element.parentNode.insertBefore(this.frameElement, this.element);
if(this.element.currentStyle.zIndex != "" && parseInt(this.element.currentStyle.zIndex)>1 ) {
this.frameElement.zIndex = parseInt(this.element.currentStyle.zIndex)-1;
}
}
return this.frameElement;
};
} else {
this.getFrameElement = function() {return null;}
}
this.args = args;
if (args.center) {
this.args.centerX = true;
this.args.centerY = true;
} else {
this.args.centerX = this.args.centerX == undefined ? false:this.args.centerX;
this.args.centerY = this.args.centerY == undefined ? false:this.args.centerY;
}
}
/**
* Renvoie la taille évaluée du viewport
*/
FixedElement.prototype.getViewPort = function() {
var scrollH = 0; // scrollY
var scrollW = 0; // scrollX
var windowH = 0; // largeur de la fenêtre
var windowW = 0; // hauteur de la fenêtre
if (document.doctype == null || document.documentElement.clientHeight == 0) {
if (window.innerWidth || (document.body.offsetHeight == document.documentElement.offsetHeight
&& document.body.offsetWidth == document.documentElement.offsetWidth)) {
scrollH = document.body.scrollTop;
scrollW = document.body.scrollLeft;
windowH = document.body.clientHeight;
windowW = document.body.clientWidth;
} else {
scrollH = document.documentElement.scrollTop;
scrollW = document.documentElement.scrollLeft;
windowH = document.documentElement.clientHeight;
windowW = document.documentElement.clientWidth;
}
} else {
if (document.doctype.publicId.search(/xhtml/i) != -1) {
scrollH = document.documentElement.scrollTop;
scrollW = document.documentElement.scrollLeft;
} else {
scrollH = document.body.scrollTop;
scrollW = document.body.scrollLeft;
}
}
if (window.innerWidth && window.innerHeight) {
windowH = window.innerHeight;
windowW = window.innerWidth;
}
return {
width: windowW,
height: windowH,
scrollTop: scrollH,
scrollLeft: scrollW
};
}
FixedElement.prototype.getArg = function (arg, maxamount, def) {
if (this.args[arg] == undefined) return def;
return common_get_pixel(this.args[arg], maxamount);
}
FixedElement.prototype.setProperty = function (e1, e2, propertyName, propertyValue) {
e1.style[propertyName] = propertyValue;
if (e2) e2.style[propertyName] = propertyValue;
}
FixedElement.prototype.positionnate = function () {
// XXX pour cela, il faudrait catcher l'événement "devient visible"
/*if (this.element.style.display == 'none') return;
if (this.element.style.visibility == 'hidden') return;*/
var viewport = this.getViewPort();
/**
* Règles: si centerX, left = .5*(viewport.width - common_get_pixel(args.width, viewport.width))
* si left != undefined & right > 0 : width = (right - left)
* si left == undefined & right > 0 : left: right - offsetWidth
* si left > 0 : left = left
*/
var e = this.element;
var f = this.getFrameElement();
var left = this.getArg('left', viewport.width, null);
var right = this.getArg('right', viewport.width, null);
var width = this.getArg('width', viewport.width, e.offsetWidth);
if (this.args.centerX) {
this.setProperty(e, f, 'left', (/*viewport.scrollLeft +*/ .5*(viewport.width - width)) + 'px');
} else if (right != null) { // on positionne à droite?
if (left == null) { // oui
this.setProperty(e, f, 'right', (viewport.scrollLeft + right) + 'px');
} else { // on change la taille
this.setProperty(e, f, 'left', (viewport.scrollLeft + left) + 'px');
this.setProperty(e, f, 'width', (viewport.width - right - left) + 'px');
}
} else if (left != null) {
this.setProperty(e, f, 'left', (viewport.scrollLeft + left) + 'px');
}
var top = this.getArg('top', viewport.height, null);
var bottom = this.getArg('bottom', viewport.height, null);
var height = this.getArg('height', viewport.height, e.offsetHeight);
if (this.args.centerY) {
this.setProperty(e, f, 'top', (viewport.scrollTop + .5* (viewport.height - height)) + 'px');
} else if (bottom != null) { // on positionne par rapport au bas?
if (top == null) {
this.setProperty(e, f, 'bottom', (viewport.scrollTop + bottom) + 'px');
} else { // on change la taille
this.setProperty(e, f, 'top', (viewport.scrollTop + top) + 'px');
//e.style.bottom = (viewport.scrollTop + bottom) + 'px';
this.setProperty(e, f, 'height', (viewport.height - bottom - top) + 'px');
}
} else if (top != null) {
this.setProperty(e, f, 'top', (viewport.scrollTop + top) + 'px');
}
/*
var s = '[viewport.width=' + viewport.width + ', viewport.height=' + viewport.height + ']\n';
s += '[viewport.scrollLeft=' + viewport.scrollLeft + ', viewport.scrollTop=' + viewport.scrollTop + ']\n';
s += '[left=' + left + ', right=' + right + ', width=' + width + ']\n';
s += '[top=' + top + ', bottom=' + bottom + ', height=' + height + ']\n';
s += '[left=' + e.offsetLeft + ', right=' + e.offsetRight + ', width=' + e.offsetWidth + ']\n';
s += '[top=' + e.offsetTop + ', bottom=' + e.offsetBottom + ', height=' + e.offsetHeight + ']\n';
if (console == undefined) {
alert(s);
} else {
console.log(s);
}
*/
}
FixedElement.prototype.attach = function () {
if (!window.ActiveXObject) {
this.element.style.position = 'fixed';
for (var i in this.args) {
if (i != 'width' && i != 'height' && i != 'center') {
this.setProperty(this.element, this.getFrameElement(), i, this.args[i]);
}
}
/**
* Si on centre, alors il faut faire cela
*/
if (this.args.centerX || this.args.centerY) {
var that = this; // requis, sinon this == event handler dans scroll()
this.positionnate();
window.addEventListener('resize', function() {that.positionnate();}, false);
}
return;
}
this.setProperty(this.element, this.getFrameElement(), 'position', 'absolute');
this.positionnate();
var that = this; // requis, sinon this == event handler dans scroll()
if (window.attachEvent) {
window.attachEvent('onscroll', function() {that.positionnate();});
window.attachEvent('onresize', function() {that.positionnate();});
} else {
window.addEventListener('scroll', function() {that.positionnate();}, false);
window.addEventListener('resize', function() {that.positionnate();}, false);
}
}
FixedElement.prototype.hide = function () {
this.setProperty(this.element, this.getFrameElement(), 'display', 'none');
}
FixedElement.prototype.show = function () {
this.setProperty(this.element, this.getFrameElement(), 'display', 'block');
}
FixedElement.prototype.isVisible = function () {
return this.element.style.display != 'none';
}
/**
* Place un élément comme étant en position fixed
*
* <p>Cette fonction corrige le cas IE6-- où fixed n'est pas supporté
* - en ajoutant un EventHandler.</p>
*
* <p>Args peut contenir les éléments suivants :</p>
*
* <ul>
* <li>string left, top, right, bottom: une position</li>
* <li>int width, height: une largeur ou une hauteur fixe (puisque la
* fenêtre peut être redimensionnée, une largeur variable n'aurait
* que peu de sens)</li>
* <li>boolean center: indique que l'on doit centrer. Dans ce cas,
* les positions left/top sont calculées en fonction de la
* largeur/hauteur.</li>
* </ul>
*
* @note si aucun argument n'est fourni, l'élément est centré. Le centrage
* implique que l'élément ait une taille définie, via width (= taille totale)
* @param e l'élément html
* @param args un tableau de propriété ({left: x, ...})
* @return l'élément crée (à utiliser pour le cacher/afficher)
*/
function common_set_fixed(element, args) {
var fe = new FixedElement(element, args);
fe.attach();
return fe;
}
La fonction common_set_fixed() permet de faire un tel élément, que tu peux afficher/cacher avec hide()/show().
Edité le 21/12/2007 à 12:17
Sans-Nom qui répond a de vieux topics [:paysan]
J’ai pas fait gaffe en fait. C’est vrai que ça manque d’un indicateur, tout ça.
En fait je pensais qu’il y avait eu récemment un nouveau topic sur le sujet, et je croyais même y avoir répondu.
Bref, en tout cas cette solution marche plutôt bien 