Discussion :

[BigZ444]

Bonjour,

Je bidouille un peu d'AJAX (tant bien que mal).

J'utilise souvent cette fonction pour appeler mes pages sans reloader :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script type="text/javascript">
        function calendrier(m, a)
          {
              var xhr=null;
 
              if (window.XMLHttpRequest) { 
                  xhr = new XMLHttpRequest();
              }
              else if (window.ActiveXObject) 
              {
                  xhr = new ActiveXObject("Microsoft.XMLHTTP");
              }
 
 
              xhr.onreadystatechange = function() { 
                if (xhr.readyState==4) 
                {
                  document.getElementById('cal').innerHTML = xhr.responseText;
                } 
              };
 
              xhr.open("GET", "cal.php?m="+m+"&a="+a, true);
              xhr.send(null);
          }
        </script>

Ce code fonctionne parfaitement, mais je trouve la transition entre les pages un peu ... rude.

J'aimerai ajouter un petit effet, soit un slide, soit un estompage progressif ou quelque chose du genre.

Est-ce que quelqu'un peut m'aider ?

Je précise que je suis pas (encore) très doué en Javascript

Merci bien

[le_chomeur]

Bonjour

Alors pour ajouter un effet de transition plusieurs choix s'offre a toi :

- créer une div dynamiquement que tu insères dans un conteneur , qui va venir pousser l'autre ou apparaitre a sa place

pour se faire au niveau de ton code je te donne l'algo et la structure global :

DIV contenant ( id "Pages")

- création d'une div dynamique
- remplissage via : MaDivDynamique.innerHTML = xhr.responseText;
- Insertion de MaDivDynamique dans Pages

et tu lances l'effet d'apparition ( via un effet de fadding )

pour retrouver ta div dernièrement ajouter , tu fais un getelementbytagname sur Pages ...

j'espère avoir été clair je n'ai pas bc de temps donc je ne peux pas pondre le code désolé ^^

[BigZ444]

Hello, merci de ta réponse.

Quelques trucs que je ne comprends pas bien.

J'ai déjà une DIV que je remplis dynamiquement via

Code :

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

document.getElementById('cal').innerHTML = xhr.responseText;

Donc ma div s'appelle "cal".

Tu veux que je crée une nouvelle div qui englobe cal ?

Et dernière question, quand tu dis :

et tu lances l'effet d'apparition ( via un effet de fadding )

C'est bien le problème que je rencontre, comment faire cela ?

Merci ...

[le_chomeur]

Quelques trucs que je ne comprends pas bien.

J'ai déjà une DIV que je remplis dynamiquement via

Code :

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

document.getElementById('cal').innerHTML = xhr.responseText;

Donc ma div s'appelle "cal".

Tu veux que je crée une nouvelle div qui englobe cal ?

oui oui tout a fait

pour l'effet de fadding fais une petite recherche sur le forum

[BigZ444]

Pourquoi ne pas mettre l'effet sur la div cal ?

Pour le fadding j'ai trouvé quelques trucs sur google, mais c'est 2 fonctions de 30 lignes chacune

Y a pas moyen de faire plus court ? Avec Jquery ?

[Bovino]

Pourquoi ne pas mettre l'effet sur la div cal ?

Pour le fadding j'ai trouvé quelques trucs sur google, mais c'est 2 fonctions de 30 lignes chacune

Y a pas moyen de faire plus court ? Avec Jquery ?

Juste pour être sûr d'avoir bien compris... jQuery, ça fait combien de lignes.

[BigZ444]

Juste pour être sûr d'avoir bien compris... jQuery, ça fait combien de lignes.

Effectivement, c'est juste que jQuery c'est un code "certifié" alors que là moi ce que j'ai trouvé c'est un truc pondu par quelqu'un et je suis pas certain que ça soit optimisé et pas bugué...

[le_chomeur]

hé bien fais le complètement en jquery

[BigZ444]

Bon, ben c'est bon, j'ai trouvé (je ne sais pas par quel miracle)

J'ai utilisé jQuery

Code :

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

1
2
3
4
5
 
$('#cal').fadeOut('slow', function() {
          document.getElementById('cal').innerHTML = xhr.responseText;
});
$('#cal').fadeIn('slow', function() {});

Merci pour votre aide