Crearea unui panou pentru chatbox

Vezi subiectul anterior Vezi subiectul urmator In jos

Tutorial Crearea unui panou pentru chatbox

Mesaj Scris de Cassius Dio la data de Mar 5 Mar - 13:24

Crearea unui panou pentru chatbox

Acest tutorial va explica cum puteti adauga un panou lateral in care puteti plasa chatbox-ul forumlui.

Codul pentru chatbox:

- Pentru pozitionarea panoului in partea stanga, folositi urmatorul cod:
cod:

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

- Pentru pozitionarea panoului in partea dreapta, folositi urmatorul cod:
cod:

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

Asta nu e tot insa, trebuie sa modificati urmatoarele imagini:
http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png - "Deschide";
http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png - "Inchide".
Inlocuiti link-urile acestor imagini din codul JavaScript de mai sus. Atentie mare la editarea codului, sa nu stergeti in plus ghilimelele sau alte caractere prezente in cod.
Exemple:
Pentru imaginea "Deschide" puteti folosi:
http://i.imgur.com/lCRaZy2.png

Pentru imaginea "Inchide" puteti folosi:
http://i.imgur.com/LMB2oAa.png

Rezultat:
- cind panoul este inchis:


- cind panoul este deschis:


Adaugarea propriului continut in acest panou:

Daca doriti sa adaugati orice alt continut in loc de chatbox-ul de mai sus, puteti folosi unul dintre codurile de mai jos.

- Pentru pozitionarea panoului in partea stanga, folositi urmatorul cod:
cod:

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

    Text

</div></td><td style="vertical-align: bottom;"><img src="http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png" onClick="document.getElementById(\'panneau\').style.display=(this.src==\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\')?\'block\':\'none\';this.src=(this.src==\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\')?\'http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png\':\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\';"/></td></tr></table>'); } );

- Pentru pozitionarea panoului in partea dreapta, folositi urmatorul cod:
cod:

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

    Text

</div></td><td style="vertical-align: bottom;"><img src="http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png" onClick="document.getElementById(\'panneau\').style.display=(this.src==\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\')?\'block\':\'none\';this.src=(this.src==\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\')?\'http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png\':\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\';"/></td></tr></table>'); } );

Tot ce trebuie sa faceti este sa inlocuiti "Text" cu orice continut doriti: text, imagini, link-uri, coduri etc.

Personalizarea panoului:

Puteti modifica oricand panoul cu ajutorul unor coduri CSS in cazul in care doriti sa faceti acest lucru.

- Schimbarea latimii si inaltimii acestuia:
Cod:
#panneau{
width: 800px !important;
height: 400px !important;
}
width = latime; height = inaltime. Modificati valorile in pixeli.

- Schimbarea culorii sau imaginii de fundal:
Cod:
.panoufix{
background-color: #FFF !important;
background-image: url(Link imagine) !important;
}
Inlocuiti #FFF cu o culoare hexadecimala; si Link imagine cu adresa URL a imaginii de fundal dorite.

- Schimbarea pozitiei:
Cod:
.panoufix{
bottom: 10px !important;
}
10px defineste in acest caz spatiul gol lasat din jos in sus. Modificati valoarea in pixeli pentru un spatiu mai mare sau mai mic.

- Schimbarea culorilor textului:
Cod:
.panoufix{
color: #333 !important;
}
Inlocuiti #333 cu o culoare hexadecimala.

Pentru functionalitatea codurilor CSS de mai sus trebuie sa adaugati urmatorul cod in Gestiunea codurilor JavaScript (pe langa cele de mai sus):
Cod:
$(document).ready(function(){
$('#panneau').parent().parent().parent().parent().addClass('panoufix');
});

Instalarea codurilor:

Codurile CSS se adauga in:
Panou de Administrare ~> Afisare ~> Imagini si culori ~> Culori ~> Foaie de stil CSS

Codurile JavaScript se adauga in:
Panou de Administrare ~> Module ~> HTML & JAVASCRIPT ~> Gestiunea codurilor JavaScript

Tutorial scris de Alex Fowl, tradus si completat de SGSS

Copyright ˆ Forumgratuit.ro Nici o parte a acestui tutorial nu poate fi reprodusa, transmisa sau stocata in orice forma fara acordul scris al detinatorului dreptului de autor, in conformitate cu articolul L122-1 apartinand ICC.
avatar
Cassius Dio
Membru onorific
Membru onorific

masculin

Mesaje : 11025
Varsta : 19
Localizare : Strawberry Fields
Data înscrierii : 13/07/2012
Multumiri : 82
Niciun avertisment

http://beatles.forummo.com/

Sus In jos

Vezi subiectul anterior Vezi subiectul urmator Sus

- Subiecte similare

Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum