Toggle ouvert une fraction de seconde au chargement…

Version imprimable

Bonjour,

je profite du Mootools 1.11 chargé par défaut avec ma version de Joomla pour faire des toggles sur un DIV.
Code:

1 2 3 4 5 6 7 8 9 <script type="text/javascript"><div id="myElement">Bla bla bla...</div> var mySlider; window.addEvent('domready', function() { mySlider = new Fx.Slide('myElement', {duration: 500}); mySlider.hide(); }); </script>
Ça fonctionne bien.

Sauf qu'à l'ouverture de la page le DIV se trouve ouvert une fraction de seconde avant de se refermer (en faisant remonter tout ce qu'il y a en dessous de lui). Alors évidemment ce n'est pas très joli... :cry:

Comment faire pour éviter ça ?

Merci
Paul

12/01/2011, 15h42
vermine

Bonjour,

Vous désirez que l'élément soit ouvert ou bien fermé lors du chargement de la page ?
Je n'ai malheureusement pas les scripts de la version 1.1 mais je pourrai tester tantôt en 1.2.0.
12/01/2011, 15h46
Mister Paul

1 pièce(s) jointe(s)

Oui je désirerais qu'il apparaisse directement totalement fermé.

Or là il apparaît ouvert à l'ouverture et se referme aussitôt après...
(il attend le domready ?… C'est vrai que la page est un peu lourde)

Edit : je mets en pièce jointe la version 1.11 de Mootools
12/01/2011, 17h31
vermine

Merci pour la v1.1 =)
Il attend le DomReady. Effectivement c'est peut-être à cause de la lourdeur de la page. C'est plutôt gênant. Je vous propose de tromper un peu le document en déclarant l'élément invisible au chargement de la page :
Code:

1 2 <div id="myElement" style="visibility:hidden">Bla bla bla...</div>
Et en réactivant la visibilité à bon escient, par exemple :
Code:

1 2 3 4 5 $('la_ou_on_clic').addEvent('click', function(){ $("myElement").setStyle('visibility',''); mySlider.toggle(); });
12/01/2011, 17h50
Mister Paul

Oui c'est une bonne idée.

malheureusement comme il y a des éléments sous ce DIV, même s'il est invisible, en se repliant une fraction de seconde après le début du chargement de la page, on voit tout le reste remonter tout seul ensuite…

Si on ne peut pas le charger fermé d'entré,
il faudrait peut-être alors rendre invisible un DIV contenant toute la page et la rendre visible avec un <body onload…
12/01/2011, 18h07
vermine

Ce serait triste d'en arriver là. Je pensais bêtement qu'un input déclaré invisible ne s'affichait même pas une fraction de seconde. :(

Oui, oui ça semble bien le cas.
Sauf que si le contenu du DIV est bien invisible, ce DIV prend le même espace ! Et donc tous les DIV qui étaient repoussés le sont toujours…
:?

Mais avec style="display:none" ça passe bien sur Safari, Firefox et Chrome Mac
Il n'y a pas de souci sur Windows ?

Mon code a changé :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <script type="text/javascript"> window.addEvent('domready', function() { $("myElement").setStyle('display','block'); mySlider = new Fx.Slide('myElement'); mySlider.hide(); $('toggle').addEvent('click', function(e){ e = new Event(e); mySlide.toggle(); e.stop(); }); }); </script>

12/01/2011, 19h38
vermine

Je crois que ce n'est pas ma journée. Étant donné le chargement rapide de ma page de test, je n'ai pas fait attention au fait que visibility gardait la position de l'élément. J'avais testé display block et inline mais aucun des dès deux ne rendait un bon affichage sur IE.

Et là je réessaye avec votre code et ça fonctionne sur FF, IE et Google Chrome. :cry:
12/01/2011, 19h47
Mister Paul

Citation:

Envoyé par vermine

Et là je réessaye avec votre code et ça fonctionne sur FF, IE et Google Chrome. :cry:

Tant mieux !

Et Merci !
14/01/2011, 18h24
Mister Paul

Aïe…
je viens de voir sur Firebug une erreur au chargement de la page :
$("toggle") is null

Et j'en ai 2 avec Safari :
TypeError: Result of expression '$('toggle')' [null] is not an object.
The first argument must be a beforeLoad event object.

Euh... qu'est ce que je dois faire ?
:oops:
14/01/2011, 18h48
vermine

Veillez à bien écrire vos instructions dans le domready.
Ensuite, il vous faut un élément dont l'id est "toggle". C'est l'élément sur lequel vous cliquez pour afficher/cacher la <div>.