Chat tutorial

LGchat V3.0 - Better Than Ever

So if you have LGchat installed on your forum, then this version will provide you with one even better. If you haven't got LGchat installed on your forum, then i suggest you do using this tutorial.

First of all, as much as it is a pain, you will need to uninstall your current version of LGchat.
Delete the CSS, the HTML and the Javascript.

Things this version includes:
- The button will glow orange if you have the chat closed and a new message is entered.
- When a new message is entered a sound will play, so you'll know when your on another tab.
- The option to turn off sound.
- and of course the online count. This tutorial installs the online count which looks like this: (0/0). If i have any requests for the other styles of membercount number i'll do it, but for now im foing this type because i know that is what most use.

Okay, so first of all, you'll need somewhere to put the HTML.
So you'll need to make a decision between stuff like Widgets, Homepage Message, Announcements etc...

Once chosen a place, here is the HTML you'll need to enter:

Code:


<div id="LGchatbtn" class="wmenu" onclick="showhide('LGchat');" onmousedown="savelst();"> Chat (<span id="chatcount"></span>)</div><div class="LGmodule" style="display:none;text-align:left;" id="LGchat"><div id="lgchatholder">
<iframe name="LGchat" style="width:99%;height:450px;margin-top:5px;border:none" src="/chatbox/index.forum?archives=1" onload="chatcount();"></iframe></div><div id="lgtogglesnd" onclick="togglelgsound();" style="cursor:pointer;">Sound is: <span class="snd" id="sndon">On</span><span class="snd" style="display:none;" id="sndoff">Off</span></div>
</div>


Then of course click Save.
Now head to your CSS. (display>colors>css)

And put this:

Code:


.wmenu {
  cursor: pointer;
  float: right;
  margin-right: 5px;
  width: 150px;
  height: 24px;
  line-height: 22px;
  background: #CADCEB;
  color: #105289;
  font-family: Tahoma,Arial;
  font-size: 13px;
  font-weight: bold;
  text-align: center;
  -moz-border-radius: 6px;
  border-radius: 6px ; 
  border:1px solid;
  position: fixed;
  bottom: 1px;
  right: 1px;
}
.wmenu:hover {
  color: #d31141;
}
.LGmodule {
  z-index: 999;
  position: fixed;
  left:20%;
  bottom: 30px;
  width: 79%;
  margin: 0px;
  padding: 0px;
  background: #e8e8e8;
  border: #804080;
}
#lgtogglesnd {
  font-weight: bold;
  color: #105289;
  margin: 5px;
  width: 100px;
}

Its all laid out nicely to go with the new syntax update :roll:

Thirdly, you'll need the Javascript.
So head to Modules>Javascript Management, and create a new Javascript File.

Put this in the new Javascript File:

Code:


var CopyrightNotice='////////-------LGchat Version 3.0 for forumotion boards, made by LGforum. Copyright by LGforum. All Rights Reserved. Use, modification, and/or distribution of this script is not allowed without this entire copyright notice in the original, copied, or modified script--------\\\\\\\\\.';
function togglelgsound(){$(".snd").toggle();var a=my_getcookie("lgchatsnd");if(a){if(a=="On"){my_setcookie("lgchatsnd","Off",true)}if(a=="Off"){my_setcookie("lgchatsnd","On",true)}}else{my_setcookie("lgchatsnd","Off",true)}}function check_msg(){var a=parent.LGchat.document.getElementById("chatbox");var b=my_getcookie("lgchatlstmsg");var c=document.getElementById("LGchat");if(a.childNodes.length!=b){if(my_getcookie("lgchatsnd")=="Off"){msgno=a.childNodes.length;my_setcookie("lgchatlstmsg",msgno,false);if(c.style.display=="none"){var d=document.getElementById("LGchatbtn");d.style.backgroundColor="orange"}}else{$("body").append('<embed src="http://www.freesfx.co.uk/rx2/mp3s/2/1305_1256857800.mp3" autostart="true" hidden="true">');msgno=a.childNodes.length;my_setcookie("lgchatlstmsg",msgno,false);if(c.style.display=="none"){var d=document.getElementById("LGchatbtn");d.style.backgroundColor="orange"}}}}function savelst(){var a=parent.LGchat.document.getElementById("chatbox");msgno=a.childNodes.length;var b=document.getElementById("LGchatbtn");b.style.backgroundColor="#ddd";my_setcookie("lgchatlstmsg",msgno,false);var c=my_getcookie("lgchatsnd");if(c=="Off"){document.getElementById("sndon").style.display="none";document.getElementById("sndoff").style.display="inline"}}function chatcount(){x=parent.LGchat.document.getElementById("chatbox_members");z=jQuery(x).find("ul")[0];var c=jQuery(x).find("h4");if(z){y=z.getElementsByTagName("li");if(c[0].innerHTML=="Online"){var d=y.length;var e=0}else{d=0;e=y.length}}else{d=0;e=0}a=jQuery(x).find("ul")[1];if(a){b=a.getElementsByTagName("li");e=b.length}var f=d+e;jQuery("#chatcount").html(d+"/"+f);if(parent.LGchat.document.getElementById("chatbox_option_disco").style.display!="none"){check_msg()}var g=setTimeout("chatcount();",1500)}function showhide(a){var b=document.getElementById(a).style.display;if(b=="none"){document.getElementById(a).style.display="block"}else{document.getElementById(a).style.display="none"}}var msgno;


Set it to all pages if you plan to have your chatbox in all pages. Or just the homepage if you have it on only the hompeage (makes sense really).

After having the CSS, HTML and Javascript all saved and installed correctly, i don't see any reason why you shouldn't have LGchat v3.0

Enjoy