keypress causing my sidebar and content to disappear

Question

zacharysr 0 Newbie Poster

13 Years Ago

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 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>

html-css javascript

1 Contributor
1 Reply
260 Views
3 Hours Discussion Span
Latest Post 13 Years Ago Latest Post by zacharysr

Dani AI

Generated 9 Months Ago

Good catch, — this kind of “things are in the DOM but not visible” almost always comes from how the panel is positioned and hidden. Using negative margins and floats to hide/slide a widget is fragile: it changes layout, can create overlaps, and when the browser reflows (for example when a textarea gains focus or scrollbars appear) other elements can end up visually clipped even though they still exist in the DOM.

A more robust approach:

keep the chat container out of normal flow with fixed positioning, and animate its visibility with CSS transform (which does not trigger layout reflows the same way margins do),
toggle a single class to show/hide instead of repeatedly changing inline marginTop,
avoid duplicate IDs and IDs with spaces (use hyphens or underscores), and
only prevent default keyboard behaviour when Enter is detected (use e.preventDefault() inside the Enter branch).

Example (replace the current margin-based code with something like):

#fullchat {
  position: fixed;
  right: 0;
  bottom: 30px; /* leaves room for the footer/chatbar */
  width: 250px;
  transform: translateY(110%);
  transition: transform .18s ease;
  z-index: 9999;
}
#fullchat.open { transform: translateY(0); }
#chat { max-height: 300px; overflow: auto; }

document.getElementById('chatname').addEventListener('click', function () {
  document.getElementById('fullchat').classList.toggle('open');
});

document.querySelector('#yourform textarea').addEventListener('keydown', function (e) {
  if (e.key === 'Enter' && !e.shiftKey) {
    e.preventDefault();
    // send message (ajax) then clear the textarea
  }
});

Troubleshooting checklist: open DevTools and watch computed styles while typing to see which element height/display/z-index changes; search for duplicate IDs (messages appears more than once in the markup shown) and rename them to classes; remove spaces from IDs; and keep event handlers from returning false for every keypress. These changes eliminate layout surprises and make the chat UI stable across focus/keypress events.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

zacharysr 0 Newbie Poster · Answer 1 · 2013-05-20T02:17:27+00:00

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