[Alpha] Ajax Shoutbox

[Asbestos]

I installed this shoutbox yesterday but didn't quite like the shoutbox being on it's own page and not on the index. I sifted through most of this huge thread and couldn't find a fix for it to be on the index besides the explanation that this option wouldn't be available for a while.

The mod looks and functions great but I'd rather it be on the index page. So I decided to take the mod off the board until the index part is finished up. I went back to my site and noticed that none of my site's graphics were showing up. I double checked that I removed the mod files and also replaced the moded files with originals. I also took the sql out that it was associated to. It could be a file I accidentally deleted, not sure. Just checking if this has happened to anyone else.

Has this happened to anyone that removed the shoutbox mod from their board? I haven't figured out what caused this and if anyone has any idea, I would greatly appreciate the help.

Just so all can see what my problem is, my website is http://www.thelocclan.com/forum.

Thanks

[Asbestos]

*Problem fixed*

My problem had nothing to do with this mod whatsoever. Somehow I removed my template's image folder while removing the mod.

[iunex]

Iv'e been using this for quit some time now, but some members found a way to have 2 forums open at once and they are able to be seen as "E" or "Undefined" is there a way to block this?

Thanks

[daddy]

...is it possible to set the date near the user different from the acp one? How?

and then using this change:

find
newCell.innerHTML = newCell.innerHTML + '<br /><i class="postbody">' + liTime + '</i>';
Replace with
newCell.innerHTML = newCell.innerHTML + '<br /><i class="postbody"><font size=1>' + liTime + '</font></i>';

the font isn't small as i'd like, is there another part of the code to change? Thanks

i read everything

i personally found a solution at the two problems, but i'm new (3 weeks) to phpbb so maybe is not correct:

To make smaller the time font in the shoutbox I added in fiapplepink.css:

Code: Select all

/* Date shoutbox */
.postbody2{font-size:9px;line-height:125%}

(You can make the size and format you prefer)

and then in shoutbox_js.tpl find:

Code: Select all

newCell.innerHTML = newCell.innerHTML + '<br /><i class="postbody">' + liTime + '</i>';

and replace "postbody" with "postbody2".

To change the date from the acp default one:

in shoutbox.php I found

Code: Select all

$time = utf8_encode(create_date($board_config['default_dateformat'], $row[$x]['shout_time'], $board_config['shout_time']));

and replaced

Code: Select all

$board_config['default_dateformat']

with (in my case ex: sat 12:37)

Code: Select all

'D H:i'

.

This are problems was asked in this thread long time ago, hope to have helped someone: In my case they work.

A probem i didn't find solution after hundreds of tryings was to put "who is chatting" near the shoutbox that i have in the index page, but for sure nobody will help?

[daddy]

up

A probem i didn't find solution after hundreds of tryings was to put "who is chatting" near the shoutbox that i have in the index page, ...

[gentlefoot]

I'm trying to set up this shoutbox. This is what I did:

I copied the following files to my phpbb2 installation:

chat.php ==> ../forum
shoutbox.php ==> ../forum
functions_shoutbox.php ==> ../forum/includes
act_indicator.gif ==> ../forum/templates
fat.js ==> ../forum/templates
chat_archive.tpl ==> ../forum/templates/RedSilver
chat_body.tpl ==> ../forum/templates/RedSilver
shoutbox_body.tpl ==> ../forum/templates/RedSilver
shoutbox_js.tpl ==> ../forum/templates/RedSilver
shoutbox_xml.tpl ==> ../forum/templates/RedSilver

RedSilver is the template I'm using.

I then ran the following SQL statements:

INSERT INTO `phpbb_config` VALUES ('shoutbox_floodinterval', '3');# Affected rows: 1

INSERT INTO `phpbb_config` VALUES ('display_shouts', '10');# Affected rows: 1

INSERT INTO `phpbb_config` VALUES ('stored_shouts', '25');# Affected rows: 1

INSERT INTO `phpbb_config` VALUES ('shoutbox_refreshtime', '4000');# Affected rows: 1

INSERT INTO `phpbb_config` VALUES ('shout_allow_guest', '1');# Affected rows: 1

CREATE TABLE phpbb_shoutbox (
shout_id MEDIUMINT(9) UNSIGNED NOT NULL AUTO_INCREMENT,
user_id MEDIUMINT(8) NOT NULL,
shouter_name VARCHAR(30) NOT NULL DEFAULT 'guest',
shout_text TEXT NOT NULL,
shouter_ip VARCHAR(8) NOT NULL DEFAULT '',
shout_uid VARCHAR(10) NOT NULL DEFAULT '',
shout_time INT(11) NOT NULL,
PRIMARY KEY ( shout_id )
);# MySQL returned an empty result set (i.e. zero rows).

CREATE TABLE `phpbb_shoutbox_sessions` (
`session_id` int(10) NOT NULL auto_increment,
`session_user_id` mediumint(8) NOT NULL default '0',
`session_username` varchar(25) NOT NULL default '',
`session_ip` varchar(8) NOT NULL default '0',
`session_start` int(11) NOT NULL default '0',
`session_time` int(11) NOT NULL default '0',
PRIMARY KEY (`session_id`)
);# MySQL returned an empty result set (i.e. zero rows).

Now if I visit the shoutbox page at http://gentlefoot.com/LFS/forum/shoutbox.php I am unable to add anything to it. Please tell me what I'm doing wrong. I guess I've missed a stage but couldn't find any installation instructions at all.

[gentlefoot]

Sorted now thanks all the same Found the .mod file and all is sweet as a nut!

[santagr]

Hello and great job for the Mod !!
I have a problem. I installed ajax shoutbox on my site and i have encoding problems. The language is Greek and the letters of Greek written usernames and time and date are looking wierd. Could you please help me what to do? Is there anything you could do for my problem?
Many thanks in advance !!!!
Keep going on for the good Job!!!

[ONE_HUMAN]

I love this Ajax Shoutbox. Too many posts in this topic to read them all and I hope my post doesn't get lost among them, but here it is...

I've made a lot of alterations and customizations to the Ajax Shoutbox. Here's the list of
changes I've made:

- made the left column wider to accomodate longer usernames so they'll fit on one line

- shortened the date/time format so that it all fits on one line right below the username

- the two changes above make the cell height only 2 lines tall instead of 3, so more entries can fit in the window... because of these changes and making the window slightly taller, 8 separate user entries are now visible as opposed to the default 5

- changed the colour of the date/time to orange and italicized it

- changed the [Delete] link that an Admin will see beside all usernames to display simply as [D], which once again saves space

- made two separate links for the Shoutbox on the Index page -- [ Shoutbox With Sound ] and [ Shoutbox Without Sound ] ... the "Shoutbox With Sound" pops open a new sized window, and the "Shoutbox Without Sound" goes to its own page like the default

- the main reason I made a pop-up shoutbox window is because of what may be my favorite improvement -- a small sound which plays with each new typed or received entry... thereby alerting a user of a new message

- using "Shoutbox With Sound", a user can pop open the shoutbox window while still continuing to browse the regular forum in the main window, yet if another user comes online they are able to get their attention because a typed message will make a sound

- i've provided conditional statements on the Index page so that the "Shoutbox With Sound" link will correspond to the browser you are using (i.e. Internet Explorer or Firefox)... If you are using IE, only the IE link will be visible which opens shoutboxIE.php, if you are using Firefox, you will only see the Firefox link which will open shoutboxFF.php... I did this because I had to use some creative code not only to make the embedded sound play, but also to suppress any ActiveX dialogs

- ActiveX dialogs in IE were suppressed by using an external script to call the embedded MP3 file

- made a lot of minor formatting changes to the main Shoutbox page and the Shoutbox Archive page

.....

You can check out a demo here: http://test.chatnpix.com. There are links at the top of the page right above the forum categories: [ Shoutbox With Sound ] and [ Shoutbox Without Sound ]. Try both so you can see the difference.

Tell me what you think of the changes I've made. Perhaps the developer will like some of the changes I've made and implement them in his build.

[nosva]

hello this may sound but im makin my first evr forum and im having trouble with the shout box...... i can get the page to work propperly offline but this is the stupid bit........ how do i upload the new script the the net... feeling really stupid here any help would be much appretiated
thank you

[mgoi]

hello this may sound but im makin my first evr forum and im having trouble with the shout box...... i can get the page to work propperly offline but this is the stupid bit........ how do i upload the new script the the net... feeling really stupid here any help would be much appretiated
thank you

Hi Nosva we would love to help you but you need to be a bit more specific about what you want to do. Do you already have a forum up and running on the net? If yes, you can follow the phpbb documentation which explains how to upload files and add modifications.

M

[mgoi]

I love this Ajax Shoutbox.

Me too! Thanks for posting a list of your changes to this mod. I would love to know how you managed to put your sound in. I have seen the previous post about adding sound, but it's way too bulky for me.

M

[ONE_HUMAN]

Me too! Thanks for posting a list of your changes to this mod. I would love to know how you managed to put your sound in. I have seen the previous post about adding sound, but it's way too bulky for me.

M

Sorry I didn't reply sooner. Did the previous post about adding sound involve using SoundManager? There is an AJAX Chat, which I've also added to my page, and I used SoundManager to add sound to that, and it was rather easy. Not sure how easy it would be to use with AJAX Shoutbox though.

I've done a lot of edits and customizations to my AJAX Shoutbox found here but I think the following covers what I did to add sound.

First of all, find a sound you like. I think the one I'm using is pretty good. You can get it here: http://test.chatnpix.com/templates/fisu ... alloon.mp3 (Mouse over and look at Status Bar to see complete path.)

Put it wherever you want, but the location of the file will of course have to match the path in the InsertSound.js file you are going to create. The InsertSound.js file is the external file that is going to be used to call the MP3 file so that no ActiveX dialog or prompt comes up in Internet Explorer. So, open Notepad and paste the following code in (adjusting the path of the MP3 file according to your needs):

Code: Select all

function InsertSound()
{
  document.write('<embed type="audio/x-wav" src="templates/fisubsilver/balloon.mp3" height=0 width=0 hidden="true" autostart="true" loop="false">');
}

Save this file as InsertSound.js. I've put it in the "templates" folder. The location is important because you are going to reference that file at the top of the shoutbox_js.tpl files. Like this:

Code: Select all

<script type="text/javascript" src="templates/InsertSound.js"></script>

I say "files" plural, because I've replaced the single shoutbox_js.tpl file with two files. I did this because of the differences between how Internet Explorer and Firefox handle the embedded sound. So, I have shoutbox_jsIE.tpl and shoutbox_jsFF.tpl. Basically just make copies of the existing shoutbox_js.tpl file and rename them.

So, if you open both of these new files with Notepad and paste the line in from above (with the path matching your setup), this is what you should see:

Code: Select all

<!-- BEGIN view_shoutbox_js -->

<script type="text/javascript" src="templates/fat.js"></script>
<script type="text/javascript" src="templates/InsertSound.js"></script>

Like I said, adjust your path accordingly depending on where you've put the InsertSound.js file. The fat.js file is the one that does the orange fade.

Okay, so now to edit these two files. I'm going to include the whole section that I edited which not only adds sound, but also changes the [DELETE] that an Admin sees to just [D] (to save space), and changes the size and colour of the date.

OPEN

shoutbox_jsFF.tpl

FIND

Code: Select all

  // Append a text node to the cell
	newCell.innerHTML = '<b class="postbody">' + liName + '</b>';
	<!-- BEGIN user_is_admin -->
	newCell.innerHTML = newCell.innerHTML+ '<a href="#" onclick="removeShout(\'outputList\', this.parentNode.parentNode.rowIndex, '+liId+')" class="postlink postbody">[ {L_DELETE} ]</a>';
	<!-- END user_is_admin -->
	newCell.innerHTML = newCell.innerHTML + '<br /><i class="postbody">' + liTime + '</i>';
	
	newCell2.innerHTML = '<span class="postbody">' + liText + '</span>';

REPLACE WITH

Code: Select all

  // Append a text node to the cell
	newCell.innerHTML = '<b class="postbodyshout">' + liName + '</b>';
	<!-- BEGIN user_is_admin -->
	newCell.innerHTML = newCell.innerHTML + '<a href="#" onclick="removeShout(\'outputList\', this.parentNode.parentNode.rowIndex, '+liId+')" class="postlink postbodyshout"> [D]</a>';
	<!-- END user_is_admin -->
	newCell.innerHTML = newCell.innerHTML + '<br /><i class="postbodyshoutdate" style="color:#FF8000">' + liTime + '</i>';
	// Audio effect
	if(last_id != -1)
	{
	newCell2.innerHTML = '<embed type="audio/x-wav" src="templates/fisubsilver/balloon.mp3" height=0 width=0 hidden="true" autostart="true" loop="false">' + '<span class="postbodyshout">' + liText + '</span>';
	}
	else
	{
	newCell2.innerHTML = '<span class="postbodyshout">' + liText + '</span>';
	}

OPEN

shoutbox_jsIE.tpl

FIND

Code: Select all

  // Append a text node to the cell
	newCell.innerHTML = '<b class="postbody">' + liName + '</b>';
	<!-- BEGIN user_is_admin -->
	newCell.innerHTML = newCell.innerHTML+ '<a href="#" onclick="removeShout(\'outputList\', this.parentNode.parentNode.rowIndex, '+liId+')" class="postlink postbody">[ {L_DELETE} ]</a>';
	<!-- END user_is_admin -->
	newCell.innerHTML = newCell.innerHTML + '<br /><i class="postbody">' + liTime + '</i>';
	
	newCell2.innerHTML = '<span class="postbody">' + liText + '</span>';

REPLACE WITH

Code: Select all

  // Append a text node to the cell
	newCell.innerHTML = '<b class="postbodyshout">' + liName + '</b>';
	<!-- BEGIN user_is_admin -->
	newCell.innerHTML = newCell.innerHTML + '<a href="#" onclick="removeShout(\'outputList\', this.parentNode.parentNode.rowIndex, '+liId+')" class="postlink postbodyshout"> [D]</a>';
	<!-- END user_is_admin -->
	newCell.innerHTML = newCell.innerHTML + '<br /><i class="postbodyshoutdate" style="color:#FF8000">' + liTime + '</i>';
	// Audio effect
	if(last_id != -1)
	{
	newCell2.innerHTML = '<span class="hideFromScreen" style="display:none">' + 'InsertSound()' + '</span>' + '<bgsound src="templates/fisubsilver/balloon.mp3" height=0 width=0 hidden="true" autostart="true" loop="false">' + '<span class="postbodyshout">' + liText + '</span>';
	}
	else
	{
	newCell2.innerHTML = '<span class="postbodyshout">' + liText + '</span>';
	}

Because I've created two shoutbox_js.tpl files, I also had to create two shoutbox.php files. Once again make copies of the original and name the new files shoutboxFF.php and shoutboxIE.php.

OPEN

shoutboxFF.php

FIND

Code: Select all

//
// Load templates
//
$template->set_filenames(array(
	'shoutbox' => 'shoutbox_body.tpl',
	'shoutbox_js' => 'shoutbox_js.tpl'));

REPLACE WITH

Code: Select all

//
// Load templates
//
$template->set_filenames(array(
	'shoutbox' => 'shoutbox_bodyFF.tpl',
	'shoutbox_js' => 'shoutbox_jsFF.tpl'));

OPEN

shoutboxIE.php

FIND

Code: Select all

//
// Load templates
//
$template->set_filenames(array(
	'shoutbox' => 'shoutbox_body.tpl',
	'shoutbox_js' => 'shoutbox_js.tpl'));

REPLACE WITH

Code: Select all

//
// Load templates
//
$template->set_filenames(array(
	'shoutbox' => 'shoutbox_bodyIE.tpl',
	'shoutbox_js' => 'shoutbox_jsIE.tpl'));

Make copies of shoutbox_body.tpl and name them shoutbox_bodyFF.tpl and shoutbox_bodyIE.tpl. No edits have to be made to these files.

Open your CSS file and add the following. In my case it's fisubsilver.css.

Code: Select all

/* Used for Ajax Shoutbox
.postbodyshout{font-size:13px}
.postbodyshoutdate{font-size:10px}

Finally, on the Index page I created links that either opened a pop-up Shoutbox window with sound, or led to a Shoutbox page without sound, where you could also see how many chatters there are and check out the Archive. I had to create conditional statements that would pop up the correct window depending on which browser you were using -- shoutboxIE.php for Internet Explorer and shoutboxFF.php for Firefox. Here's the code I used to do that:

Code: Select all

<table width="100%" cellpadding="3" cellspacing="3">
  <tr>
    <td width="100%" align="center">

	<div>

	<!--[if IE]>

	<div id="shout"><a onclick="window.open('shoutboxIE.php', '_blank', 'HEIGHT=435,WIDTH=710,resizable=yes,scrollbars=no');return false;" target="_blank" class="nav"  style="color:#006699" onmouseover="this.style.color='#dd6900'; this.style.cursor='pointer'" onmouseout="this.style.color='#006699'">[ Shoutbox With Sound ]</a><span style="color:#dd6900">&nbsp; &#8226; &nbsp;</span><a href="chat.php" class="nav">[ Shoutbox Without Sound ]</a><br /></div>

	<![endif]-->
	<!--[if !IE]>-->

	<div id="shout"><a onclick="window.open('shoutboxFF.php', '_blank', 'HEIGHT=435,WIDTH=710,resizable=yes,scrollbars=no');return false;" target="_blank" class="nav"  style="color:#006699" onmouseover="this.style.color='#dd6900'; this.style.cursor='pointer'" onmouseout="this.style.color='#006699'">[ Shoutbox With Sound ]</a><span style="color:#dd6900">&nbsp; &#8226; &nbsp;</span><a href="chat.php" class="nav">[ Shoutbox Without Sound ]</a><br /></div>

	<!--<![endif]-->
   
	</div>

    </td>
  </tr>
</table>

Of course you can adjust that to suit your needs.

Well, I think that about covers it. Hopefully I didn't leave anything out. Other than what I mentioned here for the shoutbox.php, shoutbox_body.tpl, and shoutbox_js.tpl files, you still have to do what is outlined in the install.mod.

Here's the link again if you need to see a Demo: http://test.chatnpix.com

[Kinfule]

Well, I can finally be back, It might take some time to read the threads an be updated with requests and I hope to port my mods to PhpBB3 sooner or later.

About your modification for the sounds, If I'm not wrong you are creating a new sound (embed) element for each time you need the sound played. Doesn't that carry any problems, like memory leak or something like that? I might integrate the sound stuff in the mod or like a contrib but I was rather thinking in a flash file

[DarkDvr]

Great mod, installed and works like a charm =) Looking forward to your updates.

Two questions though - I was hoping you can help me out..

1. I run a russian forum, and user names in the chat are displayed as gibberish, clearly a charset problem. Where can I set chatbox to "understand" UTF-8?

2. How can I use smilies in the chat? It's in the features list, but is it implemented yet?

thanks and keep up the good work!