Intégration Chatbox dans la Toolbar

[Desolation]

Bonjour,

Voila Grâce a Milouze14 ma Chatbox est accessible sur la Toolbar seulement quand je clique sur mon icône elle s'affiche en entier sur la page hors je souhaiterais l'avoir comme dans mon ancien version exemple en image :

Mon ancien dispositif (Situé a Gauche/centre du forum):

Le projet (Situé sous l’icône de la chatbox/Toolbar):

Mon ancien Code de Chatbox (Java/sur toutes les pages):

Code:

jQuery(document).ready(function() { jQuery('body').append('<table style="position: fixed; bottom: 50px; left: 0px;background-color: #;z-index:10000;"><tr><td><div id="panneau" scrolling="no" style="width: 800px; height: 400px; display: none;" marginwidth="0" marginheight="0" frameborder="0" title="ChatBox du Forum Crazy Mocs">

            <iframe src="/chatbox/index.forum?page=front" style="width: 800px; height: 380px;" ></iframe>


</div></td><td style="vertical-align: bottom;"><img src="http://i37.servimg.com/u/f37/11/44/92/25/ouvrir11.png" onClick="document.getElementById(\'panneau\').style.display=(this.src==\'http://i37.servimg.com/u/f37/11/44/92/25/ouvrir11.png\')?\'block\':\'none\';this.src=(this.src==\'http://i37.servimg.com/u/f37/11/44/92/25/ouvrir11.png\')?\'http://i37.servimg.com/u/f37/11/44/92/25/fermer10.png\':\'http://i37.servimg.com/u/f37/11/44/92/25/ouvrir11.png\';"/></td></tr></table>'); } );

Mon nouveau Code de Chatbox (Java/sur toutes les pages):

Code:

$(function(){
        $(function(){
        $('<a href="/chatbox/index.forum?"title="Rejoindre la ChatBox"> <img src="http://i39.servimg.com/u/f39/11/26/21/37/ouvrir10.png"alt="Rejoindre la ChatBox"  align="absmiddle"/></a>').insertBefore('#fa_menu');
        })});

Merci d'avance pour votre aide, car je me mélange les doigts et je me suis perdu .
Desolation.

[Invité]

Salut Desolation,

il faut remettre le javascript que tu mentionnes :

Code:


        jQuery(document).ready(function() { jQuery('body').append('<table style="position: fixed; bottom: 50px; left: 0px;background-color: #;z-index:10000;"><tr><td><div id="panneau" scrolling="no" style="width: 800px; height: 400px; display: none;" marginwidth="0" marginheight="0" frameborder="0" title="ChatBox du Forum Crazy Mocs">
       
                    <iframe src="/chatbox/index.forum?page=front" style="width: 800px; height: 380px;" ></iframe>
       
       
        </div></td><td style="vertical-align: bottom;"><img src="http://i37.servimg.com/u/f37/11/44/92/25/ouvrir11.png" onClick="document.getElementById(\'panneau\').style.display=(this.src==\'http://i37.servimg.com/u/f37/11/44/92/25/ouvrir11.png\')?\'block\':\'none\';this.src=(this.src==\'http://i37.servimg.com/u/f37/11/44/92/25/ouvrir11.png\')?\'http://i37.servimg.com/u/f37/11/44/92/25/fermer10.png\':\'http://i37.servimg.com/u/f37/11/44/92/25/ouvrir11.png\';"/></td></tr></table>'); } );


car celui que je t'ai donné place simplement le bouton et rien d'autre .

a++

[Desolation]

Oui seulement je bloque pour le code pour le mettre en forme.

[Invité]

Re,
il vaut mieux créer un nouveau sujet car le titre ne sera plus en relation avec cette demande .

a++

[Desolation]

Re,
il vaut mieux créer un nouveau sujet car le titre ne sera plus en relation avec cette demande .

a++

Bah pourquoi je comprends pas, je souhaite intégrer ma Chatbox dans ma toolbar a moins que tu pense que le titre ne soit peut-être pas assez explicite ????

A++ Desolation.

[Invité]

Re,
oups je comprend mieux ta demande en fait ce n'est pas seulement le bouton que tu voulais ,
tu veux en cliquant sur le bouton que ta chatbox s'ouvre ?

a++

[Desolation]

Re,
oups je comprend mieux ta demande en fait ce n'est pas seulement le bouton que tu voulais ,
tu veux en cliquant sur le bouton que ta chatbox s'ouvre ?

a++

Oui , lol je me suis complétement perdu dans le code est je souhaite donc que en cliquant sur le bouton elle s'ouvre .

[Invité]

Salut Desolation,
supprimes toutes traces de cette chatbox sur tes scripts et CSS encore présents car
je t'ai concocté une nouvelle mouture .
Lorsque tu cliqueras sur l'image présente dans la toolbar la chatbox s'ouvrira juste en dessous de
cette dernière et elle se fermera au clique sur l'image de fermeture de la Chatbox .

J'ai d'ailleurs placé un title (infobulle) qui au survol annoncera "Fermeture de la Chatbox".

Tu auras un effet de fondu lors de l'ouverture et de la fermeture plus ou moins prononcé ,
il te suffira de diminuer les fadeIn et fadeOut dans le script en supprimant les valeurs"800".

Modules/HTML&JAVASCRIPT/
Gestion des codes Javascript/Créer un nouveau Javascript

Mettre un titre explicite.
Cocher sur toutes les pages.

Colles ceci:

Code:


jQuery(document).ready(function() { jQuery('body').append('<table id="M14_Chat_Box"style="display:none;position:fixed; top:30px;left:10%;background-color: #;z-index:10000;"><tr><td><div scrolling="no" style="width: 800px; height: 400px; marginwidth="0" marginheight="0" frameborder="0" title="ChatBox du Forum Crazy Mocs">
<iframe src="/chatbox/index.forum?page=front" style="width: 800px; height: 380px;" ></iframe>
</div></td><td id="M14_Close"style="vertical-align: bottom;cursor:pointer;"title="Fermer la Chatbox"><img src="http://i37.servimg.com/u/f37/11/44/92/25/fermer10.png"/></td></tr></table>'); } );

$(function(){
$(function(){
$('<span id="M14_Chat"style="cursor:pointer;"title="Rejoindre la Chatbox"> <img src="http://i39.servimg.com/u/f39/11/26/21/37/ouvrir10.png"alt="Rejoindre la ChatBox"  align="absmiddle"/></span>').insertBefore('#fa_menu');
})});

$(function(){
$(function(){
$('#M14_Chat').click(function(){
$('#M14_Chat_Box').fadeIn(800);
});
});});

$(function(){
$(function(){
$('#M14_Close').click(function(){
$('#M14_Chat_Box').fadeOut(800);
});
});});



Penses à cliquer sur le bouton

a++

[Desolation]

Merci beaucoup Milouze cela fonctionne a merveille, bravo pour ton travail.

Desolation.