11550 sujets

JavaScript, DOM et API Web HTML5

Mootools : SlideOut problème avec position:absolute

Bonjour,
J'ai un problème avec position:absolute et slideOut.
Je m'explique : le code suivant fonctionne (j'ai mis le style directement dans l'html pur faciliter la compréhension)

<script type="text/javascript" src="js/mootools-1.2.4-core-nc.js"></script>
<script type="text/javascript" src="js/mootools-1.2.4.4-more.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
	var mySlide = new Fx.Slide('mfContainer');
	$('slideout').addEvent('click', function(e){
		e = new Event(e);
		mySlide.slideOut();
		e.stop();
	});
});
</script>
</head>
<body>
<a id="slideout" href="#">slideout</a>
<div id="contenu" style="height:200px;width:300px;background-color:#f00;position:absolute;display:block;">
		<div id="mfContainer" style="height:100%;width:100%;background-color:#0F0;">
			<div id="mfImg" style="position:relative;width:100%;height:100%"><img style="width:100%;height:100%"  src="images/bg_CoverFlow-intro-conclu.png" title="intro" alt="intro" /></div>
			<div id="idText" style="position:relative;margin-top:20px;width:100%;height:100%">INTRO</div>
		</div>
</div>

Mais celui ci ne fonctionne pas (les div mfImg et idText sont passé en position absolute)

<script type="text/javascript" src="js/mootools-1.2.4-core-nc.js"></script>
<script type="text/javascript" src="js/mootools-1.2.4.4-more.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
	var mySlide = new Fx.Slide('mfContainer');
	$('slideout').addEvent('click', function(e){
		e = new Event(e);
		mySlide.slideOut();
		e.stop();
	});
});
</script>
</head>
<body>
<a id="slideout" href="#">slideout</a>
<div id="contenu" style="height:200px;width:300px;background-color:#f00;position:absolute;display:block;">
		<div id="mfContainer" style="height:100%;width:100%;background-color:#0F0;">
			<div id="mfImg" style="position:absolute;width:100%;height:100%"><img style="width:100%;height:100%"  src="images/bg_CoverFlow-intro-conclu.png" title="intro" alt="intro" /></div>
			<div id="idText" style="position:absolute;margin-top:20px;width:100%;height:100%">INTRO</div>
		</div>
</div>


Je ne comprend pas comment le faire fonctionner. En fait, j'ai besoin d'avoir une image avec du text dessus et de les faire disparaitre en même temps.

Merci
Salut,

Comme ça, sans savoir, et vu que j'ai déjà eu ce genre de souci, essaye de passer mfContainer en position: relative... des fois que...

Sinon, tu es bien en transitionnal ? pour certains effets mootools ça a son importance...

Au pire, tu peux facilement reproduire l'effet slide :


<a id="slideout" href="#">slideout</a>

<div id="divSlide" style="position: relative; height:200px;width:300px;overflow:hidden;"> 
  <div id="cntSlide" style="height: 100%; width: 100%; position: absolute; top: 0px; left: 0px;">
    Mon contenu...
  </div>
</div>


et pour le code JS :


window.addEvent('domready', function() { 
  $('slideout').addEvent('click', function(e){ e.stop(); $('cntSlide').tween('top', -200); });
});


A+
Sujet clos
Aller à