IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

AJAX Discussion :

[AJAX] Navigation AJAX esthetique


Sujet :

AJAX

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Profil pro
    Inscrit en
    Avril 2006
    Messages
    72
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : Avril 2006
    Messages : 72
    Par défaut [AJAX] Navigation AJAX esthetique
    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

  2. #2
    Expert confirmé
    Avatar de le_chomeur
    Profil pro
    Développeur informatique
    Inscrit en
    Février 2006
    Messages
    3 653
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Février 2006
    Messages : 3 653
    Par défaut
    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é ^^

  3. #3
    Membre confirmé
    Profil pro
    Inscrit en
    Avril 2006
    Messages
    72
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : Avril 2006
    Messages : 72
    Par défaut
    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 ...

  4. #4
    Expert confirmé
    Avatar de le_chomeur
    Profil pro
    Développeur informatique
    Inscrit en
    Février 2006
    Messages
    3 653
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Février 2006
    Messages : 3 653
    Par défaut
    Citation Envoyé par BigZ444 Voir le message
    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

  5. #5
    Membre confirmé
    Profil pro
    Inscrit en
    Avril 2006
    Messages
    72
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : Avril 2006
    Messages : 72
    Par défaut
    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 ?

  6. #6
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Citation Envoyé par BigZ444 Voir le message
    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.
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [AJAX] Navigation ajax et include de <script>
    Par jejemo dans le forum AJAX
    Réponses: 2
    Dernier message: 15/06/2010, 09h26
  2. [AJAX] Navigation ajax d'une div ?
    Par jejemo dans le forum AJAX
    Réponses: 5
    Dernier message: 05/06/2010, 00h56
  3. Réponses: 2
    Dernier message: 12/01/2010, 13h53
  4. Réponses: 4
    Dernier message: 02/12/2009, 20h27
  5. [AJAX] navigation ajax (aide)
    Par speedylol dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 30/10/2006, 14h39

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo