Sujets similaires

Oyez ! Oyez !

Je fais face à un problème que je ne comprends pas et je vais tenter d'être le plus clair possible.

Recherchant chaque jour à améliorer mon FA, j'avais suivi ce tutoriel afin de latéraliser ma ChatBox.

Aimant le concept de ces boutons latéraux, j'ai voulu en créer un deuxième, selon le même principe, pour afficher/cacher un widget sous forme d'iframe.
Aucun problème au niveau de ce widget, il est conçu exprès pour être intégré à une iframe (voir ici).

Cependant je m'aperçois qu'avec un seul bouton, cela fonctionne (quand il n'y avait que celui pour la ChatBox), mais que lorsque je veux en mettre deux, les boutons disparaissent.

J'ai fait 2 tentatives de codage :

Voici la première:

Dans le CSS:

Code:

/* ***************************DEBUT LATERALISATION*************************** */
.ChatboxLaterale {
  position: fixed; /* position fixe dans la fenêtre */
  bottom: 10%; /* à 10% du bas (calculé en fonction de la taille de la fenêtre) */
  left: 0; /* et collé au bord gauche */
  width : 100px; /* dimension 100px */
}
.ChatboxLaterale iframe {
  width: 800px; /* largeur */
  height: 300px; /* hauteur */
  display: none; /* caché par défaut */
}
.boutonChatbox {
vertical-align: bottom; /* on aligne le bouton en bas, le long de la chatbox */
}
.boutonChatbox img {
  cursor:pointer; /* on ajoute un pointeur pour indiquer que image est cliquable */
}
.AlmanaxLaterale {
  position: fixed; /* position fixe dans la fenêtre */
  bottom: 30%; /* à 30% du bas (calculé en fonction de la taille de la fenêtre) */
  left: 0; /* et collé au bord gauche */
  width : 100px; /* dimension 100px */
}
.AlmanaxLaterale iframe {
  width: 451px; /* largeur */
  height: 263px; /* hauteur */
  display: none; /* caché par défaut */
}
.boutonAlmanax {
vertical-align: bottom; /* on aligne le bouton en bas, le long du widget */
}
.boutonAlmanax img {
  cursor:pointer; /* on ajoute un pointeur pour indiquer que image est cliquable */
}
/* *************************FIN LATERALISATION************************* */

Après quoi j'ai créé 2 codes Javascript différents :
Le premier:

Code:

$(function(){
   var urlChatBox = 'http://starlight-alliance.forumactif.com/chatbox/index.forum?page=front&';
   var imgOuvrir = 'http://i56.servimg.com/u/f56/15/76/22/69/ouvrir10.png';
   var imgOuvrirSurvol = 'http://i56.servimg.com/u/f56/15/76/22/69/ouvrir10.png';
   var imgFermer = 'http://i56.servimg.com/u/f56/15/76/22/69/fermer10.png';
   var imgFermerSurvol = 'http://i56.servimg.com/u/f56/15/76/22/69/fermer10.png';
   $('body').append('
   <table class="ChatboxLaterale" cellspacing="0" cellpadding="0">
   <tr>
   <td>
   <iframe src="'+urlChatBox+'" id="chatboxpop" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" ></iframe>
   </td>
   <td class="boutonChatbox">
   <img id="btn_cb" src="'+imgOuvrir+'" alt="ouvrir la chatbox" />
   </td>
   </tr>
   </table>
   ');
   $('#btn_cb').on({
   click: function(){
   $('#chatboxpop').toggle();
   },
   mouseenter: function(){
   if($('#chatboxpop').css('display') == 'none'){
   $(this).attr('src', imgOuvrirSurvol);
   } else {
   $(this).attr('src', imgFermerSurvol);
   }
   },
   mouseleave: function(){
   if($('#chatboxpop').css('display') == 'none'){
   $(this).attr('src', imgOuvrir);
   } else {
   $(this).attr('src', imgFermer);
   }
   }
   });
});

Le second:

Code:

$(function(){
   var urlAlmanax = 'http://almanax.zone-bouffe.com/dofus/widget.php';
   var imgOuval = 'http://i56.servimg.com/u/f56/15/76/22/69/ouvrir11.png';
   var imgOuvalsouris = 'http://i56.servimg.com/u/f56/15/76/22/69/ouvrir11.png';
   var imgFeral = 'http://i56.servimg.com/u/f56/15/76/22/69/fermer11.png';
   var imgFeralsouris = 'http://i56.servimg.com/u/f56/15/76/22/69/fermer11.png';
   $('body').append('
   <table class="AlmanaxLaterale" cellspacing="0" cellpadding="0">
   <tr>
   <td>
   <iframe src="'+urlAlmanax+'" id="almanax" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe>
   </td>
   <td class="boutonAlmanax">
   <img id="btnal_cb" src="'+imgOuval+'" alt="ouvrir l'almanax" />
   </td>
   </tr>
   </table>
   ');
   $('#btnal_cb').on({
   click: function(){
   $('#almanax').toggle();
   },
   mouseenter: function(){
   if($('#almanax').css('display') == 'none'){
   $(this).attr('src', imgOuvalsouris);
   } else {
   $(this).attr('src', imgFeralsouris);
   }
   },
   mouseleave: function(){
   if($('#almanax').css('display') == 'none'){
   $(this).attr('src', imgOuval);
   } else {
   $(this).attr('src', imgFeral);
   }
   }
   });
});
Voyant que cela ne fonctionnait pas, j'ai fait une autre tentative, en réunissant en fait les 2 codes Javascript en un et en essayant de ne pas prédéfinir les caractéristiques des iframes dans le CSS.

Voici ce que cela a donné:

Dans le CSS:

Code:

/* ***************************DEBUT LATERALISATION*************************** */
.ChatboxLaterale {
  position: fixed; /* position fixe dans la fenêtre */
  bottom: 10%; /* à 10% du bas (calculé en fonction de la taille de la fenêtre) */
  left: 0; /* et collé au bord gauche */
  width : 100px; /* dimension 100px */
}
/*.ChatboxLaterale iframe {
  width: 800px; /* largeur
  height: 300px; /* hauteur
  display: none; /* caché par défaut */
}
.boutonChatbox {
vertical-align: bottom; /* on aligne le bouton en bas, le long de la chatbox */
}
.boutonChatbox img {
  cursor:pointer; /* on ajoute un pointeur pour indiquer que image est cliquable */
}
/*.AlmanaxLaterale {
  position: fixed; /* position fixe dans la fenêtre
  bottom: 30%; /* à 30% du bas (calculé en fonction de la taille de la fenêtre)
  left: 0; /* et collé au bord gauche
  width : 100px; /* dimension 100px */
}
/*.AlmanaxLaterale iframe {
  width: 451px; /* largeur
  height: 263px; /* hauteur
  display: none; /* caché par défaut */
}
.boutonAlmanax {
vertical-align: bottom; /* on aligne le bouton en bas, le long du widget */
}
.boutonAlmanax img {
  cursor:pointer; /* on ajoute un pointeur pour indiquer que image est cliquable */
}
/* *************************FIN LATERALISATION************************* */

Le Javascript:

Code:

$(function(){
   var urlChatBox = 'http://starlight-alliance.forumactif.com/chatbox/index.forum?page=front&';
   var imgOuvrir = 'http://i56.servimg.com/u/f56/15/76/22/69/ouvrir10.png';
   var imgOuvrirSurvol = 'http://i56.servimg.com/u/f56/15/76/22/69/ouvrir10.png';
   var imgFermer = 'http://i56.servimg.com/u/f56/15/76/22/69/fermer10.png';
   var imgFermerSurvol = 'http://i56.servimg.com/u/f56/15/76/22/69/fermer10.png';
   var urlAlmanax = 'http://almanax.zone-bouffe.com/dofus/widget.php';
   var imgOuval = 'http://i56.servimg.com/u/f56/15/76/22/69/ouvrir11.png';
   var imgOuvalsouris = 'http://i56.servimg.com/u/f56/15/76/22/69/ouvrir11.png';
   var imgFeral = 'http://i56.servimg.com/u/f56/15/76/22/69/fermer11.png';
   var imgFeralsouris = 'http://i56.servimg.com/u/f56/15/76/22/69/fermer11.png';
   $('body').append('
   <table class="ChatboxLaterale" cellspacing="0" cellpadding="0">
   <tr>
   <td>
   <iframe style="width: 800px; height: 300px;" src="'+urlChatBox+'" id="chatboxpop" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" ></iframe>
   </td>
   <td class="boutonChatbox">
   <img id="btn_cb" src="'+imgOuvrir+'" alt="ouvrir la chatbox" />
   </td>
   </tr>
   <tr>
   <td>
   <iframe style="width: 451px; height: 263px;" src="'+urlAlmanax+'" id="almanax" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe>
   </td>
   <td class="boutonAlmanax">
   <img id="btnal_cb" src="'+imgOuval+'" alt="ouvrir l'almanax" />
   </td>
   </tr>
   </table>
   ');
   $('#btn_cb').on({
   click: function(){
   $('#chatboxpop').toggle();
   },
   mouseenter: function(){
   if($('#chatboxpop').css('display') == 'none'){
   $(this).attr('src', imgOuvrirSurvol);
   } else {
   $(this).attr('src', imgFermerSurvol);
   }
   },
   mouseleave: function(){
   if($('#chatboxpop').css('display') == 'none'){
   $(this).attr('src', imgOuvrir);
   } else {
   $(this).attr('src', imgFermer);
   }
   }
   });
   $('#btnal_cb').on({
   click: function(){
   $('#almanax').toggle();
   },
   mouseenter: function(){
   if($('#almanax').css('display') == 'none'){
   $(this).attr('src', imgOuvalsouris);
   } else {
   $(this).attr('src', imgFeralsouris);
   }
   },
   mouseleave: function(){
   if($('#almanax').css('display') == 'none'){
   $(this).attr('src', imgOuval);
   } else {
   $(this).attr('src', imgFeral);
   }
   }
   });
});

Quelqu'un saurait-il m'aider?
Que n'ai-je pas bien saisi et qui est à l'origine de mon(mes) erreur(s)?

NB : Pensant au début qu'il s'agissait peut-être du fait que le widget est un php, j'ai fait un essai avec le widget seul et cela fonctionne donc en gros :

Chatbox seule : OK
Widget seul : OK
Tentative d'association des 2 pour avoir 2 boutons latéraux : NON-OK

Cordialement, Dech'eveuxarrachés.

Bonsoir,

Citation :: Chatbox seule : OK
Widget seul : OK

As tu modifié ton code JS depuis l'essai widget seul ne fonctionne pas sur mon forum.
Si je le modifie en mettant ceci cela fonctionne :

Code:: $(function(){
  var urlAlmanax = 'http://almanax.zone-bouffe.com/dofus/widget.php';
  var imgOuval = 'http://i56.servimg.com/u/f56/15/76/22/69/ouvrir11.png';
  var imgOuvalsouris = 'http://i56.servimg.com/u/f56/15/76/22/69/ouvrir11.png';
  var imgFeral = 'http://i56.servimg.com/u/f56/15/76/22/69/fermer11.png';
  var imgFeralsouris = 'http://i56.servimg.com/u/f56/15/76/22/69/fermer11.png';
  $('body').append('
   <table class="AlmanaxLaterale" cellspacing="0" cellpadding="0">
   <tr>
   <td>
   <iframe src="'+urlAlmanax+'" id="almanax" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe>
   </td>
   <td class="boutonAlmanax">
   <img id="btnal_cb" src="'+imgOuval+'" alt="ouvrir l\'almanax" />
   </td>
   </tr>
   </table>
  ');
  $('#btnal_cb').on({
   click: function(){
   $('#almanax').toggle();
   },
   mouseenter: function(){
   if($('#almanax').css('display') == 'none'){
   $(this).attr('src', imgOuvalsouris);
   } else {
   $(this).attr('src', imgFeralsouris);
   }
   },
   mouseleave: function(){
   if($('#almanax').css('display') == 'none'){
   $(this).attr('src', imgOuval);
   } else {
   $(this).attr('src', imgFeral);
   }
   }
  });
});

Modification :

Code:: <img id="btnal_cb" src="'+imgOuval+'" alt="ouvrir l\'almanax" />

J'ai rajouté dans l'apostrophe de almanax un \ pour échapper l'apostrophe. En effet tu as utilisé des apostrophes pour encradrer ton texte. Si tu en remets une, il considère cela comme si tu fermais la chaine de caractère et il ne comprends plus la suite.

Sur mon forum test, effectuer cette modification suffit à régler le problème Wink

Bonjour,

Je te remercie pour ton aide apportée, je débute hihi Smile

Nihil a écrit:: En effet tu as utilisé des apostrophes pour encradrer ton texte. Si tu en remets une, il considère cela comme si tu fermais la chaine de caractère et il ne comprends plus la suite.

Ha d'accord! Oui effectivement, c'est un peu bête de ma part haha.
Et effectivement, maintenant que tu le dis, je me souviens que lorsque mon essai du widget seul avait fonctionné, je n'avais pas écrit "l'almanax", cherchant juste à faire fonctionner le code.
J'avais essayé de bidouiller quelques bricoles quand même avant de venir poster mon problème ici mais sans franc succès et je ne me souvenais plus exactement de toutes mes tentatives alors je n'ai exposé ici que mes 2 principales ^^

Je teste cela dès que possible et je te tiens au courant de mon avancée.

Bien cordialement et encore merci, Dech'apiteau.

Re bonjour,

Effectivement, ça va beaucoup mieux, j'ai apporté cette modification et tout est maintenant fonctionnel, je me retrouve bien avec les 2 boutons latéraux.

Je te remercie encore pour ton aide Very Happy

Avis aux modérateurs : Problème résolu, vous pouvez faire le nécessaire (je ne sais pas s'il y a une démarche à faire, dans le doute je vais éditer le titre du sujet en indiquant "[Résolu]").

Cordialement, Dech'âteauhanté.

Il n'y plus de modo sur CSSActif depuis un bout de temps, mais merci d'avoir mis la mention Résolu dans le titre, ça aide beaucoup pour savoir dans quel topic il faut retourner Very Happy

Ha d'accord, je trouve ça dommage quand des communautés comme ça s'effondrent.

Après j'imagine que beaucoup d'inscrits devaient abuser en cherchant à tout prix la facilité et le plat préparé à emporter {si tu vois l'image ^^} et que ça a blasé la plupart des codeurs aguerris.

C'est dommage, au final l'histoire se répète, avant d'arriver ici j'étais tombé sur l'ancien forum, qui si j'ai bien compris était notamment tenu par Orange, mais c'était pareil, le forum n'avait plus aucune activité, c'est d'ailleurs là-bas que j'avais trouvé un lien vers ce forum, dans un message d'Orange qui disait quitter le navire car il restait le seul de l'équipe à être actif.
Il s'est alors monté une autre équipe pour une nouvelle aventure ici.

Heureusement il reste encore des membres comme toi pour continuer à faire tourner la boutique et le forum est très riche en ressources.
N'étant pas du tout un pro du code mais m'y intéressant fortement pour retaper sans arrêt la coque de ma barque {oui moi ce n'est pas la barre d'un paquebot que je tiens haha} et ainsi continuer la croisière, j'ai jusqu'alors toujours trouvé les solutions à mes petites lignes défaillantes dans des topics classés et avec beaucoup de patience, d'observation et d'essais, en mélangeant plusieurs ingrédients, on parvient quand même à faire de bonnes recettes à la louche, avec zéro connaissance en codage.

Cordiale nuit. Dech.

[Résolu] Problème multiplicité boutons latéraux (iframe)

[Résolu] Problème multiplicité boutons latéraux (iframe)

Sujets similaires

Sujets similaires

Partenaires Or