Pbl avec panneau latéral

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Pbl avec panneau latéral

Message par Sophi@ le Sam 20 Juil 2013 - 12:38

Bonjour,

J'ai épluché les sujets du forums, et trouvé ce petit tutoriel et code: http://fdf.aidactif.fr/tutopanneau/normal-droite.htm

Seul soucis, c'est que quand je le met dans ma pa, mon message de ma pa, j'ai bien le bouton ouvrir qui apparait mais c'est tout. Je click dessus rien ne se passe. Du coup je me demandais, si j'ai pas fait une erreur, s'il y a un codage à ajouter dans le CESS...
Je pensais que ça fonctionnerais comme la CB mais visiblement c'est pas le cas.

Lien vers mon forum: http://perditioncity.forumactif.org

Le code que j'ai mis sur ma pa:
Code:
<table style="position: fixed; bottom: 50px; right: 0px;background-color: #ffffff;z-index:10000;"><tr><td><div id="panneau" scrolling="no" style="width: 800px; height: 400px; display: none;" marginwidth="0" marginheight="0" frameborder="0">
<div class="subtitle">Les Postes à Pourvoir</div>
<font style="text-align: justify">Nous avons choisis de vous proposer des postes à pouvoir au lieu des habituels prédéfinis. Le concept est simple, un prénom, un nom, une fonction, et une petite histoire. C'est un rôle à incarner, où vous aurez une grande liberté dans la rédaction de son histoire, jusqu'au choix de l'avatar. Suivez les petits cailloux ci-dessous.
<b>RESISTANCE</b> <i>veux-tu incarner le chef?</i> <a href="http://perditioncity.forumactif.org/t195-la-resistance-la-cinquieme-colonne">Cliiiick.</a>
<b>MAFIA</b> <i>tu veux braconner?</i> <a href="http://perditioncity.forumactif.org/t90-les-maitres-de-l-ombre-le-syndicat-du-crime">Click!!</a>
<b>LES RICHOUS</b> <i>tu veux te la péter?</i> <a href="http://perditioncity.forumactif.org/t499-le-pouvoir-les-familles-regnantes-de-la-citadelle">Par ici!</a></font>
</div></td><td style="vertical-align: bottom;"><img src="http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png" onClick="document.getElementById(\'panneau\').style.display=(this.src==\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\')?\'block\':\'none\';this.src=(this.src==\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\')?\'http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png\':\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\';"/></td></tr></table>

Et mon CSS:
Code:
/* LATERAL */
.panneau{
background:#391717;
border: #391717;
box-shadow: #3a3a3a;
position: fixed;
width: 50px;
height: 100px;
top: 700px;
left: 0px;
padding: 3px;
}
.panneau:hover {
width: 200px;
height: 100px;
box-shadow: #3a3a3a;
}

J'ai testé sans ajout CSS, et même le code vierge sur la pa, sans rien ajouté, mais ça ne fonctionne toujours pas.

Merci d'avance.

Sophi@
*

Messages : 43
Inscrit(e) le : 21/06/2006

http://bloodandpleasure.forumactif.com
Sophi@ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Pbl avec panneau latéral

Message par [AoH]Insane le Sam 20 Juil 2013 - 17:08

Bon, alors premièrement, comme dans ton code tu as écrit ceci:

Code:
<div id="panneau" scrolling="no" style="width: 800px; height: 400px; display: none;" marginwidth="0" marginheight="0" frameborder="0">

Tu dois donc interpeller l'élément par son ID, et en CSS, l'interpellation .panneau fait référence à la classe d'un objet quelconque sur une page HTML. Pour interpeller l'ID en CSS, il faut utiliser le dièse (#) devant le nom mis dans le code. Sinon, tu peux toujours changer le mot id dans ton code pour class. Par contre, comme tu as utilisé un JavaScript avec un document.getElementById(), je te conseil de changer ton CSS, aussi, change l'ID dans ton code. Comme tu utilise la ChatBox, qui as probablement le même ID puisque le code de base proposé sur FA est ainsi fait, lors du clique sur cet onglet, la ChatBox va s'ouvrir simultanément. Par exemple, met panneaudeux, ce qui donnerais ces codes entier:

Code:
<table style="position: fixed; bottom: 50px; right: 0px;background-color: #ffffff;z-index:10000;"><tr><td><div id="panneaudeux" scrolling="no" style="width: 800px; height: 400px; display: none;" marginwidth="0" marginheight="0" frameborder="0">
<div class="subtitle">Les Postes à Pourvoir</div>
<font style="text-align: justify">Nous avons choisis de vous proposer des postes à pouvoir au lieu des habituels prédéfinis. Le concept est simple, un prénom, un nom, une fonction, et une petite histoire. C'est un rôle à incarner, où vous aurez une grande liberté dans la rédaction de son histoire, jusqu'au choix de l'avatar. Suivez les petits cailloux ci-dessous.
<b>RESISTANCE</b> <i>veux-tu incarner le chef?</i> <a href="http://perditioncity.forumactif.org/t195-la-resistance-la-cinquieme-colonne">Cliiiick.</a>
<b>MAFIA</b> <i>tu veux braconner?</i> <a href="http://perditioncity.forumactif.org/t90-les-maitres-de-l-ombre-le-syndicat-du-crime">Click!!</a>
<b>LES RICHOUS</b> <i>tu veux te la péter?</i> <a href="http://perditioncity.forumactif.org/t499-le-pouvoir-les-familles-regnantes-de-la-citadelle">Par ici!</a></font>
</div></td><td style="vertical-align: bottom;"><img src="http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png" onClick="document.getElementById(\'panneaudeux\').style.display=(this.src==\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\')?\'block\':\'none\';this.src=(this.src==\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\')?\'http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png\':\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\';"/></td></tr></table>

Et pour le CSS

Code:
/* LATERAL */
#panneaudeux{
background:#391717;
border: #391717;
box-shadow: #3a3a3a;
position: fixed;
width: 50px;
height: 100px;
top: 700px;
left: 0px;
padding: 3px;
}
#panneaudeux:hover {
width: 200px;
height: 100px;
box-shadow: #3a3a3a;
}

En espérant avoir aidé

[AoH]Insane

[AoH]Insane
***

Masculin
Messages : 118
Inscrit(e) le : 04/07/2013

http://aoh-rpg.forum-canada.com/
[AoH]Insane a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Pbl avec panneau latéral

Message par benneke le Sam 20 Juil 2013 - 19:43

Hello,

+1 pour [AoH]Insane

Mais je voudrais ajouter ceci :
il y a aussi un souci avec les antislash '\' dans le javascript.
Actuellement si on prend le résultat du code dans la console de firebug ou de safari il met caractère illégal dans le code.

Le code corrigé sans les antislash serait :
Code:
        <table style="position: fixed; bottom: 50px; right: 0px;background-color: #ffffff;z-index:10000;"><tr><td><div id="panneaudeux" scrolling="no" style="width: 800px; height: 400px; display: none;" marginwidth="0" marginheight="0" frameborder="0">
        <div class="subtitle">Les Postes à Pourvoir</div>
        <font style="text-align: justify">Nous avons choisis de vous proposer des postes à pouvoir au lieu des habituels prédéfinis. Le concept est simple, un prénom, un nom, une fonction, et une petite histoire. C'est un rôle à incarner, où vous aurez une grande liberté dans la rédaction de son histoire, jusqu'au choix de l'avatar. Suivez les petits cailloux ci-dessous.
        <b>RESISTANCE</b> <i>veux-tu incarner le chef?</i> <a href="http://perditioncity.forumactif.org/t195-la-resistance-la-cinquieme-colonne">Cliiiick.</a>
        <b>MAFIA</b> <i>tu veux braconner?</i> <a href="http://perditioncity.forumactif.org/t90-les-maitres-de-l-ombre-le-syndicat-du-crime">Click!!</a>
        <b>LES RICHOUS</b> <i>tu veux te la péter?</i> <a href="http://perditioncity.forumactif.org/t499-le-pouvoir-les-familles-regnantes-de-la-citadelle">Par ici!</a></font>
        </div></td><td style="vertical-align: bottom;"><img src="http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png" onClick="document.getElementById('panneaudeux').style.display=(this.src=='http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png')?'block':'none';this.src=(this.src=='http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png')?'http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png':'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png';"/></td></tr></table>

les antislash servent juste pour dire au navigateur de ne pas interpréter le caractère après l'antislash. Dans le cas présent, pas besoin d'échapper les simples guillemets.

benneke
***

Messages : 150
Inscrit(e) le : 07/04/2012

http://www.guilde-aof.com
benneke a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Pbl avec panneau latéral

Message par Sophi@ le Dim 21 Juil 2013 - 11:52

Merci beaucoup, pour vos réponses aussi rapide, et votre aide.

Alors, [AoH]Insane j'ai corrigé le codage. Mais ça n'a rien changé. Ensuite j'ai suivis benneke et modifié le codage, et à présent ça varie bien entre ouvrir et fermer selon le clik mais le texte n'apparaissait pas. Ensuite j'ai réfléchi, puis modifier le CSS qui donnait des info contradictoire, width et height et une fois ces infos enlevée boom mon texte est apparu, ensuite j'ai pu corriger les petites erreurs.

Du coup, un grand merci.

Juste une petite question subsidiaire.
Si on voulait ajouter un autre petit panneau latéral pour par exemple les top-site, on fait comment pour régler la hauteur, afin d'éviter la superposition? Et sinon, serait-il possible d'intégrer un code d'onglet au sein même du panneau latéral? Juste pour voir les différentes options.

Sophi@
*

Messages : 43
Inscrit(e) le : 21/06/2006

http://bloodandpleasure.forumactif.com
Sophi@ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Pbl avec panneau latéral

Message par benneke le Dim 21 Juil 2013 - 13:30

Si vous souhaitez ajouter un autre panneau, il faut mettre le même code en modifiant l'id en panneautrois par exemple et régler les placements en css, mais la il faut chercher ;-)
Pour ajouter un système d'onglets a l'intérieur ce doit être possible, j'y réfléchis cet aprem et essaye de vous pondre qqch ce soir!

Bonne journée

benneke
***

Messages : 150
Inscrit(e) le : 07/04/2012

http://www.guilde-aof.com
benneke a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Pbl avec panneau latéral

Message par Sophi@ le Dim 21 Juil 2013 - 20:06

Oky merci beaucoup!

Sophi@
*

Messages : 43
Inscrit(e) le : 21/06/2006

http://bloodandpleasure.forumactif.com
Sophi@ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Pbl avec panneau latéral

Message par Automne le Mer 24 Juil 2013 - 13:08

Bonjour,

Afin de faciliter la gestion des problèmes, si votre problème est résolu, pensez à :
  • éditer votre premier message,
  • cocher l'icône résolu
  • Et enregistrer en cliquant sur


Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton

A bientôt sur ForumActif Smile

Automne
+ Hyperactif +

Messages : 8423
Inscrit(e) le : 22/03/2010

http://gilles570.forumactif.info/
Automne a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum