11540 sujets

JavaScript, DOM et API Web HTML5

Position fixed et IE6

Bonjour,

j'ais bien cherché chez notre ami Google, mais je ne trouve pas de réponse à ma question. Donc je vous pose la question à vous, puisqu'il paraitrait que c'est vous les experts la-dedans Smiley ravi

Donc voila, j'ai une boite div qui s'affiche ou disparait en plein milieu de ma fenetre. Pour cela, je l'ai mis en position fixed pour que si on scroll la fenetre, la boite scroll avec... Aucun souci avec Firefox et IE7.

Là où ça se corse, c'est que ce ***** IE6 ne connait pas la position fixed. J'ai donc mis un petit hack qui transforme la position fixed en absolute. Le problème, c'est que suivant le scroll, je n'arrive pas à placer cette boite en hauteur. Elle se place toujours à 10% du haut de ma fenêtre. Donc si je scroll tout en bas et que je fais apparaitre ma boite, je suis obligé de rescroller tout en haut pour la voir.

Quelqu'un aurait-il une idée ou une piste pour moi, pour que cette boite soit centré en hauteur (du moins au moment où je l'ouvre, pliz ?
Modifié par blman (13 Jul 2007 - 15:20)
Bonjour.

Un "overflow: hidden" sur html et body empêchera le défilement.
Sinon il y a des scripts JS qui permettent de simuler l'effet du "position: fixed".
Bonjour,

pour que la boite soit centrée au moment où tu l'ouvres je pense que le code suivant marchera :



  div#ta_boite {
position:absolute;
width:200px;
height:200px;
left:50%;
top:50%;
margin-top:-100px;
margin-left:-100px;
}


il faut veiller à ce que le margin-left soit égal à -witdh/2 px et de meme que le margin-top soit égal à -height/2 px

j'espère que c'est une solution qui pourra t'aider
Aurais-tu des liens pour des codes qui simulent la position fixed ? Ceux que j'ai trouvé prenait beaucoup de ressource machine, voir faisait planté le PC Smiley sweatdrop

PS : parce que je ne veux pas interdire le scroll...
Rafale29, voici mon code :


Code mon CSS :

div#CalqFicheOn{
	display:none;
	left:50%;
	margin-left:-300px;
	top:10%;
	position: fixed;
	width:600px;
	height:400px;
	background-color:#ffffff;
	z-index:101;
	border:2px solid #ff6d06;


	/** IE **/
	 position: expression(IEFixedElementPos());
	 /** on tient compte des 25% definis plus haut **/
	 /*top: expression(IEFixedElementTop(parseInt(document.body.clientHeight * 10/100)));*/
	 /*top: expression(IEFixedElementTop(parseInt(document.body.clientHeight * 10/100)));*/
	 /*left: expression(IEFixedElementLeft(parseInt(document.body.clientWidth * 25/100)));*/


}



Code du hack en JS (que j'ai choper je sais plus où)

 function IEFixedElementPos()
        {
          // IE 7 en mode standard
          if (window.ActiveXObject && window.XMLHttpRequest && window.external && document.compatMode=="CSS1Compat") 
          {
             return ("fixed");
          }
          return ("absolute");
        }
         
        function IEFixedElementTop(defaultTop)
        {
          // IE 7 en mode standard
          if (window.ActiveXObject && window.XMLHttpRequest && window.external && document.compatMode=="CSS1Compat") 
          {
             return (defaultTop.toString() + "px;")
          }
          return ((document.body.scrollTop+defaultTop) + "px");
        }


Donc, à priori, j'utilisais déjà ta solution... Pfff, je sais plus là....
Est-ce que top et left doivent uniquement prendre des valeurs en pixel sous IE6 ou est-ce qu'on peut lui donner une valeur en % ?
Salut,

C'est gore comme technique, il suffit de modifier une propriété layout de l'élement pour rafraichir son état, par exemple le z-index pendant le scroll.
Bonjour,
Si tu l'écris comme ça, sans faire de hack, ce n'est plus gore :

<!--[if lte IE 6]>
<style type="text/css">
body { background: url(null) fixed ; }/* évite le sautillement */
#id_du_div{position: absolute;top:expression(documentElement.scrollTop+body.scrollTop);
</style>
<![endif ]-->

En réel , dans un fichier externe c'est mieux.
Merci à tous Smiley cligne , j'ai effectivement réussi à faire ce que je voulais grâce aux commentaires conditionnels
Sujet clos
Aller à