[Résolu] Changement contenu div au choix menu

Question

Zop

6 Apr 2015 à 17:27

Bonjour à tous,

Alors voila : je développe un site actuellement dans le cadre d'un stage que j'effectue et je souhaite, dans une page, avoir un menu (différents types de musiques) et quand je clic sur un, avoir les lecteurs des musiques qui correspondent bien et le menu qui suit le choix de l'utilisateur. J'ai deja pas mal cherché et rien trouvé me correspondant...
Si vous pouvez m'aider je vous serez vraiment reconnaissant !

Je vous montre le résultat que j'ai pour le moment :

upload/58325-Capturedan.png

Voici le code actuel :

/* Slide 3 */
        #slide-3 .bcg 
        {
            background-image:url('../img/bcg_slide-3.jpg')
        }      

        .titreslide3
        {
            margin-top: 5%;
            font-family: caviar_dreamsregular;
            font-size: 2vw;
            margin-left: 62%;
            letter-spacing: 1.2em;
        }

        .sectiontitremusic
        {
            width: 50%;
            float: right;
        }

        .menumusic
        {
            text-align: center;
            margin-top: 2%;
            margin-right: 15%;
            width: 26%;
            float: right;
        } 

        .menumusic ul 
        {
          margin: 0;
          padding: 0;
          list-style-type: none;
          width: auto;
          position: relative;
          display: block;
          font-size: 1vw;
          background: none;
          font-family: caviar_dreamsregular;
          zoom: 1;
        }

        .menumusic ul:before 
        {
          content: '';
          display: block;
        }

        .menumusic ul:after 
        {
          content: '';
          display: table;
          clear: both;
        }

        .menumusic li {
          display: block;
          float: right;
          padding: 0 4px;
        }

        .menumusic li a {
          display: block;
          float: right;
          color: black;
          text-decoration: none;
          padding: 10px 20px 7px 20px;
          border-bottom: 3px solid transparent;
        }

        .menumusic li a:hover {
          color: black;
          border-bottom: 3px solid black;
        }

        .menumusic li.active a {
          display: inline;
          border-bottom: 3px solid black;
          float: right;
          margin: 0;
        }

        .musique
        {
            width: 60%;
            float: right;
        }

        .ligne1
        {
            margin-top: 8%;
        }

        .ligne2
        {
            margin-top: 6%;
        }

        .ligne1 iframe:nth-child(2), .ligne2 iframe:nth-child(2)
        {
            margin-left: 2.5%;
            margin-right: 2.5%;
        }


<section id="slide-3" class="homeSlide">
				<div class="bcg">
			    	<div class="hsContainer">
		    			<div class="hsContent">
		    				<div class="titreslide3"><h1>MUSIC</h1></div>
		    					<div class='menumusic'>
									<ul>
									   <li class='active'><a href="#"><span>Country</span></a></li>
									   <li><a href="#"><span>Deep</span></a></li>
									   <li><a href="#"><span>Techno</span></a></li>
									   <li class='last'><a href="#"><span>Electro</span></a></li>
									</ul>
								</div>
								<div class="clear"></div>
								<div class="musique">

									<!-- COUNTRY -->
						    		<div class="ligne1">
						    			<iframe width="27%" height="8%" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/196167812&amp;color=000000&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false"></iframe>

						    			<iframe width="27%" height="8%" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/196167812&amp;color=000000&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false"></iframe>

						    			<iframe width="27%" height="8%" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/196167812&amp;color=000000&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false"></iframe>
						    		</div>

						    		<div class="ligne2">
						    			<iframe width="27%" height="8%" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/196167812&amp;color=000000&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false"></iframe>

						    			<iframe width="27%" height="8%" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/196167812&amp;color=000000&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false"></iframe>

						    			<iframe width="27%" height="8%" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/196167812&amp;color=000000&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false"></iframe>
						    		</div>

									<!-- DEEP -->
						    		<div class="ligne1" style="display: none;">
						    			<iframe width="27%" height="8%" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/194708475&amp;auto_play=false&amp;hide_related=false&amp;show_comments=false&amp;show_user=true&amp;show_reposts=false&amp;visual=true"></iframe>

						    			<iframe width="27%" height="8%" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/194708475&amp;color=000000&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false"></iframe>

						    			<iframe width="27%" height="8%" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/194708475&amp;color=000000&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false"></iframe>
						    		</div>

									<div class="ligne2" style="display: none;">
						    			<iframe width="27%" height="8%" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/194708475&amp;auto_play=false&amp;hide_related=false&amp;show_comments=false&amp;show_user=true&amp;show_reposts=false&amp;visual=true"></iframe>

						    			<iframe width="27%" height="8%" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/194708475&amp;color=000000&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false"></iframe>

						    			<iframe width="27%" height="8%" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/194708475&amp;color=000000&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false"></iframe>
						    		</div>

				    			</div>
		    				</div>
			    		</div>
			    	</div>  	
			    </div>
			</section>

Voila, vous allez me sauver mon stage si vous trouvez une solution !
Merci d'avance à tous.
Modifié par Zop (08 Apr 2015 - 15:55)

audrasjb

6 Apr 2015 à 20:03

Bonjour et bienvenue sur le forum, Zop Smiley smile

Tu souhaite conserver le tout sur une seule page ? À ce moment là il va (par exemple) falloir utiliser Javascript/jQuery et donner un attribut data-* à chacun des conteneurs de tes players. Ensuite, au clic sur un élément du menu, on retire tous les conteneurs dont la valeur de l'attribut data-* ne correspond pas. On peut travailler sur un petit exemple si c'est bien ce que tu veux faire.

Maintenant, pourquoi ne pas avoir tout simplement une page par type de musique, avec les contenus (iframes) correspondant pour chaque type de musique. Si tu as 4 rubriques, tu fais 4 pages HTML, un menu qui pointe vers chaque rubrique et puis voilà.

À moins que je n'ai pas saisi ton objectif, la solution 2 me semble évidemment la plus simple à mettre en œuvre, sans nécessiter de mettre les mains dans JS. Peux-tu préciser ton besoin exact STP ?

Zop

6 Apr 2015 à 20:11

Bonjour audrasjb et merci Smiley smile

Le site sera un one page du coup la solution n°2 ne correspond pas Smiley ohwell

La une par contre semble être ce que je recherche !

Je souhaite que les musiques changent en fonction du choix de l'utilisateur : Par exemple, l'utilisateur choisit "Electro", les lecteurs correspondants à ce type de musique s'affichent. Ainsi de suite.
Sachant aussi que les lecteurs de country par exemple seront chargés par défaut.

audrasjb

6 Apr 2015 à 22:33

Ok, je te donne le point de départ pour mettre en place tes filtres avec JS (ici jQuery).
Disons que tu as une structure HTML qui ressemblerait plutôt à ça :


<ul class="liste-filtres">
    <li><a href="#" class="btn-filtre btn-filtre-country">Country</a></li>
    <li><a href="#" class="btn-filtre btn-filtre-blues">Blues</a></li>
    <li><a href="#" class="btn-filtre btn-filtre-bluegrass">Bluegrass</a></li>
</ul>
<ul class="liste-items">
    <li class="filtre bluegrass"><!-- UNE IFRAME ICI --></li>
    <li class="filtre blues"><!-- UNE IFRAME ICI --></li>
    <li class="filtre country"><!-- UNE IFRAME ICI --></li>
    <li class="filtre bluegrass"><!-- UNE IFRAME ICI --></li>
    <li class="filtre country"><!-- UNE IFRAME ICI --></li>
</ul>

Et voilà un peu de JS, pour l'un des filtres, je te laisse gérer les autres. Pour faire mieux on pourrait utiliser les data-* pour avoir une seule fonction pour tous les filtres, mais je fais de tête la vite fait. À toi d'optimiser Smiley smile


$('.btn-filtre-country').click(function(){
        // On enlève la classe current-filtre des éléments qui l'ont (voir ci-après)
        // Ça permet d'avoir un effet visuel sur l'item sélectionné pour le styler en CSS, ce qui est un peu indispensable ;–)
	$('.filtre-actif').removeClass('filtre-actif');
        // On ajoute la classe l'élément courant
	$(this).addClass('filtre-actif');
        // On affiche tout
	$('.filtre').show();
        // On masque tout ceux qui n'ont pas la classe choisie (ici "country")
	$('.filtre:not(.country)').hide();
});

Encore une fois, c'est juste pour que tu ait un point de départ, maintenant on pourra optimiser, notamment le choix ici fait de tout montrer pour ensuite masquer ceux qui ne correspondent pas à la sélection.
Modifié par audrasjb (06 Apr 2015 - 22:34)

audrasjb

6 Apr 2015 à 22:36

Ps : ici, j'utilise JS avec la bibliothèque jQuery, il faut donc bien évidemment penser à l'inclure Smiley cligne

Zop

7 Apr 2015 à 13:19

Merci beaucoup audrasjb pour tes explications, ca me permet dans un premier temps de résoudre mon problème mais aussi de progresser !
J'ai utilisé ta méthode, elle marche parfaitement. Cependant il me reste un deux petits soucis : Lors du chargement de la page, toutes les iframe sont affichées, serais tu y remédier ?
Et aussi, le menu ne s'actualise pas en fonction du choix de l'utilisateur (Dans mon menu une classe .active sert à indiquer quel <li> est sélectionné, par défaut "country"). Vu mes compétences trés limitées en Javascript, j'ai essayé tant bien que mal de faire ceci :


$('.btn-filtre-country').removeClass('active');
$('.btn-filtre-deep').addClass('active');

Sans succés...

Merci encore Smiley smile

audrasjb

7 Apr 2015 à 13:29

Salut,

Les deux premières lignes de la fonction click() du code JS ci-dessus ajoutent justement une classe .filtre-actif à l'item de menu clické Smiley cligne

Dans mon code, il s'agit de l'élément a. Si tu veux cibler l'élément li, tu peux utiliser la fonction jQuery parent() :


$('.filtre-actif').parent().removeClass('filtre-actif');
$(this).parent().addClass('filtre-actif');

Tu as une page en ligne sinon ?
Modifié par audrasjb (07 Apr 2015 - 13:29)

Zop

7 Apr 2015 à 14:08

Ah oui d'accord ! J'avais pas compris ça... Mais dans ce cas, je peux remplacer "filtre-actif" par ma classe existante "active" ? Puisque j'aimerai que quand la page se charge, une section soit active par défaut.
Et en utilisant ce code, lorsque je clic sur une seconde section musicale, le menu évolue en soulignant le section sélectionnée, mais l'ancienne reste de même sélectionnée Smiley ohwell

Et quand tu dis une page en ligne, tu entends one page ? Si c'est cela, oui elle est en ligne verticalement.

audrasjb

7 Apr 2015 à 14:20

Zop a écrit :
Et quand tu dis une page en ligne, tu entends one page ? Si c'est cela, oui elle est en ligne verticalement.

Non, je veux dire une page consultable en ligne, même non définitive et sur une adresse provisoire Smiley cligne

C'est ce qu'il faudrait maintenant pour aller un peu plus loin que juste causer du fonctionnement général du truc.

Au pire, tu peux utiliser un outil comme jsFiddle ou Codepen pour isoler ton code actuel. C'est gratuit et surtout ça permet aux forumeurs de faire leurs essais directement sur ton code actuel et de te renvoyer les corrections. Idéal ici Smiley smile

Modifié par audrasjb (07 Apr 2015 - 14:20)

Zop

7 Apr 2015 à 14:47

Ah oui d'accord, je vais faire ca alors ! Smiley smile

Zop

7 Apr 2015 à 15:49

Je n'y arrive pas, j'ai plein de script dans mon html du coup coup codepen n'accepte pas et affiche rien.
Veux tu que je t'envoie par MP une archive de mon code ?

Cela me ferait énormément avancer !

Merci Smiley smile

Zop

8 Apr 2015 à 13:47

audrasjb a écrit :

Non, je veux dire une page consultable en ligne, même non définitive et sur une adresse provisoire
C'est ce qu'il faudrait maintenant pour aller un peu plus loin que juste causer du fonctionnement général du truc.

Au pire, tu peux utiliser un outil comme jsFiddle ou Codepen pour isoler ton code actuel. C'est gratuit et surtout ça permet aux forumeurs de faire leurs essais directement sur ton code actuel et de te renvoyer les corrections. Idéal ici

J'ai uniquement mis la partie qui nous intéresse, voici le lien : http://codepen.io/anon/pen/KwLYPL

Donc le soucis est que au clic, l'ancien choix ne se "déssouligne" pas et qu'au chargement de la page la totalité des iframe s'affiche.

Encore merci de ton aide ! Smiley smile

JENCAL

8 Apr 2015 à 14:02

Salut
dans chaque function tu as

$('.active').parent()

non non non Smiley smile

, faut enlever parent .

			 $('.btn-filtre-country').click(function()
			 {
			     // On enlève la classe current-filtre des éléments qui l'ont (voir ci-après)
			     // Ça permet d'avoir un effet visuel sur l'item sélectionné pour le styler en CSS, ce qui est un peu indispensable ;–)
				$('.active').parent().removeClass('active');

devient

			 $('.btn-filtre-country').click(function()
			 {
			     // On enlève la classe current-filtre des éléments qui l'ont (voir ci-après)
			     // Ça permet d'avoir un effet visuel sur l'item sélectionné pour le styler en CSS, ce qui est un peu indispensable ;–)
				$('.active').removeClass('active');

ou

$('li').removeClass('active');

et ça pour les trois btn.

Le problème c'est qu'a la base tu met un removeClass sur l'element PARENT de la classe active, donc l'élement UL..
Modifié par JENCAL (08 Apr 2015 - 14:11)

Zop

8 Apr 2015 à 14:16

Ah oui je comprends mieux pourquoi, en effet ! Merci beaucoup de ton aide Smiley smile

Et aucune idée de comment résoudre le fait d'afficher uniquement les iframes de la selection par défaut (ici country) au chargement de la page ?

JENCAL

8 Apr 2015 à 14:26

c'est pas deja le cas, c'est pas country au démarrage ?

Zop

8 Apr 2015 à 14:54

Si, mais la totalité des iframes s'affichent, c'est à dire ceux de country, ceux de techno, d'éléectro etc...
Et je voudrais qu'il y ai uniquement ceux de country.

JENCAL

8 Apr 2015 à 15:13

EDIT : Voila c'est mieux, sans modifier les classes...

exemple : http://codepen.io/anon/pen/XJLmbo
Modifié par JENCAL (09 Apr 2015 - 09:55)

Zop

8 Apr 2015 à 15:54

Parfait, merci beaucoup !

audrasjb

8 Apr 2015 à 21:00

Nice JENCAL Smiley smile

Bien joué Zop d'avoir joué le jeu et de mettre en place un codepen, et désolé pour ma lenteur, j'étais charette Smiley smile

Sujet clos

JavaScript, DOM et API Web HTML5

[Résolu] Changement contenu div au choix menu