Problème avec la chatbox latérale

[Lixyr]

Bonsoir à vous, FDF !

J'ai un problème avec ma chat-box latérale. J'ai bien évidemment repris le code d'Alex pour ma chat-box ... et ça marche parfaitement bien, oui. Sous Firefox. Mais pas sous Chrome.

Voyez par vous-même : http://fantasmagoria.roleaddict.com/forum
(chat-box latérale = le bouton chat-box, tout en bas, à droite).

Alors... j'explique en quelques lignes le soucis :

- quand on clique sur l’icône de la chat box, la chat box en iframe s'ouvre en block, à gauche de l’icône. Ça c'est quand tout se passe bien.
=> sous Chrome, la chat-box s'ouvre, mais complètement plus à droite, bref, elle sort de l'écran, et d'ailleurs, l’icône de la chat-box pour ouvrir ou fermer n'est même plus à sa place, en position fixe. Oo
Dois-je rajouter une position fixe à l’icône pour que ça fonctionne ?


Voici les codes :

Javascript :

Code:

jQuery(document).ready(function() { jQuery('body').append('<table style="position: fixed; bottom:0px;right:0px;background-color: #;z-index:10000;width:80px;"><tr><td><div id="panneau" scrolling="no" style="display: none;" marginwidth="0" marginheight="0" frameborder="0"><iframe src="/chatbox/index.forum?page=front" style="width: 800px; height: 400px;" frameborder="0"></iframe></div></td><td style="vertical-align:bottom"><img src="http://i43.servimg.com/u/f43/11/73/93/90/chatbo10.png" onClick="document.getElementById(\'panneau\').style.display=(this.src==\'http://i43.servimg.com/u/f43/11/73/93/90/chatbo10.png\')?\'block\':\'none\';this.src=(this.src==\'http://i43.servimg.com/u/f43/11/73/93/90/chatbo10.png\')?\'http://i43.servimg.com/u/f43/11/73/93/90/closec10.png\':\'http://i43.servimg.com/u/f43/11/73/93/90/chatbo10.png\';"/></td></tr></table>'); } );

CSS :

Code:

/*chatboxe latérale*/
#panneau {
  border: 2px solid #1a0e0d;
  -moz-border-radius: 8px;border-radius:8px;-webkit-border-radius:8px;
  margin-bottom:10px;
  width: 800px; height: 400px;
}

(j'ai bien évidement cherché par moi-même sur internet avant de venir poster mon problème ici. Pas de résultats concluants... le meilleur étant lorsque j'ai fixé l'icône : l'icône reste bien à sa place, mais la chat-box s'affiche toujours autant à droite. Et le rendu est affreux sur Firefox, puisque du coup la chat-box passe par dessus l’icône, et ne s'affiche plus à côté. )


Merci au ForumActivien tout-puissant qui parviendra à m'aider sur ce problème.

[Invité]

Salut Lixyr,

heu !!!
Tu attribues une largeur de 80px dans le script:

Code:

width:80px;

jQuery(document).ready(function() { jQuery('body').append('<table style="position: fixed; bottom:0px;right:0px;background-color: #;z-index:10000;width:80px;"><tr><td><div id="panneau" scrolling="no" style="display: none;" marginwidth="0" marginheight="0" frameborder="0"><iframe src="/chatbox/index.forum?page=front" style="width: 800px; height: 400px;" frameborder="0"></iframe></div></td><td style="vertical-align:bottom"><img src="https://i.servimg.com/u/f43/11/73/93/90/chatbo10.png" onClick="document.getElementById(\'panneau\').style.display=(this.src==\'https://i.servimg.com/u/f43/11/73/93/90/chatbo10.png\')?\'block\':\'none\';this.src=(this.src==\'https://i.servimg.com/u/f43/11/73/93/90/chatbo10.png\')?\'https://i.servimg.com/u/f43/11/73/93/90/closec10.png\':\'https://i.servimg.com/u/f43/11/73/93/90/chatbo10.png\';"/></td></tr></table>'); } );

Supprimes tout le contenu et insères celui-ci:

Code:

        jQuery(document).ready(function() { jQuery('body').append('<table style="position: fixed; bottom:0px;right:0px;background-color: #;z-index:10000;"><tr><td><div id="panneau" scrolling="no" style="display: none;" marginwidth="0" marginheight="0" frameborder="0"><iframe src="/chatbox/index.forum?page=front" style="width: 800px; height: 400px;" frameborder="0"></iframe></div></td><td style="vertical-align:bottom"><img src="http://i43.servimg.com/u/f43/11/73/93/90/chatbo10.png" onClick="document.getElementById(\'panneau\').style.display=(this.src==\'http://i43.servimg.com/u/f43/11/73/93/90/chatbo10.png\')?\'block\':\'none\';this.src=(this.src==\'http://i43.servimg.com/u/f43/11/73/93/90/chatbo10.png\')?\'http://i43.servimg.com/u/f43/11/73/93/90/closec10.png\':\'http://i43.servimg.com/u/f43/11/73/93/90/chatbo10.png\';"/></td></tr></table>'); } );

a++

[Lixyr]

Supprimes tout le contenu et insères celui-ci:

Tu sais, tu peux me dire "supprime la taille indiquée pour la table", je comprendrai. Parce que "supprime ton contenu et mets ça" ... c'est le genre de chose que je ne fais pas quand je connais le code.. Je préfère qu'on me dise quel changement opérer.

Bref, oui en effet ! La taille de l'icône était indiquée pour la table, et pas pour l'icone... Je n'avais même pas vu.

C'est impeccable maintenant.
Merci Milouze