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 :

Préciser une URL


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Futur Membre du Club
    Femme Profil pro
    Webdesigner
    Inscrit en
    Novembre 2012
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Val d'Oise (Île de France)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Novembre 2012
    Messages : 3
    Par défaut Préciser une URL
    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 !

  2. #2
    Membre expérimenté Avatar de MaitreKaio
    Profil pro
    Freelance Java / Web / Mobile
    Inscrit en
    Juin 2007
    Messages
    140
    Détails du profil
    Informations personnelles :
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Freelance Java / Web / Mobile
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Juin 2007
    Messages : 140
    Par défaut
    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:
    1. Utiliser des ancres (par exemple "#categorie1") pour pouvoir impacter l'URL et ainsi permettre de bookmarker et de partager les états
    2. Réagir au changement de hashtag (la partie derrière le #) , dans ton cas en appliquant le bon filtre
    3. 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.

  3. #3
    Futur Membre du Club
    Femme Profil pro
    Webdesigner
    Inscrit en
    Novembre 2012
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Val d'Oise (Île de France)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Novembre 2012
    Messages : 3
    Par défaut
    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.

  4. #4
    Membre expérimenté Avatar de MaitreKaio
    Profil pro
    Freelance Java / Web / Mobile
    Inscrit en
    Juin 2007
    Messages
    140
    Détails du profil
    Informations personnelles :
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Freelance Java / Web / Mobile
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Juin 2007
    Messages : 140
    Par défaut
    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 ?

  5. #5
    Futur Membre du Club
    Femme Profil pro
    Webdesigner
    Inscrit en
    Novembre 2012
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Val d'Oise (Île de France)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Novembre 2012
    Messages : 3
    Par défaut
    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 !!

  6. #6
    Membre expérimenté Avatar de MaitreKaio
    Profil pro
    Freelance Java / Web / Mobile
    Inscrit en
    Juin 2007
    Messages
    140
    Détails du profil
    Informations personnelles :
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Freelance Java / Web / Mobile
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Juin 2007
    Messages : 140
    Par défaut
    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).

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

Discussions similaires

  1. [ Struts ] recuperer une valeur dans une url?
    Par njac dans le forum Struts 1
    Réponses: 2
    Dernier message: 02/06/2004, 14h24
  2. [net] recuperer les proprietes d'un File via une URL
    Par mma dans le forum Entrée/Sortie
    Réponses: 5
    Dernier message: 06/05/2004, 12h45
  3. [Debutant]Formater un string pour une url
    Par maxxou dans le forum Entrée/Sortie
    Réponses: 3
    Dernier message: 22/03/2004, 16h17
  4. [JSP] encoder et décoder les param d'une URL ?
    Par iubito dans le forum Servlets/JSP
    Réponses: 2
    Dernier message: 22/12/2003, 11h34
  5. [web] tester la validiter d'une URL
    Par zebiloute dans le forum Web
    Réponses: 4
    Dernier message: 25/11/2002, 16h51

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