Tu peux lire ça :
www.google.com…
(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