Historique navigateur en jQuery

Version imprimable

16/07/2012, 23h21
iorbita

Historique navigateur en jQuery

Bonjour à tous,
comme vous l’aurez compris je suis nouveau sur le forum, il y a un début à tout... :)
Je rencontre un problème avec ma galerie d’images et un filtrage via jQuery qui permet d’afficher mon portfolio par type de travail.

Voici la page en question.

Le problème: quand je clique sur une vignette de ma galerie qui a été préalablement filtrée par type de travail j’aboutis bien à ma page html suivante, mais au moment de retourner dans mon historique je retombe sur l’entièreté de ma galerie et non sur le filtrage effectué auparavant, vous me direz que c’est assez normal puisque ce filtrage s’effectue à chaque fois sur la même page html.
Sur d’autres forums on m’a conseillé de me pencher sur l’objet history ou encore en essayant de changer le # (la partie après le # dans l'URL).
Je ne comprends pas comment effectuer la manipulation, je tiens à préciser qu’étant novice en programmation la tâche est encore plus compliquée...

Après quelques recherches j’ai abouti sur deux plug-ins jQuery: jQuery Address et jQuery BBQ: Back Button & Query Library. J’ai du mal à comprendre leurs mise en place.
J’ai attribué un nom unique à chaque liens du menu principal (<a href="#printdesign">, <a href="#identitydesign">, ...) de la page iorbita-portfolio.html mais je ne comprends pas comment les cibler à partir de la page iorbita-portfolio-printdesign1.html . Quelqu’un pourrait m’aider à y voir plus clair...?

Merci ;)
17/07/2012, 08h18
SpaceFrog

en gros c'est le principe du hashbang

la partie de l'url après un # s'appelle le hash

le principe serait alors lors de la navigation dans ta galerie de modifier le hash
et de faire un location replace
au chargement de la page il faudra alors vérifier le hash contenu dans l'url et modifier le galerie en conséquence
ainsi lors du retour arrière la galerie sera bien dans l'état précédent
17/07/2012, 13h16
iorbita

Bonjour et merci pour la réponse ;)
... je pensais être arrivé au bout de mes peines en suivant et en appliquant l’exemple repris ici mais je me rends compte, si je ne me trompe pas, que j’ai un conflit entre deux actions jQuery. En effet autant mon action de filtre de mes travaux que l’application du hash après mon adresse html s’applique au même identifiant #filtre li a
Quand dans mon fichier porfolio.js je désactive les instructions jQuery pour le filtrage de mes travaux le hashbang est bien appliqué, et vice versa, quand j’active les instructions jQuery pour le filtrage de mes travaux c’est le hashbang qui n’est plus pris en considération ... et je dois dire que je ne vois vraiment pas comment contourner le problème :?
17/07/2012, 13h19
SpaceFrog

verifier si tu n'utilises pas des variables communes ..

sinon passer par noClonflict()

... voici mon code jQuery pour le filtrage de mes travaux:

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
26
27
28
29
30
31
32
33
34
35
36
$('#filtre li a').click(function () {						// On clique sur un filtre
 
        $('#filtre li').removeClass('active');						// Supprimer la classe "active" sur tous les liens du filtre
        $(this).parent().addClass('active');						// Ajouter la classe "active" sur le parent (li) du "a" cliqué
 
        var valeurFiltre = $(this).text().toLowerCase().replace(' ', '');	// On stocke dans une variable la valeur du lien cliqué, en minuscule et sans espace
 
        $('#portfolio li').hide();								// Cacher tous les projets
 
        if (valeurFiltre == "tout") {							// On teste si le filtre appliqué est sur "tout"
 
            $('#portfolio li').show('slow');						// Alors on montre tous les projets
 
        } else {
 
            $('#portfolio li').each(function () {					// Sinon c'est que l'on est dans une catégorie
 
                if (!$(this).hasClass(valeurFiltre)) {					// On vérifie si le "li" n'a pas la classe du filtre appliqué
 
                    $(this).hide('slow');							// On cache les projets qui n'ont pas cette classe
 
                } else {
 
                    $(this).show('slow');							// Sinon on les montre
 
                }
 
 
            });
 
 
        }
 
        return false;									// Bloque l'action initiale du lien
 
    });

..et voici le code pour le hashbang

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$(function(){
 
  // Bind an event to window.onhashchange that, when the hash changes, gets the
  // hash and adds the class "selected" to any matching nav link.
  $(window).hashchange( function(){
    var hash = location.hash;
 
    // Set the page title based on the hash.
    document.title = 'iorbita - ' + ( hash.replace( /^#/, '' ) || 'blank' ) + '.';
 
    // Iterate over all nav links, setting the "selected" class as-appropriate.
    $('#filtre li a').each(function(){	
      var that = $(this);
      that[ that.attr( 'href' ) === hash ? 'addClass' : 'removeClass' ]( 'selected' );
    });
  })
 
  // Since the event is only triggered when the hash changes, we need to trigger
  // the event now, to handle the hash the page may have loaded with.
  $(window).hashchange();
 
});

...je n'ai pas l'impression d'utiliser une même variable, j'ai plutôt d'un côté la fonction jQuery $('#filtre li a').click et de l'autre côté la fonction jQuery $('#filtre li a').each plus les méthodes addClass et removeClass communes de part et d'autre.

20/07/2012, 15h55
iorbita
....je reviens avec mon éternel problème, je ne démords pas car malheuresement je n’ai pas d’autres solutions.

Assez désespéré je me suis penché aussi sur l'autre script: jQuery Address

Ici quand je désactive les instructions jQuery pour le filtrage de mes travaux le hashbang est bien appliqué (voir après l'adresse html dans le barre de navigation du navigateur).

Voici le script pour l'ajout du hashbang avec le script jQuery Address:
Code:

1 2 3 4 5 6 $('#filtre li a').click(function () { $.address.history(function() { return $(this).attr('href').replace(/^#/, ''); }); });
Et rebelotte, là aussi conflit avec l'autre script ou en tout cas le script prends le dessus sur l'autre...

Ma conclusion c'est que les deux scripts fonctionnent individuellement... mais pas ensemble...

Cela fait maintenant quelques jours que j’effectue des recherches et que j’essaie de m’en sortir, mais je tourne en rond et je perds un temps monstre... Quelqu’un aurait l’amabilité de m’indiquer comment m’en sortir. Merci.
20/07/2012, 16h07
SpaceFrog

ma conclusion est que le this n'est pas ce que tu penses
20/07/2012, 17h27
iorbita

Citation:

Envoyé par SpaceFrog

ma conclusion est que le this n'est pas ce que tu penses

...je suppose que tu fais référence au this du script JQuery Address? ... de toute façon cela doit être valable aussi pour l'autre script puisque le problème est identique.
Tu ne peux pas m'en dire un peu plus? :roll:

Code:

1
2
3
4
5
6
$('#filtre li a').click(function () {	
        mylibnk=$(this)
	$.address.history(function() {
                    mylink.attr('href').replace(/^#/, '');
                });
});

... au fait je viens de me rendre compte que le script exact pour jQuery Address est plutôt celui-ci
Code:

1 2 3 4 5 6 7 8 $('#filtre li a').click(function () { $(this).address.history(function() { return $(this).attr('href').replace(/^#/, ''); }); });
...et non celui que j'ai donné juste avant.

Donc si je reprends le code que tu m'as donné et je l'adapte au mien je devrais obtenir ceci:
Code:

1 2 3 4 5 6 7 8 $('#filtre li a').click(function () { mylink = $(this); $(this).address.history(function() { mylink.attr('href').replace(/^#/, ''); }); });
... mais cela ne fonctionne toujours pas :cry: