Partage

Utilisez le zcode hors du sdz

Sujet résolu

10 décembre 2005 à 20:25:47

Bonjour,

J'ai été très interessé par ceci :
Secret (cliquez pour afficher)

salut jeune zéro

et j'aimerai utiliser quelquechose de similaire sur l'une des pages de mon site mais je ne sais pas comment exporter ce code ni comment faire quelquechose qui y ressemble.

Merci d'avance

sloshy

10 décembre 2005 à 20:30:01

salut,

regarde dans le code source de la page:

<span class="spoiler">Secret(cliquez pour afficher)</span>
<div class="spoiler2" onclick="switch_spoiler(this)">
<div style="visibility: hidden;" class="spoiler3">salut jeune zéro</div>
</div>

Je supose que ce n'est qu'en partie, il doit y avoir du js et du css aussi je supose

JulFisher

10 décembre 2005 à 20:33:56

Le Javascript : http://siteduzero.com/Templates/js/spoiler.js

Et le CSS :

.spoiler2
{
cursor: pointer;
}

.spoiler3 /* Spoiler par d�faut (doit �tre cach�) */
{
visibility: hidden;
}

Leur code est bien libre au moins ? :euh:

sloshy

10 décembre 2005 à 21:03:09

Heuuuu

j'espere que oui, et connaissant la philosophie du site, je le supoe ...

Nodh1

10 décembre 2005 à 21:03:28

Merci boys.

Pour la liberté du code, je vais me renseigner auprès d'un admin mais je ne pense pas qu'il n'y ait de probleme.

Anonyme

11 décembre 2005 à 10:50:30

Le code JS tu le place où tu veux, ça change rien, il est pas affiché, met le en bas de page après le </html> si il t'encombre

Ensuite, si tu veuxc en mettre plusieurs, il suffit de rajouter des nombre à la suites des qr_open et closed :

<a href="javascript:expMenu('qr_open','qr_closed');">Afficher</a>

<div align='left' id='qr_open' style="display:none; position:relative;">

</div>

<a href="javascript:expMenu('qr_open2','qr_closed2');">Afficher</a>

<div align='left' id='qr_open2' style="display:none; position:relative;">

</div>

<a href="javascript:expMenu('qr_open3','qr_closed3');">Afficher</a>

<div align='left' id='qr_open3' style="display:none; position:relative;">

</div>

Et si avec tu l'associe à un membre sur un forum (comme ici), tu met :

<?php echo $id_membre; ?>

Après chaque qr_open ou qr_closed

<a href="javascript:expMenu('qr_open<?php echo $id_membre; ?>','qr_closed<?php echo $id_membre; ?>');">Afficher</a>


<div align='left' id='qr_open<?php echo $id_membre; ?>' style="display:none; position:relative;">

</div>

Savageman

11 décembre 2005 à 11:00:57

Bah si tu mets que le code vient du site du zéro en commenaires, yaura pas de problèmes

MailClark: your team’s bot for external communications : send and receive emails, Twitter & Facebook messages without leaving Slack ❤️

Anonyme

11 décembre 2005 à 13:12:43

Euh, mon code ne viens pas de SDZ, mais si tu demande à un admin le code du SDZ bah oui, il faudra que tu mette un pti merci kkpart

Hurnac

11 décembre 2005 à 20:07:47

Je suis interessé par ce petit code, mais je connais rien en JS. Comme on fait pour introduire une balise JS dans une page PHP?

Anonyme

12 décembre 2005 à 16:45:20

ah oui, j'ai oublié de précisé

dsl !
Il suffit de mettre :

-->
</script>

Voilou

Nodh1

16 décembre 2005 à 17:47:57

Bonsoir,

J'ai fini de restranscrire et d'aranger ma page en question. Je commence donc à travailler au cache des réponses gâce à la fonction secret dont j'ai eu l'aimable autorisation d'utiliser.

Seulement, je rencontre un double problème. Je souhaite que l'on clique dans une zone vide sans marquer "afficher ou autre chose d'autre" et que la réponse s'affiche dans cette même zone et non en dessous.

Comment puis-je faire ? Dois-je me tourner vers un autre script ?

Merci

Dutiona

16 décembre 2005 à 18:44:30

Suffi d'aranger la fonction avec des visibly et non des display, et de faire un code html adéquoit.
Je rajoute une fonction, on sais jamais

// <![CDATA[
function show_hide(id){
with(document.getElementById(id).style){
if(visibility == 'hidden')
visibility = 'visible';
else
visibility = 'hidden';
}
return false;
}

function init(){
var divs = document.getElementsByTagName('div');

for (var i=0 ; i < divs.length ; i++){
//On vérifie avec les class
if(divs[i].getAttribute("class") == "secret_div"){
show_hide (divs[i].id);
divs[i].onclick = show_hide (divs[i].id);
}
}
}
window.onload = init();
// ]]>

Et le code html :

<div id="div_1" class="secret_div">Texte à cacher

</div>
<div id="div_2" class="secret_div">Texte à cacher

</div>
<div id="div_3" class="secret_div">Texte à cacher

</div>
<div id="div_4" class="secret_div">Texte à cacher

</div>

Tu peux changer les ids mais pas les class, à moin que tu ne change le javascript... (getAttribute("class") == "secret_div" ==> change "secret_div par ce que tu veux mais change tes divs en conséquence

)

Voilà, il n'y à rien à ajouter

Bisous, Nyu

Nodh1

16 décembre 2005 à 19:52:05

Bonsoir,

Merci pour le code mais il ne fonctionne pas hélas. Peux tu m'indiquer mon erreur ? :honte:

Je ne connais pas grand chose en js alors... La page incriminée se trouve à cette adresse : Cliques ici (seul la première réponse est en test)

Merci bien
Cordialement

Anonyme

17 décembre 2005 à 13:14:40

Le code JS tu le place où tu veux, ça change rien, il est pas affiché, met le en bas de page après le </html> si il t'encombre

Il suffit de mettre le truc à caché dans le lien (j'ai pas testé, tu me dira si ça fonctionne !)

Pour ta balise java :

-->
</script>

Dutiona

17 décembre 2005 à 14:19:04

Mon js, tu le emt dans le header, sinon il marche pas...

En l'amlériorant un peu

Tu mets ce code dans le header entre les balises :

He donc, pour vérifier si ça marche, c'est très simple, tu passe la souris dessus, si elle devient un pointeur, ça marche, sinon, c'est que la fonction init n'a pas marché...
Tu peux aussi avoir IE et là, la fonction getAttribute ne marche pas, il faut utiliser classname.

J'edit quand j'ai fini la fonction multi-navigateur

Bisous, Nyu

Nodh1

17 décembre 2005 à 15:23:35

Bonjour,

Merci mais le probleme Dutiona, c'est que je n'ai pas de <head> étant dans des pages incluses </head>. Je vais essayer diverses trucs pour m'arranger.

Ca serait sympa aussi que ce code marche avec IE qui représente 80% de mon traffic...

Merci encore

Anonyme

17 décembre 2005 à 16:51:26

Ce code fonctionne avec IE tkt

mais pourtant moi le code je peux le placer dans des pages où il n'y a pas de header, je le place en haut de page, et ça fonctionne très bien (contrairement à ce que a dit Dutiona >_<

Nodh1

17 décembre 2005 à 17:31:51

J'ai toujours placé mon js dans le header. Ton code ne marche hélas pas... Je vais placer un "link href" vers le fichier javascript externe pour voir si ca marche

Edit : Ne marche pas plus...

Peut-on faire appel a un mouseover ? Est-il encore possible de rester sur la même ligne car les div contraignent de créer un bloc ?

Merci

Anonyme

17 décembre 2005 à 17:43:53

Mon code dans la page 1 fonctionne si il y a un bouton à part, donc pour ceux que ça intéresse et bien allez-si, mais pour ton problème actuelle je n'en ai (hélas) aucune idée !

Dutiona

17 décembre 2005 à 21:11:57

Oui, son code fonctionne, le mien est jsute plus "propre" (niveau dom) mais n'est pas très compatible

Bisous, Nyu

MAX-k

19 décembre 2005 à 2:50:10

Yukimura...
Ne serait que pour être valide XHTML ou même HTML, le code JS, TOUJOURS dans le head!
Et c'est javascript, et non java... Rien à voir...

Nodh1

19 décembre 2005 à 13:34:11

On va revenir à quelquechose de plus simple.

Je repars sur le code du sdz et je voudrais que la réponse "briggadyé gEnairale" s'affiche sur la même ligne que le R:

<p><i>Q :</i> Qui était le commandant en second de la 29ème division DIUS le 6 juin 1944 ?<br/>
<a href="javascript:expMenu('qr_open','qr_closed');"><i>R:</i></a>
<div id='qr_open' style="display:none; position:relative;">
Brigadier Général Norman Cota
</div></p>

Cela implique donc de supprimer le "div" mais ca fait logiquement foirer le code car le "id" est basé dessus.

Comment contourner la difficulté ?

Havrest

19 décembre 2005 à 13:51:38

MAX-k quitte à être désagréable, autant ne pas dire d'âneries...

Le javascript peut très bien être utilisé au milieu d'un body, d'un div ou même d'un form en étant tout à fait valide :

Citation : w3c.org

When this module is used, the script and noscript elements are added to the Block and Inline content sets of the Text Module. In addition, the script element is added to the content model of the head element defined in the Structure Module.

Ce qui veut dire en gros que les balises script et noscript sont considérées comme block et inline et peuvent donc être insérées dans n'importe quel conteneur acceptant les blocks.
La seconde phrase explique que la balise script peut aussi être utilisée dans le head. Mais ce n'est en aucun cas une obligation...

Je n'ai rien contre toi mais ce que je déteste ce sont les personnes qui se permettent d'intervenir de façon peu agréable en racontant n'importe quoi...

Après si j'ai mal interprété tes propos je m'en excuse mais je ne pense pas.

A+

S@!RuS

19 décembre 2005 à 14:09:03

J'arrive pas à trouver quelle est la fonction javascript qui bloque les scripts dans la partie
Aperçu temps réel quelqu'un la connaitrait ?

Nodh1

19 décembre 2005 à 17:44:17

Bonsoir,

Problème résolu grâce à une aide extérieur (tomtombar pour les anciens), il suffisait d'utiliser un span.

S@!RuS, quel rapport avec mon sujet ?

Merci à tous

S@!RuS

19 décembre 2005 à 21:20:59

Aucun désolé, j'ai pas fait attention, je voulais pas crée un sujet juste pour cette petite question.

acid_burn

20 décembre 2005 à 13:31:50

bonjour ,

Nodh1 pourrait tu mettre la solution en entier stp ? cela m'aiderait beaucoup !! merci d'avance

acid

Nodh1

20 décembre 2005 à 14:10:42

Pas de problème Acid. Voilà ce que ca donne au final :

A placer entre <head> </head>

A placer entre <body> et </body>

<a href="javascript:expMenu('qr_open','qr_closed'); "style=" text-decoration:none ;"><i>R : </i></a><span id='qr_open' style="display:none; position:relative; margin:4px ;">Texte à cacher

</span>

L'utilisation du <span> me permet d'avoir qqch d'inline au contraire du <div> qui est de type bloc. Les deux fonctionnent très bien, à toi de choisir.

S'il y a plusieurs textes cachés, il faut l'indiquer dans le qr_open et les faire correspondre :

<a href="javascript:expMenu('qr_open2','qr_closed');"style=" text-decoration:none ;"><i>R : </i></a><span id='qr_open2' style="display:none; position:relative; margin:4px ;">Texte à cacher</span>

Le text-decoration et le margin sont un peu de css que j'ai rajouté pour l'esthétique et ne sont pas indispensable au code. Pour voir le resultat : testez sur cette page

PS/ Page entièrement opérationnelle dans la journée.

Merci à tous

acid_burn

21 décembre 2005 à 11:53:01

merci beaucoup !!