Toggle ouvert une fraction de seconde au chargement…

**Mister Paul** · 12/01/2011, 15h16

Bonjour,

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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...

Comment faire pour éviter ça ?

Merci
Paul

**vermine** · 12/01/2011, 15h42

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.

**Mister Paul** · 12/01/2011, 15h46

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

**vermine** · 12/01/2011, 17h31

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<div id="myElement" style="visibility:hidden">Bla bla bla...</div>

Et en réactivant la visibilité à bon escient, par exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
$('la_ou_on_clic').addEvent('click', function(){
      	$("myElement").setStyle('visibility','');
      	mySlider.toggle();
});

**Mister Paul** · 12/01/2011, 17h50

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…

**vermine** · 12/01/2011, 18h07

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.

**Mister Paul** · 12/01/2011, 19h21

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**vermine** · 12/01/2011, 19h38

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.

**Mister Paul** · 12/01/2011, 19h47

Envoyé par vermine

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

Tant mieux !

Et Merci !

**Mister Paul** · 14/01/2011, 18h24

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 ?

**vermine** · 14/01/2011, 18h48

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>.

Toggle ouvert une fraction de seconde au chargement…

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager