SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Addict
    Join Date
    Apr 2007
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Chat box behaves funny after un-hiding.

    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 no 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 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 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
    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[] = "******";
       $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);            
       }
    ?>
    Last edited by matthewst; Apr 7, 2008 at 10:26.

  2. #2
    SitePoint Guru alecrust's Avatar
    Join Date
    Jun 2007
    Location
    London, UK
    Posts
    728
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can we have a link to the page? I'd like to see this "drugging" for myself
    Honda Civic Forum - UK Civic Forum
    Web Host Reviews - Independent, honest host reviews
    My Portfolio - Simplicity is the ultimate sophistication

  3. #3
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    drug and dropped
    I think you mean drug and drup

  4. #4
    SitePoint Addict
    Join Date
    Apr 2007
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  5. #5
    SitePoint Addict
    Join Date
    Apr 2007
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Any Ideas? I could really use the help.

  6. #6
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There is no need to use browser detection for something so simple. Also, do you really think it is necessary to have Netscape 4 support in your script?

    One more thing, dont use eval unless you have to, the above could be written without using it.

  7. #7
    SitePoint Addict
    Join Date
    Apr 2007
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  8. #8
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You should really google how to show and hide elements with current JavaScript code.

    Anyway, try changing the style to "block" instead of "inline" in your show function.

  9. #9
    SitePoint Addict
    Join Date
    Apr 2007
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your the freakin man!!!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •