How to position a div side by side with JS/jQuery

Asked

Viewed 988 times

0

I’m creating a simple chat system where it has a function that opens the user window to which you want to talk face style. What I would like to know is how when opening the second user the window is aligned on the side of the first window and not above what is happening. That’s the code at the moment.

<script>
$(document).ready(function () {
    $('.chat').die('click').live("click", function () {
        var chat = $(this).attr("rel");
        var URL = 'chat.php';
        var dataString = 'chat=' + chat;

        $.ajax({
            type: "POST",
            url: URL,
            data: dataString,
            cache: false,
            success: function (html) {
                $("body").append("<div id='main" + chat + "'></div>")
                $("#main" + chat).html(html);
            }
        });
        return false;
    });
});
</script>

CSS

<style>
#chatbox {
  position: absolute;
  bottom: 0px;
  width: 200px;
  height: 300px;
  z-index: 4;
  background-color: #ECECEC;
  border: 1px solid #000;

}
</style>

HTML

<a  class="chat"  rel="8" href="#">user A </a>
<br/>
<a  class="chat"  rel="7" href="#">user b </a>
javascript jquery css

  • Jones, a lot of information is missing here. Where is the element #chatbox in HTML? Can you make a jsFiddle with an example? the new chat windows are <div> or <a>?

  • 1

    Here’s some help for jsFiddle you should do: http://jsfiddle.net/684en/

  • Beware of using the .live, is deprecated, replaced by .on or .delegate. http://api.jquery.com/live/ If you are going to build a chat, I recommend also looking over long Polling to avoid unnecessary requests. http://imasters.com.br/artigo/23436/javascript/veja-como-o-long-polling-pode-te-ajudar-a-development-real-time applications/

  • Its original title speaks of "Javascript", but its code is jQuery, and maybe the problem is in CSS/HTML (?) The guide How to create a Minimum, Complete and Verifiable example deserves a read.

2 answers

1

You can create a ul and setar display as inline and position Absolute and with jquery go adding items (chat windows that can be a div) in this list.

$("#ul_id").append("<li><div id='chat_" + chat_id + "'></div></li>");

0

Suppose you want to align the chat windows on the right then you have to assign the value of the right attribute in CSS via Jquery as well. Assign increasing values in 205px quantity as the width of your "window" is 200px;

Browser other questions tagged javascript jquery css

You are not signed in. Login or sign up in order to post.