Problème panneau latéral [résolu]

[Akesato]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : aujourd'hui
Lien du forum : http://rpg-saiyuki.actifforum.com/

Description du problème

Bonjour,

J'ai installer un panneau latéral sur mon forum, mais une fois ouvert, impossible de le fermer. J'ai dû merdé quelque part, sauf que comme j'y connais rien, bah je sais pas d'où vient le problème … Voyez vous-même :
http://rpg-saiyuki.actifforum.com/

Voici le code :

Code:

jQuery(document).ready(function () {jQuery('body').append('<table style="position: fixed; top: 300px; left: 0px;background-color: #cccccc;z-index:10000;"><tr><td><div id="panneau" scrolling="no" style="width: 120px; height: 210px; display: none;" marginwidth="0" marginheight="0" frameborder="0">

<img src="http://i18.servimg.com/u/f18/16/36/34/89/regle10.png"/>
<img src="http://i18.servimg.com/u/f18/16/36/34/89/histoi10.png"/>
<img src="http://i18.servimg.com/u/f18/16/36/34/89/postes10.png"/>
<img src="http://i18.servimg.com/u/f18/16/36/34/89/predef10.png"/>
<img src="http://i18.servimg.com/u/f18/16/36/34/89/les_ra10.png"/>
<img src="http://i18.servimg.com/u/f18/16/36/34/89/avatar11.png"/>
<img src="http://i18.servimg.com/u/f18/16/36/34/89/questi10.png"/>
<img src="http://i18.servimg.com/u/f18/16/36/34/89/parten10.png"/>

 </div></td><td style="vertical-align: bottom;"><img src="http://i18.servimg.com/u/f18/16/36/34/89/images11.png" onClick="document.getElementById(\'panneau\').style.display=(this.src==\'http://i18.servimg.com/u/f18/16/36/34/89/images11.png\')?\'block\':\'none\';this.src=(this.src==\'http://i18.servimg.com/u/f18/16/36/34/89/images11.png\')?\'http://i18.servimg.com/u/f18/16/36/34/89/images11.png\':\'http://i18.servimg.com/u/f18/16/36/34/89/images11.png\';"/></td></tr></table>');
7.});

Par ailleurs j'aurai aussi voulu installer un fond derrière les liens et retirer la couleur derrière l'icon avec « liens » marqué dessus, pour que ça fasse plus jolie. Est-ce possible ?
On peut faire en sorte que ça coulisse une fois qu'on clique sur « liens » ? J'avais vu ça sur un autre forum dont j'ai oublier le liens, il faudrait que je recherche.
Et dernière question car je suis chiante 8D : on peut faire en sorte que l'image liens, ne change pas de place lorsqu'on clique dessus ? (là elle se retrouve en bas quand le panneau s'ouvre)

Merci d'avance.
♥

[dm61]

Bonjour,
je pense que c'est parce que tu as mis la même image pour ouvrir et fermer, je viens de tester en changeant ton image fermer et ça marche donc si tu veux utiliser la même il faut la renommer

essaie ce code pour voir (je te l'ai remis avec un autre n°image10)

pour les autres questions je ne sais pas, suis débutante aussi

Code:

jQuery(document).ready(function () {jQuery('body').append('<table style="position: fixed; top: 300px; left: 0px;background-color: #cccccc;z-index:10000;"><tr><td><div id="panneau" scrolling="no" style="width: 120px; height: 210px; display: none;" marginwidth="0" marginheight="0" frameborder="0">
<img src="http://i18.servimg.com/u/f18/16/36/34/89/regle10.png"/>
<img src="http://i18.servimg.com/u/f18/16/36/34/89/histoi10.png"/>
<img src="http://i18.servimg.com/u/f18/16/36/34/89/postes10.png"/>
<img src="http://i18.servimg.com/u/f18/16/36/34/89/predef10.png"/>
<img src="http://i18.servimg.com/u/f18/16/36/34/89/les_ra10.png"/>
<img src="http://i18.servimg.com/u/f18/16/36/34/89/avatar11.png"/>
<img src="http://i18.servimg.com/u/f18/16/36/34/89/questi10.png"/>
<img src="http://i18.servimg.com/u/f18/16/36/34/89/parten10.png"/>
 </div></td><td style="vertical-align: bottom;"><img src="http://i18.servimg.com/u/f18/16/36/34/89/images11.png" onClick="document.getElementById(\'panneau\').style.display=(this.src==\'http://i18.servimg.com/u/f18/16/36/34/89/images11.png\')?\'block\':\'none\';this.src=(this.src==\'http://i18.servimg.com/u/f18/16/36/34/89/images11.png\')?\'http://i18.servimg.com/u/f18/17/13/33/68/images10.png\':\'http://i18.servimg.com/u/f18/16/36/34/89/images11.png\';"/></td></tr></table>');
7.});

bonne soirée

[Akesato]

Ah super ça marche parfaitement !
Merci beaucoup ♥
J'avais pas pensé que ça pourrait être ça le problème >.<"
Du coup le problème est résolu, j'attends juste voir si quelqu'un peu m'aider pour mes autres questions concernant toujours ce panneau

[Invité]

bonjour Akesato

dans un premier temps j'ai modifier la position du bouton lien
(il reste sur la même ligne quand il est ouvert )
il fallait remplacé

Code:

</td><td style="vertical-align: bottom;">

par

Code:

</td><td style="vertical-align: top;">

j'ai aussi enlever le fond gris , dite moi si il faut mettre une image ou une autre couleur

le code modifier pour l'instant

Code:

jQuery(document).ready(function () {jQuery('body').append('<table style="position: fixed; top: 300px; left: 0px;background-color: #;z-index:10000;"><tr><td><div id="panneau" scrolling="no" style="width: 120px; height: 210px; display: none;" marginwidth="0" marginheight="0" frameborder="0">
<img src="http://i18.servimg.com/u/f18/16/36/34/89/regle10.png"/>
<img src="http://i18.servimg.com/u/f18/16/36/34/89/histoi10.png"/>
<img src="http://i18.servimg.com/u/f18/16/36/34/89/postes10.png"/>
<img src="http://i18.servimg.com/u/f18/16/36/34/89/predef10.png"/>
<img src="http://i18.servimg.com/u/f18/16/36/34/89/les_ra10.png"/>
<img src="http://i18.servimg.com/u/f18/16/36/34/89/avatar11.png"/>
<img src="http://i18.servimg.com/u/f18/16/36/34/89/questi10.png"/>
<img src="http://i18.servimg.com/u/f18/16/36/34/89/parten10.png"/>
 </div></td><td style="vertical-align: top;"><img src="http://i18.servimg.com/u/f18/16/36/34/89/images11.png" onClick="document.getElementById(\'panneau\').style.display=(this.src==\'http://i18.servimg.com/u/f18/16/36/34/89/images11.png\')?\'block\':\'none\';this.src=(this.src==\'http://i18.servimg.com/u/f18/16/36/34/89/images11.png\')?\'http://i18.servimg.com/u/f18/17/13/33/68/images10.png\':\'http://i18.servimg.com/u/f18/16/36/34/89/images11.png\';"/></td></tr></table>');
7.});

n'oublier pas d'

ps:je vois que vous avez une id sur le panneau avez vous un css qui va avec ??
bonne soirée ..

[Akesato]

Bonjour et merci, j'ai essayé et ça rend (pour moi) bien mieux quand ça reste sur le haut, en plus ça me sera plus facile pour l'essaie design que je veux faire, avec une découpe d'image, mais il y a un décalage entre le bord du forum et le logo, il faut que je vois ce que ça donne avec le fond que je voulais mettre en attendant :
https://i.servimg.com/u/f18/16/36/34/89/fond10.jpg

Non je n'ai pas de CSS qui va avec, il en faut un ?
Bonne soirée

[Invité]

pour coller le bouton au bord gauche

il suffit juste de remplacé

Code:

left: 0px

par

Code:

left: -5px

le code modifier avec le bouton collé au bord du forum

Code:

jQuery(document).ready(function () {jQuery('body').append('<table style="position: fixed; top: 300px; left: -5px;background-color: #;z-index:10000;"><tr><td><div id="panneau" scrolling="no" style="width: 120px; height: 210px; display: none;" marginwidth="0" marginheight="0" frameborder="0">
<img src="http://i18.servimg.com/u/f18/16/36/34/89/regle10.png"/>
<img src="http://i18.servimg.com/u/f18/16/36/34/89/histoi10.png"/>
<img src="http://i18.servimg.com/u/f18/16/36/34/89/postes10.png"/>
<img src="http://i18.servimg.com/u/f18/16/36/34/89/predef10.png"/>
<img src="http://i18.servimg.com/u/f18/16/36/34/89/les_ra10.png"/>
<img src="http://i18.servimg.com/u/f18/16/36/34/89/avatar11.png"/>
<img src="http://i18.servimg.com/u/f18/16/36/34/89/questi10.png"/>
<img src="http://i18.servimg.com/u/f18/16/36/34/89/parten10.png"/>
 </div></td><td style="vertical-align: top;"><img src="http://i18.servimg.com/u/f18/16/36/34/89/images11.png" onClick="document.getElementById(\'panneau\').style.display=(this.src==\'http://i18.servimg.com/u/f18/16/36/34/89/images11.png\')?\'block\':\'none\';this.src=(this.src==\'http://i18.servimg.com/u/f18/16/36/34/89/images11.png\')?\'http://i18.servimg.com/u/f18/17/13/33/68/images10.png\':\'http://i18.servimg.com/u/f18/16/36/34/89/images11.png\';"/></td></tr></table>');
7.});

le css peut servir , avec l'id panneau insérer dans la div ,
exemple pour mettre l'image de fond que vous avez donné
dans votre css ajouter ce code

Code:

#panneau{background-image:url('http://i18.servimg.com/u/f18/16/36/34/89/fond10.jpg');}

bonne soirée ...

[Akesato]

Ah merci beaucoup ♥
Il ne me restera plus qu'à mettre le fond derrières les images
https://i.servimg.com/u/f18/16/36/34/89/image_10.png
(du coup je vais devoir changer l'image de lien pour que ça soit raccord, mais j'ai compris quelle image mettre maintenant pour ouvrir et fermer ^^)
et trouver comment faire glisser

Bonne soirée

[Chacha]

..	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 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

[Akesato]

Bonjour,

Comme j'ai encore deux questions sur le sujet je ne savais pas si je devais refaire un sujet ou continuer sur celui-là.

[Chacha]

Bonjour,

Comme j'ai encore deux questions sur le sujet je ne savais pas si je devais refaire un sujet ou continuer sur celui-là.

Bonjour,

S'il s'agit d'un problème lié à la question initiale du "panneau latéral", vous pouvez bien sûr continuer dans ce sujet.

Dans le cas contraire, merci d'ouvrir un nouveau sujet svp.


Cordialement.

[Akesato]

Ah c'est toujours pour le panneau latéral

Je voudrais savoir s'il était possible de retirer l'espace entre l'image de fond des liens (pas terminés) et l'image "ouvrir/fermer" (où il y a marqué lien)

Et si on en ouvrant on pouvait plutôt le faire "glisser".

[Invité]

bonjour , ont peut reduire l'espace au minimum

remplacé votre script par celui ci (j'ai ajouté une class a la table )>>

>>c'est cette ligne la >>

Code:

<table class="bouton_table_lien"  style="position: fixed; top: 200px; left: -5px;background-color: #;z-index:10000;">

Code:

jQuery(document).ready(function () {jQuery('body').append('<table class="bouton_table_lien"  style="position: fixed; top: 200px; left: -5px;background-color: #;z-index:10000;"><tr><td><div id="panneau" scrolling="no" style="width: 120px; height: 210px; display: none;" marginwidth="0" marginheight="0" frameborder="0">
<img src="http://i18.servimg.com/u/f18/16/36/34/89/regle10.png"/>
<img src="http://i18.servimg.com/u/f18/16/36/34/89/histoi10.png"/>
<img src="http://i18.servimg.com/u/f18/16/36/34/89/postes10.png"/>
<img src="http://i18.servimg.com/u/f18/16/36/34/89/predef10.png"/>
<img src="http://i18.servimg.com/u/f18/16/36/34/89/les_ra10.png"/>
<img src="http://i18.servimg.com/u/f18/16/36/34/89/avatar11.png"/>
<img src="http://i18.servimg.com/u/f18/16/36/34/89/questi10.png"/>
<img src="http://i18.servimg.com/u/f18/16/36/34/89/parten10.png"/>
 </div></td><td style="vertical-align: top;"><img src="http://i18.servimg.com/u/f18/16/36/34/89/images11.png" onClick="document.getElementById(\'panneau\').style.display=(this.src==\'http://i18.servimg.com/u/f18/16/36/34/89/images11.png\')?\'block\':\'none\';this.src=(this.src==\'http://i18.servimg.com/u/f18/16/36/34/89/images11.png\')?\'http://i18.servimg.com/u/f18/17/13/33/68/images10.png\':\'http://i18.servimg.com/u/f18/16/36/34/89/images11.png\';"/></td></tr></table>');
7.});

et ajouté ce code css pour l'éspace>>

Code:

.bouton_table_lien{border-spacing:0px !important;}

pour le faire glissé je revient vers vous ,

cdl,bonne aprés midi..
=================================
=================================
edit:22h39 >> pour le slide il vous changé le script et le css ,que que je vous ai donné précédemment

le script >>

Code:

$(function(){
 
  $("body").append('<div id="fp848" class="fpanel"><table class="fptable"><tr><td class="fpcontent"><table id="panneau"><tr><td>
<img src="http://i18.servimg.com/u/f18/16/36/34/89/regle10.png"/>
<img src="http://i18.servimg.com/u/f18/16/36/34/89/histoi10.png"/>
<img src="http://i18.servimg.com/u/f18/16/36/34/89/postes10.png"/>
<img src="http://i18.servimg.com/u/f18/16/36/34/89/predef10.png"/>
<img src="http://i18.servimg.com/u/f18/16/36/34/89/les_ra10.png"/>
<img src="http://i18.servimg.com/u/f18/16/36/34/89/avatar11.png"/>
<img src="http://i18.servimg.com/u/f18/16/36/34/89/questi10.png"/>
<img src="http://i18.servimg.com/u/f18/16/36/34/89/parten10.png"/>
 </div></td><td class="fpbuttons"><span class="fpopen"><img
src="http://i18.servimg.com/u/f18/16/36/34/89/images11.png" /></span><span class="fpclose"><img src="http://i18.servimg.com/u/f18/17/13/33/68/images10.png" /></span></td></tr><table></div>');
  $("#fp848 .fpbuttons > span").click(function(){
      $(this).add($(this).siblings()).toggle();
      $("#fp848").animate({"left":$(this).is(".fpclose")?-123:0},700);
  });
 
});

le css qui va avec>>

Code:

/**====img du panneau gauche lien ====**/
#panneau{background-image:url('http://i18.servimg.com/u/f18/16/36/34/89/fond10.jpg');
  background-repeat:no-repeat;
}
/**====code tableau lien slide ====**/
.fpanel { position: fixed; }
.fpclose,.fpopen { cursor: pointer;margin-left:3px;}
.fpclose { display: none;
}
 #fp848 { bottom: 300px; left: -123px; }
#fp848 .fpcontent { width: 123px;
}

je pense ne rien avoir oublier !

un visuel peut etre du slide >> http://forum-test-r-max.forumactif.org/

a bientôt ,

[Akesato]

Han mille merci ♥
ça rend totalement comme je le voulais !!!
J'ai plus qu'à déplacer le bouton lien en haut et refaire les images ♥
Dommage quand même que le bouton et l'image de fond ne peuvent pas se coller.
J'avais vu ça y'a longtemps sur un forum où je suis amoureuse de tout le codage : http://riseofanewera.forumactif.org/ on dirait qu'ils sont collés, mais c'est peut être moi ><"
En tout cas merci beaucoup =DDDD

[Invité]

avec la solution du codage en slide (glisse), ont peut réglé le bouton

j'ai appliqué>>

Code:

.fpclose,.fpopen { cursor: pointer;margin-left:3px;}

modifier le margin-left:3px

[Akesato]

Oh oui c'est parfait merci ♥
ça donne vraiment comme j'en avais envie je suis contente =D !!!

[Invité]

une petite chose aussi ,pour augmenter ou diminué la rapidité du glissement ,

dans le script >>

Code:

$("#fp848").animate({"left":$(this).is(".fpclose")?-123:0},700);

modifier le 700 .... 800 plus lent ,600 plus rapide ,plus vous augmenté plus il va moins vite ,(c'est pas très français ,ce que je vient de dire ).....

[Akesato]

Si si c'est français j'ai compris merci, j'avoue que je savais pas où changer la vitesse ><"
Merci