Derniers messages sur Zeste de Savoirhttps://zestedesavoir.com/forums/2015-11-20T11:27:13+01:00Les derniers messages parus sur le forum de Zeste de Savoir.ca ne s'ouvre pas :/, message #872262015-11-20T11:27:13+01:00Demandred/@Demandredhttps://zestedesavoir.com/forums/sujet/4401/ca-ne-souvre-pas/?page=1#p87226<p>Je suis du même avis que Chaopale : c'est mieux d'appliquer une class css selon l'état que tu recherches plutôt que de changer le style dans le js. Cela rendra ton js plus lisible, ton code plus flexible et tu pourra aussi ajouter des transitions pour faire un effet d'ouverture à l'affichage du spoiler.</p>
<p>Personnellement pour afficher/masquer des éléments de ce genre je joue sur la taille de la div en la passant de 0 à la taille normale ce qui permet d'ajouter un effet de transition. En fait plus précisément je joue sur la propriété "maxHeight" car si on met "height:auto" l'animation css ne se fait pas. </p>
<p>Voici un exemple rapide : </p>
<table class="codehilitetable"><tr><td class="linenos"><div class="linenodiv"><pre>1
2
3
4
5
6
7
8</pre></div></td><td class="code"><div class="codehilite"><pre><span class="kd">function</span> <span class="nx">showSpoiler</span><span class="p">(</span><span class="nx">cible</span><span class="p">){</span>
<span class="k">if</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="nx">cible</span><span class="p">).</span><span class="nx">style</span><span class="p">.</span><span class="nx">maxHeight</span><span class="o">==</span><span class="s2">"0px"</span><span class="p">){</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="nx">cible</span><span class="p">).</span><span class="nx">style</span><span class="p">.</span><span class="nx">maxHeight</span> <span class="o">=</span> <span class="s2">"5000px"</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">else</span><span class="p">{</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="nx">cible</span><span class="p">).</span><span class="nx">style</span><span class="p">.</span><span class="nx">maxHeight</span> <span class="o">=</span> <span class="s2">"0px"</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
</pre></div>
</td></tr></table>
<p>Il te suffit de mettre en css la hauteur en auto et une durée de transition pour avoir un rendu sympa ! Je sais que ici je stylise directement via le js, mais comme je ne touche qu'une propriété de l’élément je trouve ça plus pratique que de faire 2 classes qu'on change uniquement pour faire varier une propriété.</p>
<p>Tu devrais aussi éviter de nommer ta fonction "s" : ce n'est pas explicite, on ne sait pas vraiment ce que fait cette fonction ! Je te conseil de toujours nommer tes fonctions de façon à savoir ce que fait une fonction en lisant son nom, par exemple ici "showSploiler" serait plus adapté ! </p>ca ne s'ouvre pas :/, message #872242015-11-20T10:10:18+01:00Chaopale Lamecarlate/@Chaopale%20Lamecarlatehttps://zestedesavoir.com/forums/sujet/4401/ca-ne-souvre-pas/?page=1#p87224<p>Si je puis donner mon avis : styler directement avec JS, c'est moche. Je te suggère grandement d'utiliser une classe (CSS) que tu ajoutes et enlèves au gré du spoiler.</p>ca ne s'ouvre pas :/, message #871132015-11-18T21:49:44+01:00SuperFola/@SuperFolahttps://zestedesavoir.com/forums/sujet/4401/ca-ne-souvre-pas/?page=1#p87113<p>hop
j'ai oublié de donner ma soluc'</p>
<p>html</p>
<table class="codehilitetable"><tr><td class="linenos"><div class="linenodiv"><pre>1
2
3
4
5</pre></div></td><td class="code"><div class="codehilite"><pre><span class="nt"><div><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">onclick=</span><span class="s">"s('madiv');"</span><span class="nt">></span>Click !<span class="nt"></a></span>
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"madiv"</span><span class="nt">></span>
contenu ici ...
<span class="nt"></div></span>
<span class="nt"></div></span>
</pre></div>
</td></tr></table>
<p>js</p>
<table class="codehilitetable"><tr><td class="linenos"><div class="linenodiv"><pre>1
2
3
4
5
6
7
8
9</pre></div></td><td class="code"><div class="codehilite"><pre><span class="kd">function</span> <span class="nx">s</span><span class="p">(</span><span class="nx">obj</span><span class="p">){</span>
<span class="k">if</span> <span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="nx">obj</span><span class="p">.</span><span class="nx">toString</span><span class="p">()).</span><span class="nx">style</span><span class="p">.</span><span class="nx">visibility</span> <span class="o">==</span> <span class="s1">'hidden'</span> <span class="o">||</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="nx">obj</span><span class="p">.</span><span class="nx">toString</span><span class="p">()).</span><span class="nx">style</span><span class="p">.</span><span class="nx">visibility</span> <span class="o">==</span> <span class="s1">''</span><span class="p">){</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="nx">obj</span><span class="p">.</span><span class="nx">toString</span><span class="p">()).</span><span class="nx">style</span><span class="p">.</span><span class="nx">visibility</span> <span class="o">=</span> <span class="s1">'visible'</span><span class="p">;</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="nx">obj</span><span class="p">.</span><span class="nx">toString</span><span class="p">()).</span><span class="nx">style</span><span class="p">.</span><span class="nx">position</span> <span class="o">=</span> <span class="s1">'relative'</span><span class="p">;</span>
<span class="p">}</span><span class="k">else</span><span class="p">{</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="nx">obj</span><span class="p">.</span><span class="nx">toString</span><span class="p">()).</span><span class="nx">style</span><span class="p">.</span><span class="nx">visibility</span> <span class="o">=</span> <span class="s1">'hidden'</span><span class="p">;</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="nx">obj</span><span class="p">.</span><span class="nx">toString</span><span class="p">()).</span><span class="nx">style</span><span class="p">.</span><span class="nx">position</span> <span class="o">=</span> <span class="s1">'absolute'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
</pre></div>
</td></tr></table>ca ne s'ouvre pas :/, message #794492015-10-27T20:41:52+01:00SuperFola/@SuperFolahttps://zestedesavoir.com/forums/sujet/4401/ca-ne-souvre-pas/?page=1#p79449<p>J'avais mis des tags mais ils ne sont plus là <img alt="O_o" src="/static/smileys/blink.gif"></p>ca ne s'ouvre pas :/, message #794472015-10-27T20:18:37+01:00Arius/@Ariushttps://zestedesavoir.com/forums/sujet/4401/ca-ne-souvre-pas/?page=1#p79447<p>Par contre, utilise des titres (pour le sujet, je précise) plus précis que "ca ne s'ouvre pas :/" la prochaine fois. <img alt=";)" src="/static/smileys/clin.png"> </p>ca ne s'ouvre pas :/, message #794302015-10-27T16:56:12+01:00luxera/@luxerahttps://zestedesavoir.com/forums/sujet/4401/ca-ne-souvre-pas/?page=1#p79430<p>Héhé, erreur toute simple toute bête de sémantique : tu changes la propriété visibility…mais tu fais tes tests sur display. Alors forcément, rien ne change.</p>ca ne s'ouvre pas :/, message #794262015-10-27T15:39:20+01:00felko/@felkohttps://zestedesavoir.com/forums/sujet/4401/ca-ne-souvre-pas/?page=1#p79426<p>Si tu veux faire ça proprement utilise plutôt les event listeners, sinon remplace <code>mes_projets</code> par <code>this</code> dans ton onclick:</p>
<table class="codehilitetable"><tr><td class="linenos"><div class="linenodiv"><pre> 1
2
3
4
5
6
7
8
9
10
11</pre></div></td><td class="code"><div class="codehilite"><pre><span class="nt"><div</span> <span class="na">class=</span><span class="s">"main"</span><span class="nt">></span>
<span class="nt"><h1></span>Articles<span class="nt"></h1></span>
<span class="nt"><ul></span>
<span class="nt"><li</span> <span class="na">onclick=</span><span class="s">"show_or_not(this);"</span><span class="nt">><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Mes projets<span class="nt"></a></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"spoiler"</span> <span class="na">id=</span><span class="s">"mes-projets"</span><span class="nt">></span>
Mon article caché ! Comme le steak :D
<span class="nt"></div></span>
<span class="nt"></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Moi :)<span class="nt"></a></li></span>
<span class="nt"></ul></span>
<span class="nt"></div></span>
</pre></div>
</td></tr></table>
<p>Le truc donné en paramètre à la fonction JS sera un élément déjà, pas un ID donc pas besoin de faire <code>document.getElementById</code></p>
<p>EDIT: j'ai fait des petites modifs de on code quand même parce qu'il était bien crado dans la hiérarchie des balises, penses à relire un cours HTML</p>ca ne s'ouvre pas :/, message #794212015-10-27T15:21:26+01:00SuperFola/@SuperFolahttps://zestedesavoir.com/forums/sujet/4401/ca-ne-souvre-pas/?page=1#p79421<p>Hello !</p>
<p>j'essaie de faire un spoiler pour un de mes sites, mais évidemment ca ne marche pas (aussi je suis nul en js <img alt=":-°" src="/static/smileys/siffle.png"> )</p>
<p>mon code (html):</p>
<table class="codehilitetable"><tr><td class="linenos"><div class="linenodiv"><pre> 1
2
3
4
5
6
7
8
9
10</pre></div></td><td class="code"><div class="codehilite"><pre><span class="nt"><div</span> <span class="na">class=</span><span class="s">"main"</span><span class="nt">></span>
<span class="nt"><h1></span>Articles<span class="nt"></h1></span>
<span class="nt"><ul></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">onclick=</span><span class="s">"show_or_not(mes-projets);"</span><span class="nt">></span>Mes projets<span class="nt"></a></li></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"spoiler"</span> <span class="na">id=</span><span class="s">"mes-projets"</span><span class="nt">></span>
Mon article caché ! Comme le steak :D
<span class="nt"></div></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">onclick=</span><span class="s">""</span><span class="nt">></span>Moi :)<span class="nt"></a></li></span>
<span class="nt"></ul></span>
<span class="nt"></div></span>
</pre></div>
</td></tr></table>
<p>et le code js :</p>
<table class="codehilitetable"><tr><td class="linenos"><div class="linenodiv"><pre>1
2
3
4
5
6
7</pre></div></td><td class="code"><div class="codehilite"><pre><span class="kd">function</span> <span class="nx">show_or_not</span><span class="p">(</span><span class="nx">id</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="nx">id</span><span class="p">).</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span> <span class="o">==</span> <span class="s1">'hidden'</span><span class="p">){</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="nx">id</span><span class="p">).</span><span class="nx">style</span><span class="p">.</span><span class="nx">visibility</span> <span class="o">=</span> <span class="s1">'visible'</span><span class="p">;</span>
<span class="p">}</span><span class="k">else</span><span class="p">{</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="nx">id</span><span class="p">).</span><span class="nx">style</span><span class="p">.</span><span class="nx">visibility</span> <span class="o">=</span> <span class="s1">'hidden'</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
</pre></div>
</td></tr></table>
<p>sauf que evidemement je dois pas savoir comment on passe correctement un argument, du coup ca peche à cet endroit (enfin je crois)</p>
<p>merci de votre aide <img alt=":D" src="/static/smileys/heureux.png"></p>