Chat box behaves funny after un-hiding.

matthewst · April 4, 2008

I have a chat box that is able to be drug and dropped and hidden. It functions fine when the page first loads. I can drag and drop it anywhere and chat with it. Once I hide then show the box it becomes transparent and the div it's in stretches across the screen. I've added a width to everything I can think of but know luck.

Below are two of the three files needed. The first is chat.html. The second is w.php and the third is a plain text file called chat.txt with r/w given to www. All three files go in the same directory.

Any help would be greatly appreciated.

<html>
<head>
<style type="text/css">

.box {
  background-color: #FFFFFF;
  border: 1px solid #000000;
  color: #000000;
  padding: 0px;
  position: relative;
  width: 226px
  }

.bar {
  background-color: #3399CC;
  color: #ffffff;
  cursor: move;
  font-weight: bold;
  padding: 2px 1em 2px 1em;
}

.content {
  padding: 1em;
}


#content 		{ width:200px; border:1px solid #000000;}

#chatwindow 		{ border:1px solid #000000; padding:2px; color:black;  width:200px; height:auto; font-family:courier new;}
#chatmsg 		{ border:1px solid #000000; background:#FFFFFF; width:205px;}

#info 			{ text-align:left; font-family:arial; border:1px solid #000000; width:200px;}
#info td 		{ font-size:12px; border:1px solid #000000; width:200px;}
#info .small 		{ font-size:12px; border:1px solid #000000; width:200px;}

#info a 		{ text-decoration:none; color:white; width:200px;}
#info a:hover 		{ text-decoration:underline; color:#CF9700; width:200px;}
</style>
<script type="text/javascript">

var browserType;

if (document.layers) {browserType = "nn4"}
if (document.all) {browserType = "ie"}
if (window.navigator.userAgent.toLowerCase().match("gecko")) {
browserType= "gecko"
}

function hide2() {
  if (browserType == "gecko" )
     document.poppedLayer = 
         eval('document.getElementById("boxB")');
  else if (browserType == "ie")
     document.poppedLayer = 
        eval('document.getElementById("boxB")');
  else
     document.poppedLayer =   
        eval('document.layers["boxB"]');
  document.poppedLayer.style.display = "none";
}

function show2() {
  if (browserType == "gecko" )
     document.poppedLayer = 
         eval('document.getElementById("boxB")');
  else if (browserType == "ie")
     document.poppedLayer = 
        eval('document.getElementById("boxB")');
  else
     document.poppedLayer = 
         eval('document.layers["boxB"]');
  document.poppedLayer.style.display = "inline";
}
//<![CDATA[

//*****************************************************************************
// Do not remove this notice.
//
// Copyright 2001 by Mike Hall.
// See http://www.brainjar.com for terms of use.
//*****************************************************************************

// Determine browser and version.

function Browser() {

  var ua, s, i;

  this.isIE    = false;
  this.isNS    = false;
  this.version = null;

  ua = navigator.userAgent;

  s = "MSIE";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isIE = true;
    this.version = parseFloat(ua.substr(i + s.length));
    return;
  }

  s = "Netscape6/";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isNS = true;
    this.version = parseFloat(ua.substr(i + s.length));
    return;
  }

  // Treat any other "Gecko" browser as NS 6.1.

  s = "Gecko";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isNS = true;
    this.version = 6.1;
    return;
  }
}

var browser = new Browser();

// Global object to hold drag information.

var dragObj = new Object();
dragObj.zIndex = 0;

function dragStart(event, id) {

  var el;
  var x, y;

  // If an element id was given, find it. Otherwise use the element being
  // clicked on.

  if (id)
    dragObj.elNode = document.getElementById(id);
  else {
    if (browser.isIE)
      dragObj.elNode = window.event.srcElement;
    if (browser.isNS)
      dragObj.elNode = event.target;

    // If this is a text node, use its parent element.

    if (dragObj.elNode.nodeType == 3)
      dragObj.elNode = dragObj.elNode.parentNode;
  }

  // Get cursor position with respect to the page.

  if (browser.isIE) {
    x = window.event.clientX + document.documentElement.scrollLeft
      + document.body.scrollLeft;
    y = window.event.clientY + document.documentElement.scrollTop
      + document.body.scrollTop;
  }
  if (browser.isNS) {
    x = event.clientX + window.scrollX;
    y = event.clientY + window.scrollY;
  }

  // Save starting positions of cursor and element.

  dragObj.cursorStartX = x;
  dragObj.cursorStartY = y;
  dragObj.elStartLeft  = parseInt(dragObj.elNode.style.left, 10);
  dragObj.elStartTop   = parseInt(dragObj.elNode.style.top,  10);

  if (isNaN(dragObj.elStartLeft)) dragObj.elStartLeft = 0;
  if (isNaN(dragObj.elStartTop))  dragObj.elStartTop  = 0;

  // Update element's z-index.

  dragObj.elNode.style.zIndex = ++dragObj.zIndex;

  // Capture mousemove and mouseup events on the page.

  if (browser.isIE) {
    document.attachEvent("onmousemove", dragGo);
    document.attachEvent("onmouseup",   dragStop);
    window.event.cancelBubble = true;
    window.event.returnValue = false;
  }
  if (browser.isNS) {
    document.addEventListener("mousemove", dragGo,   true);
    document.addEventListener("mouseup",   dragStop, true);
    event.preventDefault();
  }
}

function dragGo(event) {

  var x, y;

  // Get cursor position with respect to the page.

  if (browser.isIE) {
    x = window.event.clientX + document.documentElement.scrollLeft
      + document.body.scrollLeft;
    y = window.event.clientY + document.documentElement.scrollTop
      + document.body.scrollTop;
  }
  if (browser.isNS) {
    x = event.clientX + window.scrollX;
    y = event.clientY + window.scrollY;
  }

  // Move drag element by the same amount the cursor has moved.

  dragObj.elNode.style.left = (dragObj.elStartLeft + x - dragObj.cursorStartX) + "px";
  dragObj.elNode.style.top  = (dragObj.elStartTop  + y - dragObj.cursorStartY) + "px";

  if (browser.isIE) {
    window.event.cancelBubble = true;
    window.event.returnValue = false;
  }
  if (browser.isNS)
    event.preventDefault();
}

function dragStop(event) {

  // Stop capturing mousemove and mouseup events.

  if (browser.isIE) {
    document.detachEvent("onmousemove", dragGo);
    document.detachEvent("onmouseup",   dragStop);
  }
  if (browser.isNS) {
    document.removeEventListener("mousemove", dragGo,   true);
    document.removeEventListener("mouseup",   dragStop, true);
  }
}

//]]></script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"></head>
<body>
<div id="realtooltip2" style="display: visible" style="width:205;">
<!--<div id="realtooltip2" style="display: none">
to make the box visible by default-->

<div id="boxB" class="box" style="left:20;top:60;width:205;">
  <div id="boxB" class="bar" style="width:179;" onmousedown="dragStart(event, 'boxB')"><center>Drag and Drop</center></div>
  <div id="content" style="width:205;">
		<p id="chatwindow"></p>		
		<input type="hidden" id="chatnick" type="text" size="9" maxlength="9">
		<input id="chatmsg" type="text" size="25" maxlength="80"  onkeyup="keyup(event.keyCode);" style="border:1px solid #000000;"> 
		<center><input type="button" value="add" onClick="submit_msg();" style="cursor:pointer;border:1px solid gray;"></center>
  </div>
  </div>
</div>
<center>
                                            <form name="message">
                                            <a href="javascript:document.message.show2()" onClick="show2()">Show the message box</a><br>
                                            <a href="javascript:document.message.shide2()" onClick="hide2()">Hide the message box</a>
                                            </form> 
                                            </center> 
</body>
</html>

<script type="text/javascript">
/****************************************************************
* Most Simple Ajax Chat Script (www.linuxuser.at)		*
* Version: 3.1							*
* 								*
* Author: Chris (chris[at]linuxuser.at)			*
* Contributors: Derek, BlueScreenJunky (http://forums.linuxuser.at/viewtopic.php?f=6&t=17)
*								*
* Licence: GPLv2						*
****************************************************************/

/* Settings you might want to define */
var waittime=800;		

/* Internal Variables & Stuff */
chatmsg.focus()
document.getElementById("chatwindow").innerHTML = "loading...";

var xmlhttp = false;
var xmlhttp2 = false;


/* Request for Reading the Chat Content */
function ajax_read(url) {
if(window.XMLHttpRequest){
	xmlhttp=new XMLHttpRequest();
	if(xmlhttp.overrideMimeType){
		xmlhttp.overrideMimeType('text/xml');
	}
} else if(window.ActiveXObject){
	try{
		xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
	} catch(e) {
		try{
			xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		} catch(e){
		}
	}
}

if(!xmlhttp) {
	alert('Giving up  Cannot create an XMLHTTP instance');
	return false;
}

xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState==4) {
	document.getElementById("chatwindow").innerHTML = xmlhttp.responseText;

	zeit = new Date(); 
	ms = (zeit.getHours() * 24 * 60 * 1000) + (zeit.getMinutes() * 60 * 1000) + (zeit.getSeconds() * 1000) + zeit.getMilliseconds(); 
	intUpdate = setTimeout("ajax_read('chat.txt?x=" + ms + "')", waittime)
	}
}

xmlhttp.open('GET',url,true);
xmlhttp.send(null);
}

/* Request for Writing the Message */
function ajax_write(url){
if(window.XMLHttpRequest){
	xmlhttp2=new XMLHttpRequest();
	if(xmlhttp2.overrideMimeType){
		xmlhttp2.overrideMimeType('text/xml');
	}
} else if(window.ActiveXObject){
	try{
		xmlhttp2=new ActiveXObject("Msxml2.XMLHTTP");
	} catch(e) {
		try{
			xmlhttp2=new ActiveXObject("Microsoft.XMLHTTP");
		} catch(e){
		}
	}
}

if(!xmlhttp2) {
	alert('Giving up  Cannot create an XMLHTTP instance');
	return false;
}

xmlhttp2.open('GET',url,true);
xmlhttp2.send(null);
}

/* Submit the Message */
function submit_msg(){
nick = document.getElementById("chatnick").value;
msg = document.getElementById("chatmsg").value;

if (nick == "") { 
	check = prompt("please enter username:"); 
	if (check === null) return 0; 
	if (check == "") check = "anonymous"; 
	document.getElementById("chatnick").value = check;
	nick = check;
} 

document.getElementById("chatmsg").value = "";
ajax_write("w.php?m=" + msg + "&n=" + nick);
}

/* Check if Enter is pressed */
function keyup(arg1) { 
if (arg1 == 13) submit_msg(); 
}

/* Start the Requests!  */
var intUpdate = setTimeout("ajax_read('chat.txt')", waittime);

</script>

Here is w.php:

<?php
/* author: chris at linuxuser.at 
	licence: GPLv2 
*/

$fn = "chat.txt";
$maxlines = 18;
$nick_length = 9;

/* Set this to a minimum wait time between posts (in sec) */
$waittime_sec = 0;	

/* spam keywords */
$spam[] = "nigger";
$spam[] = "cum";
$spam[] = "dick";
$spam[] = "EAT coon";

/* IP's to block */
$blockip[] = "72.60.167.89";

/* spam, if message IS exactly that string */	
$espam[] = "ajax";

/* Get Message & Nick from the Request and Escape them */
$msg = $_REQUEST["m"];
$msg = htmlspecialchars(stripslashes($msg));

$n = $_REQUEST["n"];
$n = htmlspecialchars(stripslashes($n));

if (strlen($n) >= $nick_length) { 
	$n = substr($n, 0, $nick_length); 
} else { 
	for ($i=strlen($n); $i<$nick_length; $i++) $n .= " ";
}

if ($waittime_sec > 0) {
	$lastvisit = $_COOKIE["lachatlv"];
	setcookie("lachatlv", time());

	if ($lastvisit != "") {
		$diff = time() - $lastvisit;
		if ($diff < 5) { die();	}
	} 
}

if ($msg != "")  {
	if (strlen($msg) < 2) { die(); }
	if (strlen($msg) > 3) { 
		/* Smilies are ok */
		if (strtoupper($msg) == $msg) { die(); }
	}
	if (strlen($msg) > 150) { die(); }
	if (strlen($msg) > 15) { 
		if (substr_count($msg, substr($msg, 6, ) > 1) { die(); }
	}

	foreach ($blockip as $a) {
		if ($_SERVER["REMOTE_ADDR"] == $a) { die(); }
	}

	$mystring = strtoupper($msg);
	foreach ($spam as $a) {	
		 if (strpos($mystring, strtoupper($a)) === false) {
		 	/* Everything Ok Here */
		 } else {
		 	die();
		 }
	}		

	foreach ($espam as $a) {
		if (strtoupper($msg) == strtoupper($a)) { die(); }		
	}

	$handle = fopen ($fn, 'r'); 
	$chattext = fread($handle, filesize($fn)); fclose($handle);

	$arr1 = explode("\n", $chattext);

	if (count($arr1) > $maxlines) {
		/* Pruning */
		$arr1 = array_reverse($arr1);
		for ($i=0; $i<$maxlines; $i++) { $arr2[$i] = $arr1[$i]; }
		$arr2 = array_reverse($arr2);			
	} else {
		$arr2 = $arr1;
	}

	$chattext = implode("\n", $arr2);

	if (substr_count($chattext, $msg) > 2) { die(); }

	$out = $chattext . $n . " | " . $msg . "<br>\n";
	$out = str_replace("\'", "'", $out);
	$out = str_replace("\\\"", "\"", $out);

	$handle = fopen ($fn, 'w'); fwrite ($handle, $out); fclose($handle);				
}
?>

Sign In

Chat box behaves funny after un-hiding.

Recommended Posts

matthewst

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information