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

jQuery Discussion :

jQuery history, IE, Réferencement


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Étudiant
    Inscrit en
    Février 2006
    Messages
    60
    Détails du profil
    Informations personnelles :
    Âge : 37

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Février 2006
    Messages : 60
    Par défaut jQuery history, IE, Réferencement
    Bonjour,
    Je développe un site web "pure Ajax" utilisant le framework jQuery et certains de ces plugins. La navigation se fait grâce au plugin jQuery history qui offre d'utiliser les boutons back et next du navigateur et les enregistrement dans les favoris.

    URL du site : Elektrochoc-2009
    Hebergement : OVH mutualisé 60GP

    Mon soucis n°1 :
    Cette navigation fonctionne parfaitement sous Firefox mais ne fonctionne pas sous Safari, Internet Explorer et Google Chrome (et surement les autres aussi).
    Voila le code ce cette navigation (j'ajoute que j'ai commenté tous les autres scripts js pour voir d'où venait le problème, je suis quasiment sure que cela vient de jQuery history)

    HTML :
    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
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     
    		<style type="text/css">@import "template/orange/style.css";</style>
    		<style type="text/css">@import "template/orange/style-js.css";</style>
     
    		<script src="template/javascript/jquery-1.3.1.js" type="text/javascript" charset="utf-8"></script>
    		<script src="template/javascript/jquery.wslide-0.1.0.js" type="text/javascript" charset="utf-8"></script>
    		<script src="template/javascript/jquery.transition-2.0.0.js" type="text/javascript" charset="utf-8"></script>
    		<script src="template/javascript/jquery.history.js" type="text/javascript" charset="utf-8"></script>
    		<script src="template/javascript/jquery.googlemaps.js" type="text/javascript" charset="utf-8"></script>
    		<script src="template/javascript/myScripts.js" type="text/javascript" charset="utf-8"></script>
    		<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAhRE4TzdOOq6200NpRd-lERRG9ty_RnOvByyFLtGcFb10TQDClBTaU2CYaeil1qBRX5krDDKnizPlZA"type="text/javascript"></script>
     
    		<title>{TITLE_PAGE}</title>
     
    		<script type="text/javascript" charset="utf-8">
    		<!--
    		sfHover = function() {
    		        var sfEls = document.getElementById("menu").getElementsByTagName("LI");
    		        for (var i=0; i<sfEls.length; i++) {
    		                sfEls[i].onmouseover=function() {
    		                        this.className+=" sfhover";
    		                }
    		                sfEls[i].onmouseout=function() {
    		                        this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
    		                }
    		        }
    		}
    		if (window.attachEvent) window.attachEvent("onload", sfHover);		
    		-->
    		</script>
     
    	</head>
     
    	<body>
    		<div id="global">
    			<div id="header">
    				<div id="menu">
    					<ul>
    						<li id="tab1" class="active"><a title="Accueil" class="history" href="#accueil" >Accueil</a></li>
    						<li id="tab2"><a title="Actualités" class="history" href="#actu" >Actualités</a></li>
    						<li id="tab3"><a title="Artistes" class="history" href="#artistes" >Artistes</a></li>
    						<li id="tab4">
    							<a title="Informations Pratiques" class="history" href="#infos" >Infos</a>
    							<ul>
    								<li><a title="Informations Pratiques - Lieu" class="history" href="#infos-lieu" >Lieu</a></li>
    								<li><a title="Informations Pratiques - Transport" class="history" href="#infos-transport" >Transport</a></li>
    								<li><a title="Informations Pratiques - billeterie" class="history" href="#infos-billeterie" >Billeterie</a></li>
    							</ul>
    						</li>
    						<li id="tab5">
    							<a title="Historique" class="history" href="#historique" >Historique</a>
    							<ul>
    								<li><a title="Historique 2008" class="history" href="#historique-2008" >Festival 2008</a></li>
    								<li><a title="Historique 2007" class="history" href="#historique-2007" >Festival 2007</a></li>
    							</ul>
    						</li>
    						<li id="tab6"><a title="Forums" class="history" href="./forums/" target="out">Forums</a></li>
    						<li id="tab7"><a title="Liens" class="history" href="#liens" >Liens</a></li>
    						<li id="tab8"><a title="Contacts" class="history" href="#contact" >Contacts</a></li>
    					</ul>
    				</div>
     
    			</div>
     
    			<div id="center">
    				<div id="content"></div>
    			</div>
     
    		</div>
    	</body>
    </html>
    Javascript :
    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
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    function GetId(id) {
    	return document.getElementById(id);
    }
     
    function change_current_tab(new_current_tab) {
    	// On désactive chaque onglet
    	for(var i = 1; i <= 8; i++) {
    		var tab = GetId("tab" + i);
    		tab.className = "";
    	}
     
    	// On active le bon onglet
    	var tab = GetId(new_current_tab);
    	tab.className = "active";
    }
     
    // PageLoad function
    // This function is called when:
    // 1. after calling $.historyInit();
    // 2. after calling $.historyLoad();
    // 3. after pushing "Go Back" button of a browser
    function pageload(hash) {
    	if(hash) {			
    		var i = hash.indexOf("-");
    		var part1 = "";
    		var part2 = "";
     
    		if(i == -1) {
    			hash = hash + ".php";
    		} else {
    			part1 = hash.substr(0, i);
    			part2 = hash.substr(i + 1, hash.length);
    			hash = part1 + ".php?page=" + part2;
    		}
     
    		if(hash.indexOf("accueil") != -1) {
    			change_current_tab("tab1");
    			ocument.title = "Elektrochoc 2009 - Accueil";
    		}
    		if(hash.indexOf("actu") != -1) {
    			change_current_tab("tab2");
    			document.title = "Elektrochoc 2009 - Actualité";
    		}
    		if(hash.indexOf("artistes") != -1) {
    			change_current_tab("tab3");
    			document.title = "Elektrochoc 2009 - Artistes";
    		}
    		if(hash.indexOf("infos") != -1) {
    			change_current_tab("tab4");
    			document.title = "Elektrochoc 2009 - Infos";
    		}
    		if(hash.indexOf("historique") != -1) {
    			change_current_tab("tab5");
    			document.title = "Elektrochoc 2009 - Historique";
    		}
    		if(hash.indexOf("liens") != -1) {
    			change_current_tab("tab7");
    			document.title = "Elektrochoc 2009 - Liens";
    		}
    		if(hash.indexOf("contact") != -1) {
    			change_current_tab("tab8");
    			document.title = "Elektrochoc 2009 - Contacts";
    		}
     
    		$("#content").html('<p style="text-align: center; font-weight : bold; margin-top: 30px;">Chargement... <br /><br /><img src="./template/orange/images/loading.gif"></p>');
     
    			setTimeout(function() {
    				$("#content").load(hash, function() {
     
    					$(".accordion h3:first").addClass("active");
    					$(".accordion p:not(:first)").hide();
    					$(".accordion h3").click(function(){
    					$(this).next("p").slideToggle("slow").siblings("p:visible").slideUp("slow");	
    				$(this).toggleClass("active");						$(this).siblings("h3").removeClass("active");
    				});
     
    				$("#galerie2007").transition({
    					title: "Elektrochoc 2007",
    					images: [
    						{image: "images/2007/01.jpg", thumb: "images/2007/thumb/01.jpg", title: "01.jpg"},
    						{image: "images/2007/02.jpg", thumb: "images/2007/thumb/02.jpg", title: "02.jpg"},
    						{image: "images/2007/03.jpg", thumb: "images/2007/thumb/03.jpg", title: "03.jpg"},
    						{image: "images/2007/04.jpg", thumb: "images/2007/thumb/04.jpg", title: "04.jpg"},
    						{image: "images/2007/05.jpg", thumb: "images/2007/thumb/05.jpg", title: "05.jpg"},
    						{image: "images/2007/06.jpg", thumb: "images/2007/thumb/06.jpg", title: "06.jpg"},
    						{image: "images/2007/07.jpg", thumb: "images/2007/thumb/07.jpg", title: "07.jpg"}
    					],
     
    					displayCaption: false,
    					autoRun: true,
    					displayTime: 3000,
    					ransitionTime: 500
    				});
     
    				$("#galerie2008").transition({
    					title: "Elektrochoc 2008",
    					images: [
    						{image: "images/2008/01.jpg", thumb: "images/2008/thumb/01.jpg", title: "01.jpg"},
    						{image: "images/2008/02.jpg", thumb: "images/2008/thumb/02.jpg", title: "02.jpg"},
    						{image: "images/2008/03.jpg", thumb: "images/2008/thumb/03.jpg", title: "03.jpg"},
    						{image: "images/2008/04.jpg", thumb: "images/2008/thumb/04.jpg", title: "04.jpg"},
    						{image: "images/2008/05.jpg", thumb: "images/2008/thumb/05.jpg", title: "05.jpg"},
    						{image: "images/2008/06.jpg", thumb: "images/2008/thumb/06.jpg", title: "06.jpg"},
    						{image: "images/2008/07.jpg", thumb: "images/2008/thumb/07.jpg", title: "07.jpg"},
    						{image: "images/2008/08.jpg", thumb: "images/2008/thumb/08.jpg", title: "08.jpg"}
    					],
     
    					displayCaption: false,
    					autoRun: true,
    					displayTime: 3000,
    					transitionTime: 500
    				});
     
    				$("#map").googleMap(48.2996682, 4.072001, 15, {
    					controls: ["GSmallMapControl", "GMapTypeControl"],
    					markers: $(".geo")
    				});
     
     
    			});				
    		}, 400);
     
    	} else {
     
    		$("#content").html('<p style="text-align: center; font-weight : bold; margin-top: 30px;">Chargement... <br /><br /><img src="./template/orange/images/loading.gif"></p>');
     
    		setTimeout(function() {
    			change_current_tab("tab1");
    			document.title = "Elektrochoc 2009 - Accueil";
    			$("#content").load("accueil.php");							
    		}, 400);
     
    	}
    }
     
     
    $(document).ready(function(){
    	$.historyInit(pageload);
    };
     
    $(document).ajaxComplete(function(){
     
    	// sélection de tous les liens a ayant l'attribut rel égal à history (valeur arbitraire)
    	$("a[@class='history']").click(function(){
     
    		//suppression du mot cle history, pour que les liens ne soient surchargés qu'une seule fois
    		this.rel = this.rel.replace(/history/, '');
     
    		// mise à jour de l'ancre
    		var hash = this.href;
     
    		// suppression du caractère #
    		hash = hash.replace(/^.*#/, '');
     
    		// chargement dans l'historique et appel de pageload
    		$.historyLoad(hash);
     
    		// trés important : désactivation du clic du lien a
    		return false;
    	});
     
    });
    Voila, vous pouvez tester avec Firefox (ca fonctionne) et avec un autre navigateur où ca ne fonctionnera pas.
    Je ne vois pas du tout où se trouve ce problème.


    Mon soucis n°2 :
    Étant donné que le contenu des pages se trouve entre ces balises <div id="content"></div> et donc que sans javascript, rien ne s'afficherait. je pense avoir des problèmes de référencement.
    Mais bon ce problème reste secondaire, je préfère deja que ca fonctionne pour tous les navigateurs.

    Je vous remercie d'avance.

    Spirit

  2. #2
    Membre confirmé
    Étudiant
    Inscrit en
    Février 2006
    Messages
    60
    Détails du profil
    Informations personnelles :
    Âge : 37

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Février 2006
    Messages : 60
    Par défaut
    Bonjour,

    Je fais un up et simplifie le code, car selon Internet Explorer, l'erreur viendrait de cette ligne :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    $("a[@class='history']").click(function(){
    Voila le code (simplifié)

    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
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
     
     // PageLoad function
    // This function is called when:
    // 1. after calling $.historyInit();
    // 2. after calling $.historyLoad();
    // 3. after pushing "Go Back" button of a browser
    function pageload(hash) {
    	if(hash) {			
    		/* Traintement de l'ancre */	
     
    		$("#content").html('<p style="text-align: center; font-weight : bold; margin-top: 30px;">Chargement... <br /><br /><img src="./template/orange/images/loading.gif"></p>');
     
    			setTimeout(function() {
    				$("#content").load(hash, function() {
    					/* ... */							
    			});				
    		}, 400);
     
    	} else {
     
    		$("#content").html('<p style="text-align: center; font-weight : bold; margin-top: 30px;">Chargement... <br /><br /><img src="./template/orange/images/loading.gif"></p>');
     
    		setTimeout(function() {
    			$("#content").load("accueil.php");							
    		}, 400);				
    	}
    }
     
     
    $(document).ready(function(){
    	$.historyInit(pageload);
    };
     
    $(document).ajaxComplete(function(){
     
    	// sélection de tous les liens a ayant l'attribut rel égal à history (valeur arbitraire)
    	$("a[@class='history']").click(function(){
     
    		//suppression du mot cle history, pour que les liens ne soient surchargés qu'une seule fois
    		this.rel = this.rel.replace(/history/, '');
     
    		// mise à jour de l'ancre
    		var hash = this.href;
     
    		// suppression du caractère #
    		hash = hash.replace(/^.*#/, '');
     
    		// chargement dans l'historique et appel de pageload
    		$.historyLoad(hash);
     
    		// trés important : désactivation du clic du lien a
    		return false;
    	});
     
    });
    Merci.

    spirit

  3. #3
    Membre confirmé
    Étudiant
    Inscrit en
    Février 2006
    Messages
    60
    Détails du profil
    Informations personnelles :
    Âge : 37

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Février 2006
    Messages : 60
    Par défaut
    Voila la solution pour ceux qui auraient un jour le même problème.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    $("a.history").click(function(){
    Bonne soirée.

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

Discussions similaires

  1. jquery history back
    Par speedylol dans le forum jQuery
    Réponses: 1
    Dernier message: 31/03/2012, 12h20
  2. Utiliser le plugin jQuery.history
    Par SpIrIt505050 dans le forum jQuery
    Réponses: 1
    Dernier message: 19/02/2009, 11h17
  3. Query-string sur l'objet history
    Par AlLutun dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 16/11/2004, 09h20
  4. [FLASH MX2004] Réference a autre page
    Par ashurai dans le forum Flash
    Réponses: 5
    Dernier message: 26/10/2004, 11h38

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