Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Chat box behaves funny after un-hiding.

Status
Not open for further replies.
matthewst

matthewst

IS-IT--Management
May 1, 2007
25
US
I have a chat box that is able to be dragged 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.

Here is a link to see the code in action:


Here is chat.html

Code: 
<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 [URL unfurl="true"]http://www.brainjar.com[/URL] 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 ([URL unfurl="true"]www.linuxuser.at)[/URL]      *
 * Version: 3.1                     *
 *                         *
 * Author: Chris (chris[at]linuxuser.at)         *
 * Contributors: Derek, BlueScreenJunky ([URL unfurl="true"]http://forums.linuxuser.at/viewtopic.php?f=6&t=17)[/URL]
 *                        *
 * 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
Code: 
<?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 .= "&nbsp;";
   }

   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, 8)) > 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 . "&nbsp;| " . $msg . "<br>\n";
      $out = str_replace("\'", "'", $out);
      $out = str_replace("\\\"", "\"", $out);
     
      $handle = fopen ($fn, 'w'); fwrite ($handle, $out); fclose($handle);           
   }
?>
 
Sort by date Sort by votes
Where to start?!

- Get rid of all that old outdated cross-browser detection, and use standard, new DOM methods. Coding for Netscape 4 layers? Get real... this is such an outdated browser. One set of code should work on all new browsers.

- Get rid of those useless and unnecessary evals. They slow your code down and are not needed.

- Make sure your code validates. You seem to be using shortcuts that assume you ar eusing IE (like IDs inherently being created for NAMEs, etc).

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Javascript is brand new to me. I can't tidy up the code until I know what I'm doing. Right now I just need it to work.

Anyone know whats wrong with it?
 
Upvote 0 Downvote
Got it!

Changed this:
document.poppedLayer.style.display = "inline";

To this:
document.poppedLayer.style.display = "block";
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
344
xwb
xwb
TheLazyPig
  • Locked
  • Question
Disable radio button after edit button click
Replies
1
Views
108
xwb
xwb
chikwendu
  • Locked
  • Question
How do I display an extra input box for editing an existing data?
Replies
1
Views
104
chikwendu
chikwendu
HansMaulwurf
  • Locked
  • Question
AJAX not working after database migration from MySQL to SQL Server ( Undefined index)
Replies
0
Views
83
HansMaulwurf
HansMaulwurf
JPSeo
  • Locked
  • Question
simple SyntaxError: missing ) after argument list error
Replies
2
Views
121
JPSeo
JPSeo

Part and Inventory Search

Sponsor

Back
Top