Question

I have an application that works like a virtual desktop (icons in a horizontal bar in the bottom). When you click on an icon, a window opens (dynamically created). If you click on another (or the same) icon another window opens 10px down and 10px to the right from the last one, and is moved on the top.

What I need to accomplish is that if you click on a window that is moved beneath another window, the clicked window gets moved to the top.

Below is what I got so far, but it isn’t at all a good solution (eg. if you click on a window that’s already on the top, the functions runs anyway and z-index on the window counts up). What would be a more elegant solution for this? Thanks in advance!

Windows.prototype.moveOnTop = function(){

var boxes = $('.window');

    boxes.click(function() {
        var thisWindow = $(this);
        Windows.prototype.getZindex(thisWindow);
    });
}

Windows.prototype.getZindex = function(thisWindow){

    var boxes = $('.window');
    var maxZindex = 0;

    boxes.each(function() {
        var zIndex = parseInt($(this).css('z-index'), 10);
        maxZindex = Math.max(maxZindex, zIndex);
    });

    thisWindow.css("z-index", maxZindex + 1);
}

Answer 1

One way is not to give z-index to any of your .window divs and use DOM node positioning instead. i.e. you shift the clicked div to the topmost postion in the DOM, i.e. as the last child of body

i.e. something like:

Windows.prototype.moveOnTop = function(){

    $('.window').click(function() {
        var thisWindow = $(this);
        if(thisWindow.next().length > 0) thisWindow.appendTo('body');
    });

};

But you need to make sure that z-index is not specified for any of your .window divs.