1.11M Members

keypress causing my sidebar and content to disappear

 
0
 

so i have a problem, i'm trying to make a live chat where two members can chat without having to refresh the page, and i have got everything work up to where you start typing in the textarea, well i'm trying to check for the "enter" key to be pressed, and when it's pressed it'll send the message, but now when ANY key is pressed, it'll make the sidebar div and content div's content disappear, when i look at the html it'll still be there, but not visible on the page...

if you want to see what it's doing on the website the links http://www.daparadise.com/test/autochat/long_poller.php# please help iv'e been working on this for a couple days and want to get it to work to release on the site ASAP.

<div>
<?php include "include/header.php" ?>
fff
    <div id="chatbar" style="width:1050px;">

        <div id="fullchat" style="background-color:00AF29;">
            <div id="chatname" onclick="showHide('chatbod 18');">
                <?php echo $name; ?><div id="close18" style="float:right;padding:5px;margin-top:-4px; " onclick="closechat('#fullchat');">X</div>
            </div>
            <div id="chatbod 18">
                <div id="chat" style="overflow-y:scroll;overflow-x:hidden; height:225px;">
                    <div id="messages" class="0" style="display:inline;">
                    </div>
                    <div id="messages" class="0" style="display:inline;">
                    </div>
                </div>
                <div>
                    <form method='post' id="yourform" name="409" >
                        <textarea id="Msg" name="Msg" autocomplete="off" onkeydown="chatenter(event, 409);"></textarea>
                        <input name='id' type='hidden'  value='409'/>
                    </form>
                </div>
            </div>
        </div>

    </div>

<?php include "../../include/footer.php"; ?>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<style type="text/css" media="screen">
    .msg{ background:#aaa;padding:.2em; border-bottom:1px #000 solid}
    .old{ background-color:#246499;}
    .new{ background-color:#3B9957;}
    .error{ background-color:#992E36;}
    #fullchat{
        position: relative;
        bottom:0px;
        width:250px;
        max-height:300px;
        border:1px solid black;
        z-index:1999;
        margin-top:-255px;
        float:right;
    }
    #chatbar{
        position:fixed;
        bottom:0px;
        left:0px;
        width:1050px;
        height:30px;
        background-color: #3CD51A;
        background: -webkit-gradient(linear, center top, center bottom, from(#319C19), to(#3CD51A));
        background-image: linear-gradient(#319C19, #3CD51A);
        z-index:999;
    }
    #chatname{
        padding: 5px 5px;
        border-bottom:1px solid black;
        background-color:#807CC2;
    }
    textarea {
        resize: none;
        width:100%;
        height:100%;
    }
</style>
<script type="text/javascript" charset="utf-8">
    function addmsg(type, msg){
        $("#chat").animate({ scrollTop: $('#chat')[0].scrollHeight}, 1000);
        /* Simple helper to add a div.
        type is the name of a CSS class (old/new/error).
        msg is the contents of the div */
        $("#chat").append(
             msg
        );
    }

    function waitForMsg(){
        var className = $('#chat').children().last().attr('class');
        /* This requests the url "msgsrv.php"
        When it complete (or errors)*/
        $.ajax({
            type: "GET",
            url: "msgsrv.php?ID=11&MID=409&SELECT=" + className,

            async: true, /* If set to non-async, browser shows page as "Loading.."*/
            cache: false,
            timeout:50000, /* Timeout in ms */

            success: function(data){ /* called when request to barge.php completes */
                addmsg("new", data); /* Add response to a .msg div (with the "new" class)*/
                setTimeout(
                    waitForMsg, /* Request next message */
                    5000 /* ..after 1 seconds */
                );
            },
            error: function(XMLHttpRequest, textStatus, errorThrown){
                addmsg("error", textStatus + " (" + errorThrown + ")");
                setTimeout(
                    waitForMsg, /* Try again after.. */
                    15000); /* milliseconds (15seconds) */
            }
        });
    };

    $(document).ready(function(){
        waitForMsg(); /* Start the inital request */
    });
    function showHide(obj) {
        var div = document.getElementById(obj);
        if (div.style.display == 'none') {
            div.style.display = '';
            document.getElementById("fullchat").style.marginTop="-255px";
        }else {
            div.style.display = 'none';
            document.getElementById("fullchat").style.marginTop="0px";
        }
     }
    function closechat() {
        $("#fullchat").remove();
    }
    function chatenter(evt, id){
        var charCode = (evt.which) ? evt.which : window.event.keyCode; 
        if (charCode == 13){
            var message = document.getElementById("Msg").value;
            $("#chat").append(
                message
            );
        }
        return false
    }
</script>
 
0
 

I figured out it somehow had to do with how i was positiong "fullchat"

Question Self-Answered as of 1 Year Ago
You
This question has already been solved: Start a new discussion instead
Post:
Start New Discussion
View similar articles that have also been tagged: