Example 6: A Pop-Up Chatbox!
Posted January 23rd 2011, 2:43pm
The last example created a "widget bar" using a script in a widget. Having a widget bar opens up all sorts of possibilities because there is now a place where tabs can be added to do all sorts of great things.

In this tutorial, we're going to add a tab to the widget bar that will toggle a pop-up chatbox! Doing this is extremely easy because no CSS is required, and the script is the same for phpBB3 and Invision. All it takes is to create a widget containing the script, placing the widget BELOW the widget that creates the widget bar, and adding one CSS rule. That's it...nothing else is needed! Since only members can use the chatbox, make sure to remove Guests from the permissions of the widget. In that way, the tab will only show for members.

Here's the script:

<script type="text/javascript">
var CopyrightNotice = 'Pop-up chatbox for forumotion phpBB3 and IPB2/Invision boards. Copyright © 2011 by Dion Designs. All Rights Reserved. Use and/or modification of this script is allowed, provided this entire copyright notice remains in the original or modified script. Distribution is not allowed without written consent from Dion Designs.';

function initchatbox() {
var x=document.getElementById('dionchat');
if(x.innerHTML=='') {x.innerHTML='<iframe style="margin:10px 0px;" name="bchat" src="/chatbox/chatbox.forum" scrolling="no" width="100%" height="300" frameborder="0"></iframe>';}
}

jQuery(function() {
jQuery('#widgetbar').append('<div class="wmenu wrt" onclick="initchatbox();togglemenu(this.nextSibling)">Chatbox</div><div id="dionchat" style="display:none;"></div>');
});
</script>

Here's how the script works. It first adds the tab to the far right of the widget bar. You can change the positioning by changing the top/right values in the style= portion of the DIV. Clicking on the tab will activate the initchatbox() function. This function checks whether the chatbox code has been added. If it hasn't been added, the chatbox IFRAME is added. Then the togglemenu() function from example 5 is called to toggle the display of the chatbox. Since the chatbox display is controlled with the togglemenu() function, it works like all the other widgets on the widget bar.

You will need to add one line to your CSS:

#widgetbar .wmenu.wrt {float: right; margin-right: 0px; margin-left: 10px;}

This method of popping up the chatbox is much, MUCH better than using anything in the Admin Control Panel to add a chatbox to your forum. The chatbox IFRAME adds a lot of overhead to a forum, and your forum will run more slowly. Using this method, the chatbox IFRAME is only added if a member clicks on the tab. And the best part is: you have access to the chatbox on every page you would normally see the widgets -- a feature that has been requested several times on forumotion's help boards!

To see the chatbox on a live board, please visit either of the demonstration boards, and log in using the test account.

Enjoy your new pop-up chatbox!
φ
Posts: 1599
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 357
Example 6: A Pop-Up Chatbox!
Posted February 1st 2011, 3:04am
I created a topic on forumotion about new features for the chatbox. One thing I suggested was to add an option to place the chatbox on every page. The Topic got out of hand with a lot of haters and eventually it was locked. This was about 6 months ago and still not an option on forumotion. So.. I used the iframe method of having the chatbox on every page, it definitely ran slower. This topic puts the chatbox on every page without the lag! This is awesome and I thank you for this!

I have one question about this, how do I set it up so that the chatbox remains open until I click the button again to close it? I noticed that with each page I cycle through, I have to continue opening the chatbox. Also, if I use other buttons on the widget bar, the chatbox closes. Any way around this?
φ
Posts:
Avatar
Guest
Example 6: A Pop-Up Chatbox!
Posted February 1st 2011, 12:37pm
The chatbox widget code can be modified to open/close independently of the other widgets -- all it needs is a separate open/close function. You can also look at example 2 for some code to add cookies, because that is what is needed to put a saved setting into the new open/close function.

One reason this code is SO MUCH faster than the other chatbox codes floating around is because the chatbox IFRAME isn't loaded until you click the chatbox tab. Opening the chatbox automatically on every page eliminates that benefit, and your board would run slower. Not as slow as the other methods, but definitely slower...

Good luck!
φ
Posts: 1599
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 357

Who is online

Users browsing this forum: No registered users and 0 guests