Free Floating "chat info" header

[Chris Boulton]

Quite hard to describe, but I'll do my best.

One of my annoyances with LiveResponse chats is that the info about who the chat is with is right at the top of the chat session - and it becomes quite annoying to scroll back up just to find that info.

What this modification does is "floats" that info at the top of the chat session so it's very easy for you to access/look at any time no matter the scroll position of the session.

Screenshot:


Instructions:

1. Open up themes/admin_default/winappchatcontentframe.tpl

Find:

<{include file="header.tpl"}>

Add under:

<style type="text/css">
#chat_info {
	left: expression((ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft) + 'px' );
	top: expression((ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) + 'px' );
	position: absolute;
}

#buffer {
	padding-top: expression(document.getElementById('chat_info').offsetHeight);
}
</style>

Find:

<div id="buffer" style="WIDTH: 100%; HEIGHT: 100%;"><table width='100%'  border='0' cellspacing='0' cellpadding='1'><tr><td bgcolor='#CCCCCC'><table width='100%'  border='0' cellspacing='0' cellpadding='3'><tr><td bgcolor='#F7F7EF'><font face='Verdana, Arial, Helvetica' size='2'><div style='FONT-SIZE: 11px; COLOR: #333333; FONT-FAMILY: Verdana, Arial;'><b><{$language[fullname]}>: </b><{$fullname}><br/><b><{$language[email]}>: </b><{$email}><br/><b><{$language[department]}>: </b><{$department}></span></font></td></tr></table></td></tr></table><br /></div>

Replace with:

<div id="chat_info" >
<table width='100%'  border='0' cellspacing='0' cellpadding='1'><tr><td bgcolor='#CCCCCC'><table width='100%'  border='0' cellspacing='0' cellpadding='3'><tr><td bgcolor='#F7F7EF'><font face='Verdana, Arial, Helvetica' size='2'><div style='FONT-SIZE: 11px; COLOR: #333333; FONT-FAMILY: Verdana, Arial;'><b><{$language[fullname]}>: </b><{$fullname}><br/><b><{$language[email]}>: </b><{$email}><br/><b><{$language[department]}>: </b><{$department}></span></font></td></tr></table></td></tr></table><br />
</div>
<div id="buffer" style="WIDTH: 100%; HEIGHT: 100%;">
</div>

Ignore the expression code. As IE is a terrible browser and LiveResponse makes use of it, certain dodgy "hacks" are required to get the chat info statically positioned.

[craigbrass]

Nice modification Chris. Thanks for sharing!

[Evelator]

This looks pretty cool, though, i cant get it to work.

[Chris Boulton]

What happens when a chat window opens?

[craigbrass]

A screenshot of what does happen would be handy also.

[esteban]

Awesome! i allways wanted something like that.


Thanks!

[Racked Hosting]

Very useful mod! Almost works for me except that the first 3-and-a-half lines just don't show up. check attached.

[Chris Boulton]

Uhh, it shouldn't - I guess it could be to you possibly running a different version of IE on your machine?

In any case - can you find:

	margin-top: expression(document.getElementById('chat_info').offsetHeight);

And replace it with:

	padding-top: expression(document.getElementById('chat_info').offsetHeight);

This was specifically one of the problems I encountered and fixed before I released - so it should have worked.

Let me know if those changes do.

Chris

[Racked Hosting]

that worked, thanks!