[AJAX] Navigation AJAX esthetique

Version imprimable

Bonjour,

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

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

Code:

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

09/07/2010, 15h58
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é ^^
09/07/2010, 16h18
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:

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 :

Citation:

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 ...
09/07/2010, 16h33
le_chomeur

Citation:

Envoyé par BigZ444

Quelques trucs que je ne comprends pas bien.

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

Code:

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 ;)
09/07/2010, 17h03
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 :cry:

Y a pas moyen de faire plus court ? Avec Jquery ?
09/07/2010, 20h50
Bovino

Citation:

Envoyé par 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 :cry:

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. :?
12/07/2010, 09h30
BigZ444

Citation:

Envoyé par Bovino

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

:mouarf: 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é...
12/07/2010, 09h35
le_chomeur

hé bien fais le complètement en jquery ;)

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

J'ai utilisé jQuery
Code:

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