Question

I have an application that works like a virtual desktop, with a toolbar with icons that’s clickable. When an icon is clicked a window like box is opened (created dynamically) with different content regarding which icon was clicked.

With a function called moveOnTop() (see below) that gets called when a window gets created a click event is bound to that window. If several windows is opened and the user clicks on a window that’s ordered behind another window the clicked window is moved to the top.

Now to the problem…

When clicking one of the icons, a box is opened showing a bunch of thumbnail images, and when clicking on one of the thumbnails a new window is opened with that particular image. That window with the image should be moved to the top, but that doesn’t happen due to that the click event on the thumbnail box that was clicked gets fired after the window with the image gets created, which leads to that window being moved to the top.

I didn’t know how to explain the problem in other words and I hope you can understand what I mean.

Windows.prototype.buildWindow = function(){

    // a function that created the boxes

    Windows.prototype.moveOnTop();
}

Windows.openedImg = function(){

    // a function that creates the box with the clicked image

    var thisWindow = $(this);
Windows.prototype.getZindex(thisWindow);
}

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

Html:

<img onclick="openWindow(true)" ... />

Javascript:

function openWindow(doNotGoToTop) {
    ... //open window
    if (!doNotGoToTop) {
        ... //go to top
    }
}