...

View Full Version : Putting a floating chat on my site



micstarz
05-16-2009, 09:07 AM
Hi CodingForums! This is my first time visiting here but here's my question.

I own a website and a forum and am in a network with a few other forums. I wanted to add a floating chat bar (just like the one on Facebook or Gmail) where the users of the forum could chat while browsing the forum. Is there a free service that can provide this? I thought about using Zopim, which is actually quite close to what I want, with a floating minimizable chatbox on the bottom right corner, but it's not really a chatroom but more of a staff-to-customer application where the staff answers from elsewhere.

Something that works as a floating toolbar with a minimizable chat room would be great. I've attempted to create my own chatroom and then float it on the site using javascript but it isn't working too well...

Any ideas?

bdl
05-16-2009, 03:51 PM
I think ajaxim (http://www.ajaxim.com/) would probably do what you want; you'd need to customize the script a bit to fit it into your page(s), but it's a nice floatable IM application.

micstarz
05-17-2009, 10:15 AM
I think ajaxim (http://www.ajaxim.com/) would probably do what you want; you'd need to customize the script a bit to fit it into your page(s), but it's a nice floatable IM application.

Thanks, but it looks quite complicated...

Here is the code I patched together. How can I remove the excess black border around it and also make the two images become included in the clickable?


<script language='javascript'>
NS_ActualOpen=window.open;
function NS_NullWindow(){this.window;}
function
NS_NewOpen(url,nam,atr){return(new NS_NullWindow());}
window.open=NS_NewOpen;
</script>

<div id="fixeddiv" style="
position:absolute;
width:230;height:380;right:0px;bottom:0px;
background:#000000;">
<script type="text/javascript">
<!--
var aPrefix = 'pr';

function getCurrentState(mID) {
// returnvalues: 1 (closed), 2 (opened)
return document.cookie.substr(document.cookie.indexOf(mID+'=') + mID.length +1, 1);
}

function initMenu(mID) {
// make the header clickable, assign an ID
var kids = document.getElementById(mID).childNodes;
for (var i = 0; i < kids.length; i++) {
if (kids[i].className == 'header') {
kids[i].onclick = toggleMenu;
kids[i].id = aPrefix + mID;
}
}
// show or hide the menu
showMenu(mID);
}

function showMenu(mID) {
var currentState = getCurrentState(mID);
document.getElementById(aPrefix+mID).title = (currentState == 1? 'show' : 'hide') + ' this menu';
document.getElementById(aPrefix+mID).style.cursor = 'pointer';
var kids = document.getElementById(mID).childNodes;
for (var i = 0; i < kids.length; i++) {
if (kids[i].tagName == 'LI' && kids[i].className!= 'header') {
kids[i].style.display = currentState == 1? 'none' : 'block';
}
}
}

function toggleMenu(e) {
if (window.event) e = window.event;
var mID = e.srcElement? e.srcElement.id : e.target.id;
mID = mID.substr(aPrefix.length);
// write the cookie
var oneyear = new Date(); oneyear.setFullYear(oneyear.getFullYear() + 1);
document.cookie = mID + '=' + (getCurrentState(mID) == 1? 2 : 1) + '; expires=' + oneyear.toGMTString() + '; path=/';
// show or hide the menu
showMenu(mID);
}
// -->
</script>

<ul id="menu2">
<li class="header"><img src="http://209.85.62.24/static/1/collapse.png"><img src="http://209.85.62.24/static/1/expand.png">Show/Hide Chat</li>
<li><div style="width:400px"><style>.mcrmeebo { display: block; background:url("http://widget.meebo.com/r.gif") no-repeat top

right; } .mcrmeebo:hover { background:url("http://widget.meebo.com/ro.gif") no-repeat top right; } </style><object

width="400" height="380"><param name="movie" value="http://widget.meebo.com/mcr.swf?id=DxeNTmkOrD"></param><embed

src="http://widget.meebo.com/mcr.swf?id=DxeNTmkOrD" type="application/x-shockwave-flash" width="400" height="380"

/></object></div></li>
</ul>
<script type="text/javascript">initMenu('menu2');</script>

</div>
<script type="text/javascript"><!--
/* Script by: www.jtricks.com
* Version: 20071127
* Latest version:
* www.jtricks.com/javascript/navigation/fixed_menu.html
*/
fixedMenuId = 'fixeddiv';

var fixedMenu =
{
hasInner: typeof(window.innerWidth) == 'number',
hasElement: document.documentElement != null
&& document.documentElement.clientWidth,

menu: document.getElementById
? document.getElementById(fixedMenuId)
: document.all
? document.all[fixedMenuId]
: document.layers[fixedMenuId]
};

fixedMenu.computeShifts = function()
{
fixedMenu.shiftX = fixedMenu.hasInner
? pageXOffset
: fixedMenu.hasElement
? document.documentElement.scrollLeft
: document.body.scrollLeft;
if (fixedMenu.targetLeft > 0)
fixedMenu.shiftX += fixedMenu.targetLeft;
else
{
fixedMenu.shiftX +=
(fixedMenu.hasElement
? document.documentElement.clientWidth
: fixedMenu.hasInner
? window.innerWidth - 0
: document.body.clientWidth)
- fixedMenu.targetRight
- fixedMenu.menu.offsetWidth;
}

fixedMenu.shiftY = fixedMenu.hasInner
? pageYOffset
: fixedMenu.hasElement
? document.documentElement.scrollTop
: document.body.scrollTop;
if (fixedMenu.targetTop > 0)
fixedMenu.shiftY += fixedMenu.targetTop;
else
{
fixedMenu.shiftY +=
(fixedMenu.hasElement
? document.documentElement.clientHeight
: fixedMenu.hasInner
? window.innerHeight - 0
: document.body.clientHeight)
- fixedMenu.targetBottom
- fixedMenu.menu.offsetHeight;
}
};

fixedMenu.moveMenu = function()
{
fixedMenu.computeShifts();

if (fixedMenu.currentX != fixedMenu.shiftX
|| fixedMenu.currentY != fixedMenu.shiftY)
{
fixedMenu.currentX = fixedMenu.shiftX;
fixedMenu.currentY = fixedMenu.shiftY;

if (document.layers)
{
fixedMenu.menu.left = fixedMenu.currentX;
fixedMenu.menu.top = fixedMenu.currentY;
}
else
{
fixedMenu.menu.style.left = fixedMenu.currentX + 'px';
fixedMenu.menu.style.top = fixedMenu.currentY + 'px';
}
}

fixedMenu.menu.style.right = '';
fixedMenu.menu.style.bottom = '';
};

fixedMenu.floatMenu = function()
{
fixedMenu.moveMenu();
setTimeout('fixedMenu.floatMenu()', 0);
};

// addEvent designed by Aaron Moore
fixedMenu.addEvent = function(element, listener, handler)
{
if(typeof element[listener] != 'function' ||
typeof element[listener + '_num'] == 'undefined')
{
element[listener + '_num'] = 0;
if (typeof element[listener] == 'function')
{
element[listener + 0] = element[listener];
element[listener + '_num']++;
}
element[listener] = function(e)
{
var r = true;
e = (e) ? e : window.event;
for(var i = 0; i < element[listener + '_num']; i++)
if(element[listener + i](e) === false)
r = false;
return r;
}
}

//if handler is not already stored, assign it
for(var i = 0; i < element[listener + '_num']; i++)
if(element[listener + i] == handler)
return;
element[listener + element[listener + '_num']] = handler;
element[listener + '_num']++;
};

fixedMenu.supportsFixed = function()
{
var testDiv = document.createElement("div");
testDiv.id = "testingPositionFixed";
testDiv.style.position = "fixed";
testDiv.style.top = "0px";
testDiv.style.right = "0px";
document.body.appendChild(testDiv);
var offset = 1;
if (typeof testDiv.offsetTop == "number"
&& testDiv.offsetTop != null
&& testDiv.offsetTop != "undefined")
{
offset = parseInt(testDiv.offsetTop);
}
if (offset == 0)
{
return true;
}

return false;
};

fixedMenu.init = function()
{
if (fixedMenu.supportsFixed())
fixedMenu.menu.style.position = "fixed";
else
{
var ob =
document.layers
? fixedMenu.menu
: fixedMenu.menu.style;

fixedMenu.targetLeft = parseInt(ob.left);
fixedMenu.targetTop = parseInt(ob.top);
fixedMenu.targetRight = parseInt(ob.right);
fixedMenu.targetBottom = parseInt(ob.bottom);

if (document.layers)
{
menu.left = 0;
menu.top = 0;
}
fixedMenu.addEvent(window, 'onscroll', fixedMenu.moveMenu);
fixedMenu.floatMenu();
}
};

fixedMenu.addEvent(window, 'onload', fixedMenu.init);
//--></script>
<script type="text/javascript"><!--
/* Script by: www.jtricks.com
* Version: 20080801
* Latest version:
* www.jtricks.com/javascript/navigation/floating_close.html
*/
floatingMenu.hide = function()
{
floatingMenu.menu.style.display='none';
return false;
}

floatingMenu.show = function()
{
floatingMenu.menu.style.display='block';
return false;
}
//--></script>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum