3.04 Easy Iframe integration of Blueimp AJAX

A place for MOD Authors to post and receive feedback on MODs still in development. No MODs within this forum should be used within a live environment!
Scam Warning
Lugnut123
Registered User
Posts: 2
Joined: Sun Apr 19, 2009 6:02 pm

3.04 Easy Iframe integration of Blueimp AJAX

Post by Lugnut123 »

I looked at a couple of chat programs, and I don't like the new AJAX Mod 2.0. It is very limited in its capabilities, and I think http://www.blueimp.net/ajax offers more in it version. (client-end customizable skin, language selection, multiple options for clients, private rooms, etc.)

I had the hardest time integrating this into the new PHPBB3, not withstanding my first time at this sort of thing. Even the instructions given on the blueimp site were not working and too complicated. So, I found a way to make this chat show on the board, and be able to move it anywhere relatively with ease. Here are the instructions:

1. Go to https://blueimp.net/ajax/ The download link is towards the bottom.
2. Follow all the instructions for installation.
3. Test the program by going (yoursitehere or root)/chat(this is where the index.php is located)/index.php
4. If it works then a chat page needs to be made.
4a. On your server go to root/styles/prosilver/templates
4b. Make a copy of "confirm_body.html" and name the new copy "chat_body.html".
4c. Code edit "chat_body.html" by deleting everything written in it and inserting the following:

<META HTTP-EQUIV="" CONTENT="5; URL=../../../chat/index.php">
<html>
<head>PHP in HTML<head>
<body>
<h2><font face="arial" color="green"></font></h2><br><br>
<Iframe src="../../../chat/index.php" width="100%" height="400"></Iframe>
</body>
</html>

4d. Save the changes and close the file.

5. Next stay in the same folder and edit "index_body.html" and look for the following line:

<!-- INCLUDE forumlist_body.html -->

ADD BEFORE, the following:

<!-- IF S_USER_LOGGED_IN -->
<!-- INCLUDE chat_body.html -->
<!-- ENDIF -->

6. Save the changes and close the file.
7. Clear the cache of the board and reload the main forum page.
6. This completes a basic integration of the Blueimp AJAX shoutbox into PHPBB 3.04.


To move the shoutbox on the page there are two types of areas on forum page: DYNAMIC AND STAGNANT.
The Header and Footer are the stagnant areas, which means they appear no matter what forum or sub-forum of your board.
The Body of the forum page is the area that changes when you jump from one forum to another. The current location of the shoutbox in these instructions is in the Body of the Main forum page. If someone jumps to a subforum they won't be able to see the chat until they go back to the main page.

On my forum, the shoutbox is Stagnant in the Header so it is seen no matter what forum someone visits.
To change the location to where I have use the code from STEP 5 that you inserted.

1. In the same "Templates" folder we have been working in, edit "overall_header.html"
2. Look for the following linestowards the bottom:

<a name="start_here"></a>
<div id="page-body">

3. ADD BEFORE, the code from step 5.
4. Save and close the file
5. Clear the cache and refresh the forum page. This should place the shoutbox right after the "User Control Panel" and before the date/time section.

If you can understand where the different sections are in the .html files, you just place the code in step 5 where you would like it.

For anyone who can package this post better, feel free to do so.
superj707
Registered User
Posts: 1136
Joined: Thu Feb 26, 2009 12:20 am

Re: 3.04 Easy Iframe integration of Blueimp AJAX

Post by superj707 »

this is a very good iframe integration mod.
ZRPG.net
Registered User
Posts: 21
Joined: Wed Apr 22, 2009 7:37 am
Location: Being Admins on an RP Board. Lol

Re: 3.04 Easy Iframe integration of Blueimp AJAX

Post by ZRPG.net »

Very excellent! I have been trying to integrate the shoutbox for a long while now on one of my other boards, and had no luck with their instructions. This works like a charm however.
mjmyhero
Registered User
Posts: 7
Joined: Thu Jul 30, 2009 10:12 pm

Re: 3.04 Easy Iframe integration of Blueimp AJAX

Post by mjmyhero »

I don't know how to thank you, you saved me a lot of time :D
I have made the form more compact, here is position.css

BEFORE:
Image
AFTER:
Image

Code: Select all

/*
 * @package AJAX_Chat
 * @author Sebastian Tschan
 * @copyright (c) Sebastian Tschan
 * @license GNU Affero General Public License
 * @link https://blueimp.net/ajax/
 */


/*
 * Positioning
 */

#loginContent {
	position:absolute;
	width:100%;
	height:100%;
}
#loginContent #loginHeadlineContainer {
	margin-left:100px;
	margin-right:100px;
	margin-top:10px;
}
#loginContent #loginFormContainer {
	margin-left:100px;
	margin-right:100px;
}
#loginContent #loginFormContainer div {
	margin-bottom:7px;
}
#loginContent #loginRegisteredUsers {
    padding-top:5px;
}
#loginContent #errorContainer {
	margin-left:100px;
	margin-right:100px;
}
#loginContent #copyright {
	margin-top:20px;
	margin-left:100px;
	margin-right:100px;
}

#content {
	position:absolute;
	width:100%;
	height:100%;
}
#content #copyright {
	position:absolute;
	right:1px;
	bottom:0px;
}
#content #headlineContainer {
	position:absolute;
	right:60px;
	top:5px;
}
#content #logoutChannelContainer {
	position:absolute;
	left:20px;
	top:5px;
}
#content #statusIconContainer {
	position:absolute;
	right:20px;
	top:5px;
	width: 22px;
	height: 22px;
}
#content #chatList {
	position:absolute;
	left:20px;
	right:230px;
	top:40px;
	bottom:100px;
	overflow:auto;
}
#content #inputFieldContainer {
	position:absolute;
	left:20px;
	right:20px;
	bottom:45px;
	padding-right:4px;
}
#content #submitButtonContainer {
	position:absolute;
	right:20px;
	bottom:10px;
}
#content #onlineListContainer {
	position:absolute;
	right:20px;
	top:40px;
	width:200px;
	bottom:100px;
}
#content #helpContainer {
	position:absolute;
	right:20px;
	top:40px;
	width:360px;
	bottom:100px;
}
#content #settingsContainer {
	position:absolute;
	right:20px;
	top:40px;
	width:360px;
	bottom:100px;
}
#content #bbCodeContainer {
	position:absolute;
	left:450px;
	bottom:10px;
	padding:3px;
}
#content #colorCodesContainer {
	position:absolute;
	left:20px;
	bottom:8px;
	padding:3px;
	z-index:1;
}
#content #emoticonsContainer {
	position:absolute;
	left:20px;
	bottom:10px;
	padding:3px;
}
#content #optionsContainer {
	position:absolute;
	left:680px;
	top:5px;
	padding:3px;
	padding-right:0px;
}
#content #bbCodeContainer input {
	padding-left:4px;
	padding-right:4px;
}
#content #colorCodesContainer a {
	display:block;
	float:left;
	width:20px;
	height:20px;
}
#content #optionsContainer input {
    vertical-align:middle;
}
#content #optionsContainer input.button {
    width:22px;
	height:22px;
}
#content #emoticonsContainer a {
	margin-left:1px;
	margin-right:1px;
}
#content #emoticonsContainer img {
	vertical-align:middle;
	margin-bottom:2px;
}
#content #headlineContainer h1 {
	margin-left:auto;
	margin-top:12px;
}
#content #chatList div {
	padding-left:10px;
	padding-top:2px;
	padding-right:10px;
	padding-bottom:2px;
}
#content #chatList img {
	vertical-align:middle;
	margin-bottom:2px;
}
#content #chatList cite {
	margin-right:5px;
}
#content #chatList .bbCodeImage {
	vertical-align:top;
	overflow:auto;
	margin:5px;
}
#content #chatList .delete {
	display:block;
	float:right;
	width:10px;
	height:10px;
	margin-top:2px;
	padding-left:5px;
}
#content #inputFieldContainer #inputField {
	width:100%;
	height:40px;
}
#content #onlineListContainer h3, #content #helpContainer h3, #content #settingsContainer h3 {
	height:30px;
	padding-left:10px;
	padding-top:4px;
	padding-right:10px;
	padding-bottom:4px;
	margin:0px;
	text-align:center;
}
#content #onlineListContainer #onlineList, #content #helpContainer #helpList, #content #settingsContainer #settingsList {
	position:absolute;
	left:0px;
	right:0px;
	top:25px;
	bottom:0px;
	overflow:auto;
}
#content #onlineListContainer #onlineList div {
	padding-left:10px;
	padding-top:2px;
	padding-right:10px;
	padding-bottom:2px;
}
#content #onlineListContainer #onlineList a {
	display:block;
}
#content #onlineListContainer #onlineList ul {
	margin-left:0px;
	margin-top:5px;
	margin-bottom:5px;
	padding-left:20px;
}
#content #helpContainer #helpList td, #content #settingsContainer #settingsList td {
	padding-left:10px;
	padding-top:4px;
	padding-right:10px;
	padding-bottom:4px;
	vertical-align:top;
}
#content #settingsContainer #settingsList td {
	vertical-align:middle;
}
#content #settingsContainer #settingsList td.setting {
	width:115px;
}
#content #settingsContainer #settingsList input.text {
	width:100px;
}
#content #settingsContainer #settingsList select.left {
	text-align:right;
}
#content #settingsContainer #settingsList input.button {
    width:22px;
	height:22px;
	vertical-align:middle;
	margin-bottom:2px;
}
redhawk1955
Registered User
Posts: 11
Joined: Fri Oct 23, 2009 1:58 pm

Re: 3.04 Easy Iframe integration of Blueimp AJAX

Post by redhawk1955 »

I tried this out on a different style (business_board) and of course it didn't work. Only thing I can do is to create a link to the chat directory on my main forums page. I've tried everything to try to get the link where you put yours (header) but when I try, I lose everything on the page except header,footer and the login/logout link.

Lost on thisl
Lugnut123
Registered User
Posts: 2
Joined: Sun Apr 19, 2009 6:02 pm

Re: 3.04 Easy Iframe integration of Blueimp AJAX

Post by Lugnut123 »

Hi Redhawk,

If you are still around. Let me know. I haven't messed with this mod or phpBB in quite few months and don't know what exactly could be the problem. I'm guessing that it has to do with the referencing of the link on your page. phpBB might have changed this a little.
User avatar
zake black
Registered User
Posts: 694
Joined: Fri Jan 23, 2009 8:34 am
Location: Milton Keynes (UK)

Re: 3.04 Easy Iframe integration of Blueimp AJAX

Post by zake black »

Anyone offer board demo with this intergrated? would love to see how it fits into the board.. or screeny's?
redhawk1955
Registered User
Posts: 11
Joined: Fri Oct 23, 2009 1:58 pm

Re: 3.04 Easy Iframe integration of Blueimp AJAX

Post by redhawk1955 »

Yep still around. I've switched the style from the "business board" and gone to prosilve-se. I've made some progress with this. Have Ajax chat icon link that opens the chat, as well as email registration/login poputp links. Have them in the header so the links are retained on all pages. You can see at https://redhawkfriends.com. BTW, IE warning on the digital cert is because I have created self-signed. This is about free, right? :lol:
artur310
Registered User
Posts: 1
Joined: Wed Jan 06, 2010 6:20 pm

Re: 3.04 Easy Iframe integration of Blueimp AJAX

Post by artur310 »

I have a problem. It doesn't work on my forum. Is this working on phpBB3 3.0.6 ? and what should be here
Lugnut123 wrote:<META HTTP-EQUIV="" CONTENT="5; URL=../../../chat/index.php">
<html>
<head>PHP in HTML<head>
<body>
<h2><font face="arial" color="green"></font></h2><br><br>
<Iframe src="../../../chat/index.php" width="100%" height="400"></Iframe>
</body>
</html>


it should be that it is or maybe like this

Code: Select all

http://xyz.cba.pl/forum/chat/index.php
It's my first forum and my first web page, i hope someone help me.this shoutbox is a reason why I start create my forum.
Peter77sx
Registered User
Posts: 3260
Joined: Wed Nov 09, 2005 2:51 pm

Re: 3.04 Easy Iframe integration of Blueimp AJAX

Post by Peter77sx »

There is actually some people who work on this Blueimp chat + phpbb3 over @ Blueimp's SourceForge dev Forums... no IFRAMES. :)
murdmon
Registered User
Posts: 189
Joined: Thu Sep 24, 2009 7:56 am

Re: 3.04 Easy Iframe integration of Blueimp AJAX

Post by murdmon »

Can guest view and use this mod? How to do this?
teknoge3k
Registered User
Posts: 3
Joined: Mon Aug 27, 2012 1:33 am

Re: 3.04 Easy Iframe integration of Blueimp AJAX

Post by teknoge3k »

I am using PHPBB 3.0.11, it's self hosted and I have the Ajax Chat by blueimp installed on my forums. Now please excuse me, I am not too fluent with PHPBB or installing mods or anything like that, so bare with me.

When someone loads my site (acctalk.org), it automatically scrolls to the very bottom of the page. This happens on EVERY forum that you go to, that the chat mod is installed on. The chat box itself is just a simple html file though, and doesn't have any coding within the html that would make the page scroll to the bottom.
Is there any way to keep the page from scrolling to the bottom, or some sort of code that I could include in the source to force it to stay at the top?

Thanks in advance, and I apologize if I posted this in the wrong section.
5hocK
Registered User
Posts: 3147
Joined: Wed Nov 23, 2011 7:00 pm
Location: UK

Re: 3.04 Easy Iframe integration of Blueimp AJAX

Post by 5hocK »

What happens if you correct your html? For instance you have an opening <h1> tag that isn't closed, closing tags the wrong way round (</font color></b> should be </b></font color>) - A closing </center> tag that isn't open. Won't cure your scrolling but atleast gives you a fighting chance of working it out.
teknoge3k
Registered User
Posts: 3
Joined: Mon Aug 27, 2012 1:33 am

Re: 3.04 Easy Iframe integration of Blueimp AJAX

Post by teknoge3k »

5hocK wrote:What happens if you correct your html? For instance you have an opening <h1> tag that isn't closed, closing tags the wrong way round (</font color></b> should be </b></font color>) - A closing </center> tag that isn't open. Won't cure your scrolling but atleast gives you a fighting chance of working it out.
I am not sure where it's messed up at. However, I went in and added each section of code back one bit at a time and checked to see which bit may be making it scroll down, and it didn't scroll down on any of the code that I added, until I added this:

Code: Select all

<IFRAME SRC="http://www.acctalk.org/chat/"; WIDTH=1000 HEIGHT=400 FRAMEBORDER=1 

SCROLLING=AUTO></IFRAME>
So that tells me, that's the culprit in making the page scroll to the bottom when you load it. I don't know what to fix within that tag, it appears to be correct to me.
Animatic
Registered User
Posts: 2
Joined: Sat Nov 22, 2014 11:00 pm

Re: 3.04 Easy Iframe integration of Blueimp AJAX

Post by Animatic »

I am having the same issue and from what I have read it looks like the issue is the when the iframe loads it focuses on the text area. I have tried several snippets from other posts to attempt to redirect focus but I'm starting to think maybe its something to do with the ajax chat file. Would love to see this resolved.

Return to “[3.0.x] MODs in Development”