Question

I have a bunch of divs that the user can create and which represent messaging boxes. When a user clicks on one of their friends’ names a box is created. I have been able to make it so that when a new box is created it is positioned the right distance away, but I have not been able to figure out how to make it so that when a box is removed, the other boxes are moved over to fill the void and make space for new boxes. I know I need to use foreach but I do not know how to reference the boxes. Thanks in advance for any help.

#chatbox{
    border:2px solid #0969A2;
    height:250px;
    width:200px;
    background-color:#fff;
position:fixed;
z-index:11002;
padding:3px;
}

    $('#open-chat').live('click', function() {
    var user=$(this).attr('data-name');
    //check if bar exists
    if ($("#bar-icon[data-name="+user+"]").length == 0){
        $('.dockleft-block').append('<div id="bar-icon" data-name="'+user+'">'+user+'</div>');
        $('body').append('<div id="chatbox" data-name="'+user+'"></div>');

        //position new boxes           
        $("#chatbox[data-name="+user+"]").css('bottom', '37px');

        var chatBoxeslength = $("div[id=chatbox]").length-1;

        if (chatBoxeslength == 0) {
            $("#chatbox[data-name="+user+"]").css('left', '35px');
        } else {
            width = (chatBoxeslength)*(225+7)+20;
            $("#chatbox[data-name="+user+"]").css('left', width+'px');
            $("#bar-icon[data-name="+user+"]").css('left', width-35+'px');
        }

    }
    //end if length
    });                                       
    //end click function


    $('.closechatbox').live('click', function() {
    user=$(this).attr('data-name');     
    $("#chatbox[data-name="+user+"]").remove();
    $("#bar-icon[data-name="+user+"]").remove();
//need to rearrange other boxes
    });

UPDATE

this was the solution on another chat script but I do not understand it
anantgarg.com/chat/sampleb.php
how do they reference each box as #chatbox_”+chatboxtitle successfully?

function restructureChatBoxes() {
    align = 0;
    for (x in chatBoxes) {
        chatboxtitle = chatBoxes[x];

        if ($("#chatbox_"+chatboxtitle).css('display') != 'none') {
            if (align == 0) {
                $("#chatbox_"+chatboxtitle).css('right', '20px');
            } else {
                width = (align)*(225+7)+20;
                $("#chatbox_"+chatboxtitle).css('right', width+'px');
            }
            align++;
        }
    }
}

Answer 1

Why don’t you just have a reference to an array of the chat-window divs. Then as you add and remove them, adjust the array. After you adjust the array, you should just reposition everything in the array.

Something along these lines:

var chatWindows = [];
var windowWidth = 100;
var padding = 10;

function newChatWindow(divElement)
{
   chatWindows.push(divElement);
   reposition();
}

function reposition()
{
   var el = null;
   for (var i = 0; i < chatWindows.length; i++)
   {
      el = chatWindows[i];
      el.style.bottom = 10
      el.style.right = windowWidth * i + padding;
   }
}

function removeChatWindow(index)
{
   var el = chatWindows[index];
   el.parentNode.removeChild(el);
   var newArr = [];
   for (var i = 0; i < chatWindows.length - 1; i++)
   {
      if (i != index)
      {
          newArr.push(chatWindows[i]);
      }
   }
   chatWindows = newArr;
   reposition();
}