Discussion :

[ParisElliot]

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.
On m'a parl� de la fonction innerHTML mais je n'y connais pas grand chose en JavaScript... Si vous pouvez m'aider je vous serez vraiment reconnaissant !

Je vous montre le r�sultat que j'aimerai :



Et voila le code :

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
<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">
			        <div class="ligne1">
					<iframe width="30%" 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="30%" 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="30%" 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">
					<iframe width="30%" 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="30%" 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="30%" 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>

Code css :

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
.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%;
}

[-Rpass-]

Bonjour,

Si ta question est de savoir comment modifier le contenu d'une div tu as plusieurs m�thodes par exemple en JQuery : append (ajoute du contenu � la fin de la div), prepend (au d�but), innerHtml ou html() en Jquery qui remplace le contenu de la div. Tout d�pend de ou tu veux et comment ut veux placer ton lecteur .

[ParisElliot]

Alors en fait l'image que je vous ai mise c'est ce qui s'affichera a chaque fois. Seuls les musiques changeront. Du coup, a chaque clic sur une cat�gorie, les musiques changeront.

[NoSmoking]

Bonjour,

(...)quand je clic sur un, avoir les lecteurs des musiques qui correspondent bien.

il te faut modifier les src de tes IFRAMEs.

[ParisElliot]

Comment ca les modifier ? J'ai les musiques qu'il me faut avec.

[NoSmoking]

Je n'avais pas compris que tu les chargeais tout au d�part dans tes IFRAMEs.
Je pense donc qu'il faut que tu affiches/masques les IFRAMEs suivant le choix de ton menu.