Navigation sans rechargement de page via javascript (jQuery)

13/03/2008
WebDev et Design Allez aux commentaires

Ouaiisss, encore un tutoriel qui utilise jQuery ! (Contenez votre joie ! ^^)

Dans ce tutoriel, je vais vous montrez comment mettre en place une navigation sans rechargement de page sur votre site. Evidement grâce à l'aide je jQuery 🙂

Donc en gros, toutes vos pages se chargeront dans la page courante, exactement comme mes pages "A propos", "Archives", "Contact" et "Plan du site". Bon, allez jeter un oeil sur la demo ..

Préface

Pour arriver à ce résultat, je vais me servir des fonction AJAX de la librairie jQuery. Bon je dis AJAX mais ce n'est pas réellement le cas, parce qu'au lieu de charger du XML, nous allons simplement charger d'autres pages HTML (ou PHP, etc ...)

Avec ma technique, vous pourrez transformer la navigation de m'importe quel CMS en 3 lignes de code. Avec l'avantage de garder une navigation fonctionnelle pour ceux qui n'ont pas javascript activé (et aussi pour les moteurs de recherche).

Mais évidement tout n'est pas rose, car cette technique engendre des petits désagrément tel que:

  • Barre d'adresse du navigateur qui ne change pas
  • Pas d'historique (suivant, précédant, ...)
  • Problème si vous charger une zone de texte sur laquelle un effet javascript est censé être appliqué sur sa page d'origine

Démonstration

PS: Pour le chargement simple, j'ai mis une petite temporisation pour que vous ayez le temps de voir le "Chargement ..."

Installation

  • 1. On inclu la librairie jQuery dans la page (si ce n'est pas déjà fait) entre les balises HTML <head> et </head>
<script type="text/javascript" src="jquery-latest.pack.js"></script>
  • 2. On ajoute les 2 fonctions de chargement AJAX

Les portions de code suivantes sont à ajouter soit entre des balises <script type="text/javascript"> //le code ici </script>, soit dans un fichier .js

/* Fonction chargement ajax avec animation,
 * vous pouvez modifier la vitesse (slow, fast, 1500, ...)
 * et l'effet (slideUp, fadeOut, ...) */
function ajax_page_advanced(ele,msg,url){
        $(ele).slideUp("slow", function(){
                $(ele).html(msg).show("slow", function(){
                        $(ele).load(url+" "+ele, null, function(){
                                var tampon = $(ele).html();
                                $(ele).html(msg).hide("slow",function(){
                                        $(ele).html(tampon);
                                        $(ele).slideDown("slow");
                                });
                        });
                });
        });
}
/* Fonction de chargement ajax simple */
function ajax_page(ele,msg,url){
        $(ele).html(msg).load(url+" "+ele);
}
  • 3. On applique la fonction de chargement AJAX sur un ensemble de liens

Les portions de code suivantes sont à ajouter soit entre des balises <script type="text/javascript"> //le code ici </script>, soit dans un fichier .js
Par contre il doit impérativement ce trouver après jQuery.

/* Une fois la page chargée */
$(document).ready(function(){
        //Application du chargement ajax simple sur tous les liens se trouvant dans le conteneur "menu1"
        $("#menu1 a").click(function(){
                ajax_page('#swithcontenu','<p style="text-align: center">Chargement ...</p>',this.href);
                return false;
        });
});

Dans ce cas ci, j'active l'effet AJAX uniquement si l'on clique sur les liens se trouvant dans un élément d'id "menu1". Le contenu qui sera charger/remplacer se trouve dans l'élément d'ID swithcontenu

Configuration

Les fonctions prennent 3 paramètres:

  1. L'id de la balise à remplacer, donc la page que vous chargez doit aussi avoir une balise avec cette ID
  2. Le texte qui s'affiche pendant le téléchargement de la page (balises html acceptées)
  3. L'URL de la page à charger, dans mon exemple, il s'agit automatiquement de l'URL du lien sur lequel on clic

Bon ça peut paraitre un peu fouilli comme ça, mais en fouillant dans mon exemple à télécharger, vous devriez vite comprendre.

Conclusions

N'abusez pas de ce système, car il peut-être frustrant pour le visiteur de ne pas savoir sur quelle page il se trouve (pas de changement d'URL) et de ne pas voir accès au bouton "précédant". Du coup, moi je l'applique uniquement sur des liens secondaires (Page a propos, archives, etc ...).

-----

Articles relatifs

←  Older Comments
 →
  • PiX

    Bon, je me réponds tout seul vu que j’ai enfin trouvé la réponse à ma question précédente.

    En fait ça venait de ma librairie jQuery (sûrement pas à jour), j’avais pourtant fait des tests là-dessus aussi mais j’ai dû m’emmêler les pinceaux à un moment donné.

    Une journée de perdu mais au moins j’ai trouvé et ça m’apprendra à double tester la prochaine fois.

    Merci encore pour ton script 😉

  • PiX

    Allez, puisque j’en suis à parler tout seul ici, je vais continuer car j’ai trouvé un petit défaut.

    Sur IE avec la version Advanced, le texte perd de son épaisseur, c’est la même taille de police mais on dirait que c’est compressé alors que nous n’avons pas ce problème avec FF (3 du moins), ce qui rend le texte bien moins lisible.

    Lancez la démo du billet avec IE et FF, cliquez sur le menu test 2 et cliquez sur le menu test 3, vous verrez la différence sous IE et aucune sous FF.

    Bien sûr, je n’ai aucune idée de la provenance de ce « soucis » mais au moins j’ai exposé le problème 🙂

    Si vous avez une piste, je ne suis pas contre l’idée de l’écouter.

  • Formidable !
    J’ai même pu l’utiliser avec l’url-rewriting. 🙂

  • Bon, j’ai parlé un peu vite, car j’ai moi aussi un soucis avec les accents. Je suis chez OVH et voici les balises meta dans le head :

    Quelqu’un saurait-il d’où peut venir le soucis ?

  • Hm… Les balises ne passent pas dans les commentaires, mais vous pouvez afficher le code source de mon site en cliquant sur mon pseudo.

  • Rob

    Je peux dire que votre méthode a été utilisé par des professionnels et ce de façon, euh comment dire.. A juger par vous même en désactivant le javascript :
    http://www.lesdomainessaintaugustin.com/index.php

  • Max

    Je n’arrive pas à utiliser la fonction javascript:

    onload= »javascript:window.open(‘http://www.microsoft.com’) »;

    Qulqun serait me dire pourquoi et comment résoudre le problême ???
    Bedankt!

    Max

  • Max

    ( je précise que tout ca se situe bien là ou il faut entre les balises body, div s d’appel et script … 😉

  • Arthur

    Bonjour,

    J’ai utilisé ce script, mais je voulais inserer du php dans la partie:

    j’ai donc recreer une page ( ex : page3.php ) et inserer dans la div :

    la page au clik reste bloqué a Chargement ….

  • Arthur

    ok les balises code ne saffiche pas .. donc je disais ..

    J’ai voulu inserer dans la div avec id= swithcontenu

  • Arthur

    Est ce qu’on peut inserer des flash swf dans les pages qu’on genere en ajax?

  • PseT

    Bonjour,

    Je viens de tester cet exemple, mais si j’appelle une page PHP, le résultat ne s’affiche pas… pourtant quand je regarde dans la console Firebug, la réponse de ma page php et OK et je vois le résultat!!!

    Auriez vous une idée?

    Merci

  • Script intéressant, je vais essayer d’utiliser cette fonction sur mon site !

  • Nicolas2603

    Bonjour, j’ai appliquer avec succès cette méthode pour naviguer depuis mon ma page d’accueil vers d’autres pages de mon site, mais lorsque ces pages appelées en ajax font appel à des fonctions jquery, celles-ci ne sont pas interprétées ! Mon exemple est le suivant, j’appelle une page sur laquelle je charge une galerie photo (gallerific), la galerie ne se crée pas. Si j’appelle cette page sans ajax, tout fonctionne. Comment faut-il résoudre ce problème ? Merci d’avance.

  • zey

    yes, j’aime, ça marche bien.

  • emilie

    Bonjour,
    Nicolas j’aurai voulu savoir si tu avais trouvé la réponse à ta question car il m’arrive le même problème ?
    Merci d’avance

  • Voyageur

    Bonjour,
    J’utilise actuellement votre script pour la navigation de mon site.
    Tout marche très bien, toutefois, j’utilise en même temps le composant FaceBox (qui ouvre des lightbox comme dans Facebook). L’ouverture de cette facebox se fait correctement sur la page d’index (page qui contient tout les fichiers scripts, le menu etc.), mais pas sur les pages chargées en ajax (chargées dans un div de la page index). J’ai essayé de placé mon script facebox un peu partout dans ma page mais rien à faire.

    En espérant que vous ayez compris mon problème, merci de votre réponse.

  • Clém’

    Bonjour, je me permet de relancer le sujet concernant les problèmes mentionnés ci-dessus, à savoir est-il possible de charger dans la div « swithcontenu » une galerie en Jquery, par exemple.
    Je suis également bloqué, la page ne charge pas la galerie. Je ne peux que charger du texte et des images.
    Je vous remercie.

    Cdt.

  • Tolrac

    Bonjour,

    Super script qui fonctionne impéccablement bien.
    J’ai juste un soucis avec une page appelée dans la div swithcontenu, dans cette page je fais un appel d’une fonction jQuery colorbox mais au lieu de m’afficher la colorbox, il ouvre la page appelée dans la colorbox.

    Voici la fonction ajouté dans wajaxisation.js:

    $(document).ready(function(){
    $(« a[rel=’day_view’] »).colorbox({width: »480px », height: »450px », iframe:true});
    });

    Merci de votre aide

  • syl

    bonjour,

    Bien bien ce script, ca date, mais c’est toujours efficace.

    Une question: au niveau du référencement, les pages appellées via javascript/ajax mais n’apparaissant pas dans la barre d’adresse, Sont-elles référencées auprès de google de la même manière??

  • Zecka

    je suis également bloquer. Je charge une page avec un slider jquery et il ne fonctionne pas. Comment procéder?

  • @Zecka

    function ajax_page_advanced(ele,msg,url){
    $(ele).slideUp(« slow », function(){
    $(ele).html(msg).show(« slow », function(){
    $(ele).load(url+ » « +ele, null, function(){
    var tampon = $(ele).html();
    $(ele).html(msg).hide(« slow »,function(){
    $(ele).html(tampon);
    $(ele).slideDown(« slow »);
    <!—-code du scripte que tu veux ajouter moi par exemple mon scripte

    $.getScript(".(le fichier js que tu veux charger)../scripts/jquery_tool.js", function(){

    $(« img[rel] »).overlay();
    $(« a[rel] »).overlay();
    $(« div[rel] »).overlay();

    });

    –>
    });

    });

    });

    });

    }
    function ajax_page(ele,msg,url){
    $(ele).html(msg).load(url+ » « +ele );

    }

    $(document).ready(function(){
    $(« #smoothmenu1 a »).click(function(){

    ajax_page_advanced(‘#cont’,'<img src="templat//images/25.gif » alt= » » />’,this.href);
    return false;

    });

    });

  • Lord

    Non fonctionnel sur Opera…

  • Lord

    Correction : Opera ok
    IE 8, rien à faire ça ne va pas

  • Smahane

    Bonjour,
    ce tuto est vraiment intéressant mais ce que je souhaite faire est de recharger la page en premier plan de la page d’accueil par exemple!!
    est ce que je vais utiliser du ajax ou jQuery??? et comment

  • Patrick KASSI

    Bonjour a tous,
    Je voudrais savoir comment supprimer l’effet de fermeture et ouverture de ma page web. J’ai remplacé slideUp par fadeOut et slideDown par fadeIn, mais rien ne change car la hauteur de ma page diminue et quelques seconde après affiché le contenu en reprenant sa hauteur initiale.

←  Older Comments
 →