11485 sujets

JavaScript, DOM et API Web HTML5

Navigation Ajax avec Historique et transitions

Bonjour à tous.

Après de longues recherches j'ai trouvé un script opensource pour faire une navigation Ajax, tout en ayant l'historique.
à vrai dire j'en avais un pour l'historique et un pour la navigation. j'en ai rajouté un pour l'animation entre les pages.
J'ai réussi à rendre le tout compatible et à le faire marcher.

Le problème c'est que sous Internet explorer et Mozilla quand on clique sur un lien, rien ne ce passe. Seulement l'url change.
Il faut alors cliquer sur rafraichir et là, seulement là, la page s'affiche.
Par contre sous chrome et opéra ça marche...

Voici l'url du site
http://moonlite.fr/test2/AjaxFinal/

Et voici l'html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="js/core.js"></script>
    <script type="text/javascript" src="js/galleria.js"></script>  
    <script type="text/javascript" src="js/galleria.flickr.js"></script>  
    <link rel="stylesheet" media="screen" type="text/css" href="css/main.css" />
    <link rel="stylesheet" media="screen" type="text/css" href="css/galleria.classic.css" />
</head>
<body>


<div id="container">
    <div id="menu">
    	<div id="loading">Chargement...</div> 
        <ul>
            <li id="home"><a href="#home">&nbsp;Accueil&nbsp;</a></li>
            <li id="webdesign"><a href="#gallerie">&nbsp;Gallerie&nbsp;</a></li>
            <li id="coding"><a href="#contact">&nbsp;contact&nbsp;</a></li>
        </ul>
        <span class="clear">&nbsp;</span>
    </div>

    <div id="content">
        <noscript>
            <p>JavaScript doit être activé pour utiliser ce site web avec la version standard. Il semble que ce langage soit désactivé ou qu'il ne soit pas pris en charge dans votre navigateur. Pour utiliser la version standard, activez JavaScript en modifiant les options de votre navigateur et essayez  de nouveau.</p>    
            <p>Pour utiliser la version HTML simplifiée, qui ne nécessite aucun script JavaScript, cliquez <a href="#">ici</a>.</p>
        </noscript>
    </div>
</div>
	
</div>
</body>
</html>


Puis le javascript

//On load page, init the timer which check if the there are anchor changes each 300 ms
$().ready(function(){
	setInterval("checkAnchor()");
});
var currentAnchor = null;
//Function which chek if there are anchor changes, if there are, sends the ajax petition
function checkAnchor(){
	//Check if it has changes
	if(currentAnchor != document.location.hash){
		currentAnchor = document.location.hash;
		//if there is not anchor, the loads the default section
		if(!currentAnchor)
			query = "section=home";
		else
		{
			//Creates the  string callback. This converts the url URL/#main&id=2 in URL/?section=main&id=2
			var splits = currentAnchor.substring(1).split('&');
			//Get the section
			var section = splits[0];
			delete splits[0];
			//Create the params string
			var params = splits.join('&');
			var query = "section=" + section + params;
		}
		//Send the petition
		$("#loading").fadeIn(250);
		$.get("callbacks.php",query, function(data){
			$("#content").fadeOut(250, function(){
				$("#content").empty()
				$("#content").html(data);				
				$("#loading").fadeOut(750);
				$("#content").fadeIn(500);
				})
		});
	}
}


Et j'utilise la bibliothèque jquery-1.4.2.min.js

pour appeler les pages j'utiliser une page php


<?php
//Captures the petition and load the suitable section
switch($_GET['section']){
	case 'home':
		include "pages/home.html";
	break;
	case 'gallerie':
		include "pages/gallerie.php";
	break;
	case 'contact':
		include "pages/contact.html";
	break;
	case 'images':
		include "pages/images.php";
	break;
	case 'images2':
		include "pages/images2.php";
	break;
	default:
	echo '<h1>Erreur 404</h1>';
	echo '<p>La page que vous cherchez n\'existe pas!</p>';
}
?>


Merci de votre aide.
à bientôt
Sujet clos
Aller à