Préciser une URL

**marion_D** · 13/11/2012, 13h52

Bonjour à tous !

Je débute en html, css et javascript (disons que ca fait 2 mois). Et là j'ai besoin de votre aide.

Je suis en train de coder un site qui contient un portfolio. Les projets à présenter se regroupent en différentes catégories, 4 en tout. Un projet peut appartenir à 2 voire 3 catégories.

Le portfolio est sur la page work_categories, qui contient tous les projets. Elle contient également un menu qui permet de naviguer d'une catégorie à l'autre (ce menu n'existe pas sur les autres pages du site).
Quand on est sur la page work_catégories et que l'on clique sur les liens de ce menu, un filtre jquery s'active et trie les projets en fonction de la catégorie demandée. (ex: si je clique sur catégorie1, je reste sur la page work_categories, mais il n'y a que les projets appartenant à la categorie1 qui s'affichent. Les autres projets disparaissent. Idem pour la catégorie2, etc). Les projets ont chacun une class qui permet d'indiquer à quelle catégorie ils appartiennent.
Jusque là, tout va bien.

MAIS. Il faudrait que l'URL de work_categories change en fonction de la catégorie qui s'affiche. Quelque chose du genre http://...work_categories#categorie1
L'idée c'est de pouvoir faire des liens qui pointent vers 1 seule catégorie dans work_catégories (liens internes au site, mais aussi externes).

Tous les tutos que j'ai trouvé permettent d'ajouter une ancre; fonctionnant avec une id, du genre

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href=#contenu1> Link </a>

ce qui renvoie à une div du genre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id="contenu1"></div>

Moi je peux pas fonctionner avec des id, puisque j'ai besoin d'attribuer la même catégorie à plusieurs projets, et qu'on ne peut utiliser un id qu'une seule fois.

On a très exactement le même problème pour les lightbox: sur la page work_categories, les projets s'ouvrent ds une lightbox. J'ai besoin d'avoir une url spécifique à chaque projet, afin de pouvoir les partager sur facebook par exemple.

Voici donc mon code HTML, qui contient aussi du javascript:

Code html :

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
 
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <title>test 3 page work</title>
<!--pour le filtre -->
	<script type="text/javascript" src="JS/jquery.js"></script>
	<script type="text/javascript">
        $(document).ready(function() {
                        $('ul#filter a').click(function() {
                                $(this).css('outline','none');
                                $('ul#filter .current').removeClass('current');
                                $(this).parent().addClass('current');
                                
                                var filterVal = $(this).text().toLowerCase().replace(' ','-');
                                                
                                if(filterVal == 'work') {
                                        $('ul#portfolio li.hidden').fadeIn('slow').removeClass('hidden');
                                } else {
                                        
                                        $('ul#portfolio li').each(function() {
                                                if(!$(this).hasClass(filterVal)) {
                                                        $(this).fadeOut('normal').addClass('hidden');
                                                } else {
                                                        $(this).fadeIn('slow').removeClass('hidden');
                                                }
                                        });
                                }
                                
                                return false;
                        });
                });
        </script>
<!-- end filtre -->
<!-- script pour la lightbox jquery-->
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
	<script>!window.jQuery && document.write('<script src="JS/LB_jquery.js"><\/script>');</script>
	<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
	<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
	<script type="text/javascript">
$(document).ready(function(e) {
$("a[rel=example_group]").fancybox({
    'transitionIn'      : 'none',
    'transitionOut'     : 'none',
    'titlePosition'     : 'over',
});
});
        </script>
	<!-- end lightbox jquery-->
  </head>
 
<body>
 
<div class=content>
 
<div class="nav_2">
				<ul id="filter">
					<li><a href="#">Categorie1</a></li>
					<li><a href="#">Categorie2</a></li>
					<li><a href="#">Categorie3</a></li>
					<li><a href="#">Categorie4</a></li>
				</ul>
</div>
 
	<ul id="portfolio">
 
		<li class="item1 categorie1">
			<a rel="example_group" class="iframe" href="http://mon.lien.com">
			<div>
				<h1>titre 1</h1>
				<p> Lorem ipsum dolor sit amet </p>
			</div>
			</a>
		</li>
 
		<li class="item2 categorie2">
			<a rel="example_group" class="iframe" href="http://mon.lien.com">
			<div>
				<h1>titre 2</h1>
				<p> Lorem ipsum dolor sit amet </p>
			</div>
			</a>
		</li>
 
		<li class="item3 categorie3">
			<a rel="example_group" class="iframe" href="http://mon.lien.com">
			<div>
				<h1>titre 3</h1>
				<p> Lorem ipsum dolor sit amet </p>
			</div>
			</a>
		</li>
 
		<li class="item4 categorie4">
			<a rel="example_group" class="iframe" href="http://mon.lien.com">
			<div>
				<h1>titre 4</h1>
				<p> Lorem ipsum dolor sit amet </p>
			</div>
			</a>
		</li>
 
	</ul>
 
</body>
 
</html>

Pour la lightbox, je fais appel à des fichiers javascript que je ne mets pas dans le sujet, car ils sont simplifiés sur une seule ligne (je les ai téléchargés tel quel) et donc illisibles, je pense que personne ici ne les lira...!

Je fais aussi appel à la librairie jquery, pour le filtre.

Cependant voici le site sur lequel j'ai trouvé ma light box : http://fancybox.net/home
Il s'agit de la version "galerie", celle qui est tout en bas.

J'ai l'impression d'en demander des tonnes, mais ca vous paraît peut être tout simple?!
Répondez svp, je suis vraiment bloquée là !
Merci d'avoir lu jusqu'à la fin en tout cas !

**MaitreKaio** · 13/11/2012, 15h04

Ce que tu veux faire n'est pas trivial, et comme j'ai écrit une série d'articles sur ce sujet sur mon blog, je vais écrire une petite bafouille.
Ce que tu veux en fait, c'est créer des liens qui représentent des états particuliers de ton filtre, de manière à pouvoir revenir immédiatement à cet état quand on clique dessus.
A partir de là, l'idée est la suivante:

Utiliser des ancres (par exemple "#categorie1") pour pouvoir impacter l'URL et ainsi permettre de bookmarker et de partager les états
Réagir au changement de hashtag (la partie derrière le #) , dans ton cas en appliquant le bon filtre
Au chargement de la page, regarder si un hashtag existe, et dans ce cas appliquer le même traitement

Il faut noter que cette solution ne sera possible que si ton navigateur supporte l'événement hashchange (http://caniuse.com/hashchange). A noter aussi qu'une solution encore plus élégante, mais basée sur le même principe, est d'utiliser l'API History de HTML5 (si tu veux plus de détails, cf mon blog).
J'ai réécrit ta page, et voici le résultat:

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
 
 
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <title>test 3 page work</title>
<!--pour le filtre -->
	<script src="jquery-1.8.2.js"></script>
	<script type="text/javascript">
	var applyFilter = function(filter) {
		console.log("applying filter " + filter);
		if(filter == 'work') {
			$('ul#portfolio li.hidden').fadeIn('slow').removeClass('hidden');
		} else {
 
			$('ul#portfolio li').each(function() {
				if(!$(this).hasClass(filter)) {
					$(this).fadeOut('normal').addClass('hidden');
				} else {
					$(this).fadeIn('slow').removeClass('hidden');
				}
			});
		}
	}
	$(document).ready(function() {
		$(window).bind('hashchange',
		    function(event) {
		    	hashtag = location.hash.substring(1);
 
		    	console.log("hash:" + hashtag);
		        applyFilter(hashtag);
		    }
		);
 
		if (location.hash) {
			applyFilter(location.hash.substring(1));
		}
 
			$('ul#filter a').click(function(event) {
				$(this).css('outline','none');
				$('ul#filter .current').removeClass('current');
				$(this).parent().addClass('current');
 
			});
		});
	</script>
<!-- end filtre -->
 
  </head>
 
<body>
 
<div class=content>
 
<div class="nav_2">
				<ul id="filter">
					<li><a href="#categorie1">Categorie1</a></li>
					<li><a href="#categorie2">Categorie2</a></li>
					<li><a href="#categorie3">Categorie3</a></li>
					<li><a href="#categorie4">Categorie4</a></li>
				</ul>
</div>
 
	<ul id="portfolio">
 
		<li class="item1 categorie1">
			<a rel="example_group" class="iframe" href="http://mon.lien.com">
			<div>
				<h1>titre 1</h1>
				<p> Lorem ipsum dolor sit amet </p>
			</div>
			</a>
		</li>
 
		<li class="item2 categorie2">
			<a rel="example_group" class="iframe" href="http://mon.lien.com">
			<div>
				<h1>titre 2</h1>
				<p> Lorem ipsum dolor sit amet </p>
			</div>
			</a>
		</li>
 
		<li class="item3 categorie3">
			<a rel="example_group" class="iframe" href="http://mon.lien.com">
			<div>
				<h1>titre 3</h1>
				<p> Lorem ipsum dolor sit amet </p>
			</div>
			</a>
		</li>
 
		<li class="item4 categorie4">
			<a rel="example_group" class="iframe" href="http://mon.lien.com">
			<div>
				<h1>titre 4</h1>
				<p> Lorem ipsum dolor sit amet </p>
			</div>
			</a>
		</li>
 
	</ul>
 
</body>
 
</html>

Je suis à l'écoute si tu as des questions là-dessus.

**marion_D** · 13/11/2012, 16h46

Merci MaitreKaio !

Et merci pour ton code, j'ai essayé, en effet l'URL change en fonction de la catégorie active.
Mais en revanche, le contenu n'est plus filtré (mes 4 catégories sont affichées tout le temps, en dépit des changements d'URL).

J'ai parcouru tes sites, j'ai lu the Hashbang theory et deux autres articles sur l'API history.
J'ai cru comprendre que d'utiliser l'évènement hashchange suffisait pour activer le filtre, mais en revenant à ton code, je vois que tu l'as bien mis.
Du coup je ne comprends pas pourquoi (si je reprends ta liste que tu as faite dans ta réponse), l'étape 1 fonctionne ("Utiliser des ancres pour pouvoir impacter l'URL et ainsi permettre de bookmarker et de partager les états") et non pas l'étape 2 ("Réagir au changement de hashtag (la partie derrière le #) , dans ton cas en appliquant le bon filtre").

Mon navigateur est Chrome 23, donc il devrait réagir à l'évènement hashchange.

Merci encore pour ton aide.

**MaitreKaio** · 13/11/2012, 17h05

Chez moi tout fonctionne bien. Es-tu sure que tu as bien le fichier jquery à côté du fichier de test, comme dans mon environnement ? Si oui, as-tu des erreurs dans la console ?

**marion_D** · 13/11/2012, 17h12

Autant pour moi, je n'avais pas fait attention à ca !!!!!! J'ai mis le fichier JS au bon endroit, et tout fonctionne !!!!!!
Merci beaucoup à toi =D

Je note le sujet en résolu !!

**MaitreKaio** · 13/11/2012, 17h32

Merci, et content de voir que ça répond à ton problème.
Juste une petite note à la personne qui a déplacé la discussion: il s'agit bien d'une question JS et pas spécifiquement d'une question jQuery (même si jQuery est utilisé dans l'exemple).

Préciser une URL

jQuery

Vue hybride

Discussions similaires

Partager

Partager