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

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

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

Message par Akesato le Dim 16 Aoû 2015 - 15:11

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.


Dernière édition par Akesato le Sam 22 Aoû 2015 - 23:33, édité 1 fois

Akesato
Nouveau membre

Messages : 24
Inscrit(e) le : 03/01/2014

http://strong-world.forumactif.com/
Akesato a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème panneau latéral [résolu]

Message par /dm61 le Dim 16 Aoû 2015 - 17:29

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

/dm61
**

Messages : 59
Inscrit(e) le : 16/02/2015

http://agri-occitanie.forumactif.org/
/dm61 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème panneau latéral [résolu]

Message par Akesato le Dim 16 Aoû 2015 - 19:21

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 Smile

Akesato
Nouveau membre

Messages : 24
Inscrit(e) le : 03/01/2014

http://strong-world.forumactif.com/
Akesato a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème panneau latéral [résolu]

Message par R-max le Dim 16 Aoû 2015 - 23:00

bonjour Akesato

dans un premier temps j'ai modifier la position du bouton lien
Right (il reste sur la même ligne quand il est ouvert )
il fallait remplacé Right
Code:
</td><td style="vertical-align: bottom;">
par Right
Code:
</td><td style="vertical-align: top;">

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

le code modifier pour l'instant Right
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' :enreg:

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

R-max
# Tropactif #

Masculin
Messages : 1450
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème panneau latéral [résolu]

Message par Akesato le Dim 16 Aoû 2015 - 23:11

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 :
http://i18.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 Smile

Akesato
Nouveau membre

Messages : 24
Inscrit(e) le : 03/01/2014

http://strong-world.forumactif.com/
Akesato a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème panneau latéral [résolu]

Message par R-max le Dim 16 Aoû 2015 - 23:38

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


Dernière édition par R-max le Dim 16 Aoû 2015 - 23:43, édité 1 fois (Raison : rajout du code img)

R-max
# Tropactif #

Masculin
Messages : 1450
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème panneau latéral [résolu]

Message par Akesato le Lun 17 Aoû 2015 - 0:29

Ah merci beaucoup ♥
Il ne me restera plus qu'à mettre le fond derrières les images
http://i18.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 Smile

Bonne soirée Smile

Akesato
Nouveau membre

Messages : 24
Inscrit(e) le : 03/01/2014

http://strong-world.forumactif.com/
Akesato a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème panneau latéral [résolu]

Message par Chacha le Sam 22 Aoû 2015 - 11:14

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


Règles Générales du Forum - Le Staff de ForumActif
Questions & Réponses Fréquentes - Trucs & Astuces
Outils Fondateurs - Perte de Mot de Passe

Chacha
Modéractif
Modéractif

Masculin
Messages : 49798
Inscrit(e) le : 21/08/2010

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

Résolu Re: Problème panneau latéral [résolu]

Message par Akesato le Sam 22 Aoû 2015 - 11:22

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

Akesato
Nouveau membre

Messages : 24
Inscrit(e) le : 03/01/2014

http://strong-world.forumactif.com/
Akesato a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème panneau latéral [résolu]

Message par Chacha le Sam 22 Aoû 2015 - 11:25

@Akesato a écrit: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. Smile

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


Cordialement.


Règles Générales du Forum - Le Staff de ForumActif
Questions & Réponses Fréquentes - Trucs & Astuces
Outils Fondateurs - Perte de Mot de Passe

Chacha
Modéractif
Modéractif

Masculin
Messages : 49798
Inscrit(e) le : 21/08/2010

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

Résolu Re: Problème panneau latéral [résolu]

Message par Akesato le Sam 22 Aoû 2015 - 11:36

Ah c'est toujours pour le panneau latéral Smile

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

Akesato
Nouveau membre

Messages : 24
Inscrit(e) le : 03/01/2014

http://strong-world.forumactif.com/
Akesato a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème panneau latéral [résolu]

Message par R-max le Sam 22 Aoû 2015 - 19:36

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 ,


Dernière édition par R-max le Sam 22 Aoû 2015 - 22:44, édité 1 fois (Raison : rajout du code pour le slide ....)

R-max
# Tropactif #

Masculin
Messages : 1450
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème panneau latéral [résolu]

Message par Akesato le Sam 22 Aoû 2015 - 23:25

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

Akesato
Nouveau membre

Messages : 24
Inscrit(e) le : 03/01/2014

http://strong-world.forumactif.com/
Akesato a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème panneau latéral [résolu]

Message par R-max le Sam 22 Aoû 2015 - 23:29

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 Wink

R-max
# Tropactif #

Masculin
Messages : 1450
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème panneau latéral [résolu]

Message par Akesato le Sam 22 Aoû 2015 - 23:32

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

Akesato
Nouveau membre

Messages : 24
Inscrit(e) le : 03/01/2014

http://strong-world.forumactif.com/
Akesato a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème panneau latéral [résolu]

Message par R-max le Sam 22 Aoû 2015 - 23:37

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

R-max
# Tropactif #

Masculin
Messages : 1450
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème panneau latéral [résolu]

Message par Akesato le Sam 22 Aoû 2015 - 23:41

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

Akesato
Nouveau membre

Messages : 24
Inscrit(e) le : 03/01/2014

http://strong-world.forumactif.com/
Akesato 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