Forum Chat - Toogle On/Off

by Devan August 4th 2013, 5:44 pm

I just want to use the regular FM Chat (Not Any Pop-Up Chat). However, I want to know how I can get the chat to toggle on and off?

by Sir. Mayo August 4th 2013, 8:27 pm

The one that Comes default? Try this guide Here
help.forumotion.com/t3343-the-chatbox

by Devan August 5th 2013, 4:54 pm

Exactly that one..I know all that but I just want to make it toggleable (on/off switch) (open/close)

by Derri August 5th 2013, 5:24 pm

So you don't want a pop out chat but you want to be able to hide it/open it??

by Sir. Mayo August 5th 2013, 5:25 pm

Oh you mean like A Button on the side of your forum that says Chat and when its pressed it opens like a drawer and in the drawer is the chat!

by Devan August 6th 2013, 11:00 pm

Sir. Mayo wrote:Oh you mean like A Button on the side of your forum that says Chat and when its pressed it opens like a drawer and in the drawer is the chat!

You got it..That Is it! Anyways, can someone tell me how I can do that. Ty in advance..

by Sir. Mayo August 9th 2013, 5:56 pm

1. Go to your overall_header template, find the body part (<body>) and paste this below it: (Just edit the text inside the div id panel tag)

Code:: <div class="boddy"><div id="panel"> <center><iframe frameborder="0" width="700" height="300" src="Http://Yourfourmurs/chatbox/" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="chatbox" style="border:#002EFF 1px solid;border-top:0px"></iframe></center <p class="slide"><a href="#" class="btn-slide">OPEN</a></p> </div>

2. Inside the same template (overall_header), find the ending head tag (</head>), then paste this before the ending tag:

Code:: <script type="text/javascript" src="http://www.webdesignerwall.com/demo/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".btn-slide").click(function(){ $("#panel").slideToggle("slow"); $(this).toggleClass("active"); return false; }); }); </script>

3. Put this on your CSS:

Code:: .boddy { margin: -8px auto; padding: 0; width: 570px; font: 75%/120% Arial, Helvetica, sans-serif; } #panel { background: #c3c3c3; height: 200px; display: none; } .slide { margin: 0; padding: 0; border-top: solid 4px #373737; background: url(http://img638.imageshack.us/img638/5051/tabwo.png) no-repeat center top; } .btn-slide { background: url(http://img21.imageshack.us/img21/8233/whitearrown.gif) no-repeat right -50px; text-align: center; width: 144px; height: 31px; padding: 10px 10px 0 0; margin: 0 auto; display: block; font: bold 120%/100% Arial, Helvetica, sans-serif; color: #fff; text-decoration: none; } .active { background-position: right 12px; }