I wanted my shoutbox to scroll automatically, just like the one on the site I provided. The one I worked with is far from being integrated into geeklog, but it works for what I need.
[*2] It's a typical shoutbox, with smiley support. It posts the data into a scrollable iframe, not automatic scrolling. So now my task was to make it automatically scrolling. This uses flat files, not SQL, so there is a downside, but it's alright. I might try to get another one to work, more geeklog friendly.
I configured the phpshout to where I wanted.
Now, to get it to scroll, I took the code from "automatic scrolling iframe" from dynamicdrive.com found here
Now I needed to modify the shoutbox files to do what I wanted. I did a few things. One, I got rid of the smileys, because they took up a lot of unneeded space. Maybe I'll bring them back later on a expanding menu or something. I also wanted to take the input forms off of the scrolling page, and have them fixed at the bottom of the block, so just the messages scroll. Here is everything I modified.
First, I had to take the scrolling code from the "external.htm" iframe provided by dynamic drive and apply it to my inc_forum.php file (the iframe for the phpshout)
Text Formatted Code
<?
ob_start();
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Shout Box</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
function addsmiley(symbol) {
document.postshout.msg.value += symbol;
document.postshout.msg.focus();
}
<!-- Begin
function popUp(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=1,width=300,height=500');");
}
</script>
<link href="default.css" rel="stylesheet" type="text/css">
</head>
<body class="phpshout_body">
<div id="datacontainer" style="position:absolute;left:1px;top:10px;width:100%" onMouseover="scrollspeed=0" onMouseout="scrollspeed=cache">
<table align="center" class="phpshout_table">
<tr>
<td class="phpshout_form"><?
include "config.php";
include "functions.php";
banned_user();
if (isset($_POST["Submit"])) {
// Remove any tabs
$_POST["name"] = str_replace("\t"," ",$_POST["name"]);
$_POST["msg"] = str_replace("\t"," ",$_POST["msg"]);
// Make name and string lower case for bad language filter
$_POST["name"] = strtolower(stripslashes(trim(htmlspecialchars($_POST["name"]))));
$_POST["msg"] = strtolower(stripslashes(trim(htmlspecialchars($_POST["msg"]))));
if (!file_exists("messages.txt")) {
echo "<p class=\"error\">Messages.txt doesn't exsist. Please create a file call messages.txt on your server</p>";
} else if ($_POST["name"] == "name" || $_POST["msg"] == "message" || $_POST["name"] == NULL || $_POST["msg"] == NULL) {
echo "<p class=\"error\">Name & message are required fields. Please enter your name and message.</p>";
} else {
$filename = "messages.txt";
$handle = fopen($filename,"r");
$read = file_get_contents($filename);
if ($read != "" || $read != NULL) {
$array = explode("\n", $read);
if ($array[0] != NULL || $array[0] != "") {
list($name, $msg, $time, $ip) = explode("\t", $array[0]);
$ip = trim($ip);
// Convert timestamp to unix timestamp and get current unix timestamp
$strtime = strtotime($time);
$flood_gate_time = $strtime+$floodtime;
$curtime = time();
$valid = true;
}
if ($ip == $_SERVER['REMOTE_ADDR'] && $flood_gate_time > $curtime) {
echo "<p class=\"error\">You must wait ".$floodtime." seconds before posting again</p>";
} else {
writetofile($_POST["name"],$_POST["msg"]);
}
} else {
writetofile($_POST["name"],$_POST["msg"]);
}
} // end if file exists
} // end submit
?></td>
<tr>
<td class="phpshout_form"><a class="phpshout_link" href="javascript:popUp('oldmsg.php')">Archive</a><br>
<br></td>
</tr>
<?
$filename = "messages.txt";
if (file_exists($filename)) {
$handle = fopen($filename, "r");
$read = file_get_contents($filename);
$array = explode("\n", $read);
$x=0;
for($i=0; $i<$numofposts; $i++) {
if ($array[$i] != NULL || $array[$i] != "") {
list($name, $msg, $date, $ip) = explode("\t", $array[$i]);
$date = str_replace(" ","/",$date);
list($year,$month,$day,$time) = explode("/", $date);
// convert text to smilies.
$msg = smiles($msg);
// Show date, Yes or No.
if ($showdate == "1") {
$title = "title=\"Posted ".$day."/".$month."/".$year." ".$time."\"";
} else {
$title = "";
}
$x++;
if ( $x % 2 != 0 ) {
echo "<tr><td ".$title." class=\"phpshout_posts\"><strong>".wordwrap($name,18,"<br>\n",1)." : </strong>".ereg_replace("([^ \/]{22})","\\1<wbr>",$msg)."</td></tr>";
} else {
echo "<tr><td ".$title." class=\"phpshout_2nd_posts\"><strong>".wordwrap($name,18,"<br>\n",1)." : </strong>".ereg_replace("([^ \/]{22})","\\1<wbr>",$msg)."</td></tr>";
}
} else {
break;
}
}
fclose($handle);
}
?>
</table>
</div>
<script type="text/javascript">
//Specify speed of scroll. Larger=faster (ie: 5)
var scrollspeed=cache=1
//Specify intial delay before scroller starts scrolling (in miliseconds):
var initialdelay=500
function initializeScroller(){
dataobj=document.all? document.all.datacontainer : document.getElementById("datacontainer")
dataobj.style.top="5px"
setTimeout("getdataheight()", initialdelay)
}
function getdataheight(){
thelength=dataobj.offsetHeight
if (thelength==0)
setTimeout("getdataheight()",10)
else
scrollDiv()
}
function scrollDiv(){
dataobj.style.top=parseInt(dataobj.style.top)-scrollspeed+"px"
if (parseInt(dataobj.style.top)<thelength*(-1))
dataobj.style.top="5px"
setTimeout("scrollDiv()",40)
}
if (window.addEventListener)
window.addEventListener("load", initializeScroller, false)
else if (window.attachEvent)
window.attachEvent("onload", initializeScroller)
else
window.onload=initializeScroller
</script>
</body>
</html>
<?
ob_end_flush();
?>
This is the new index, so I could have my input fields outside of the scrolling area, fixed at the bottom.
Text Formatted Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>phpSHOUT Version 3 Created By Designanet.co.uk</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<?
include "config.php";
include "functions.php";
banned_user();
?>
<link href="default.css" rel="stylesheet" type="text/css">
</head>
<body>
<IFRAME SRC="inc_form.php" WIDTH=200 HEIGHT=190 frameborder="0" name="shout" scrolling="yes" style="overflow-x: hidden;"></IFRAME><br>
<form name="postshout" method="post" target="shout" action="inc_form.php">
<input class="textfields" name="name" type="text" id="name" value="<? echo fillnamevalues("name","name") ?>"><br>
<input class="textfields" name="msg" type="text" id="msg" value="<? echo filltextvalues("msg","message") ?>" maxlength="<? echo $maxchars; ?>"><br>
<input class="buttons" type="submit" name="Submit" value="Send">
</form>
</body>
</html>
Now, my biggest issue is that when it finishes scrolling through the iframe, it just refreshes it, so it snaps back to the start That looks pretty bad. I can fix it by putting a bunch of page breaks in the code so when it restarts, it restarts off of the bottom of the iframe, then scrolls in, but that seems like needless code, so I'm gonna see if I can do something in the CSS. You can customize it as much as you want, background image, scroll speed, colors, etc. I'm going to implement the java arrows that speed up or reverse the scroll speed. I'm sure most of you can figure that out on your own.
The way I did everything, the code is all a mess, but it works. I'll clean it up when I get a chance, but for now, if it ain't broke...fix it till it is...no wait, don't fix it. yeah.
Oh yeah, if you wanna see my version in action, check it out on my (not quite launched yet) site at
(By the way, I'm not finished with the colors and function on my site, so it looks kinda crappy, but functions just fine, except for the padding issue in MSIE.)