Question

Possible Duplicate:
Jquery Draggable + Bring to Front

I have a site where users can open a number of chat windows.

I need to keep the latest window on top and I’m using the following

        var chatZIndex = 100;   
        $(document).on('mousedown','div.chatMessenger', function() {
            $(this).css('z-index', chatZIndex++);
        });

This works fine but I have found one bug. If there are 6 chat boxes open (6 instances of ‘div.chatMessenger’) then the variable chatZIndex increments by 6 at a time. 4 open and then increments by 4 etc etc.

Is there a way to use this same setup but only have the variable increment by 1 at a time regardless of how many instances of ‘div.chatMessenger’ are open?

thx

---

this is the current code to set them up

var memberID = 1000000000;          // This is the Member ID - REPLACE
var chatMsgTop = 45;                        // Initial Chat Open Location Top
var chatMsgLeft = 45;                       // Initial Chat Open Location Left
var chatZIndex = 100;                       // Starting Number for Chat Messenger z-index Value

// Chat Messenger - Open a New Chat Messager IM Box
$(document).on('click','div#chatFriendsContainer table tr', function() {

    memberID++;     // This is the Member ID - REPLACE

    // Increment Initial Chat Messaging Location on Windows - Avoid Overlap
    chatMsgTop += 10;
    chatMsgLeft += 10;

    var timeStamp = Math.round((new Date()).getTime() / 1000);                                                                                                                          // Timestamp
    $('div#chatWrapper').append('<div id="'+memberID+'" class="chatMessenger" data-timestamp="'+timeStamp+'"></div>');          // Create new Chat IM Container
    $('div#chatMessengerTemplate div.chatMessengerContainer').clone().appendTo('div#'+memberID);                                                        // Clone Template
    $('div#'+memberID).css({left : chatMsgLeft+'px', top : chatMsgTop+'px'});                                                                                               // Update IM Location


    // JQUERY UI Draggable - Initialize
    $('div#'+memberID).draggable({
        containment: $('div#chatWrapper')
    });


    // JQUERY UI Draggable - Update Z-Index
    $(document).on('mousedown','div.chatMessenger', function() {
        //$('div.chatMessenger').not(this).css('z-index', '100');
        //alert('here now...');

        if($('div.chatMessenger', this)) {
            $(this).css('z-index', chatZIndex++);
        }


    });

Answer 1

I think you’re adding 2 mousedown callback to newly created ones so it duplicates the adding of variables ++.

Can you supply more code that we can examine?
Will update my answer below to your additional code later

How about using the .index()

http://api.jquery.com/index/

or using the bind method to ensure it’s only done once