DHTML Windows Widget - Layered

[zac]

1) Script Title: Script: DHTML Window widget
2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...ndow/index.htm

3) Describe problem:

1 - From a standard HTML page (window #0), open an ajax dhtml window widget (window #1) - and then from the new ajax window open another ajax dhtml window widget (window #2).

Window #1 opens in front of Window #0 and window #2 opens in front of Window #1 as one would expect.

2 - Close window #2, and then from window #1, reopen window #2

Window #2 opens behind, and because in my instance is smaller, is hidden by window #1


Any help would be appreciated.

[jscheuer1]

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...ndow/index.htm

Your link is broken, please fix it or post the correct one. If this is the script that I am thinking, and pretty much in any situation like this, all you need to do is set the z-index of the widget that is being launched higher than the one that is launching it. As the z-indexes in the script, if it is as I recall, are set dynamically, it would appear in the script as zIndex and is already incremented for widgets receiving focus for dragging so, shouldn't be too hard to adjust if I could see the script. Or you could try it yourself from this information.

[zac]

John,

Many thanks for the reply .... have corrected the link.
Being a js numpty, probably better if I don't "have a go"....

[jscheuer1]

Well, hmm. I'm not sure how you are opening a widget from a widget but, if you are using what it says to do on the demo page, you are assigning it a variable name or it already has one, example:

var inlinewin=dhtmlwindow.open("broadcastbox", "inline", "This is some inl . . .

That particular widget will from then on be known as:

inlinewin

So, whatever you do to launch it, if it isn't 'on top', you can bring it forward like so:

inlinewin.style.zIndex++;

So, say you launched from another widget like so:

<a href="#" onclick="inlinewin.show(); return false">Show Window 2</a>

But, it ended up being behind the widget that launched it. You could add to the command:

<a href="#" onclick="inlinewin.show();inlinewin.style.zIndex++; return false">Show Window 2</a>

[zac]

I've been using the later <a> example .....

I'll give your suggestion a try - but isn't the point that when Window#2 is first opened that it does appear correctly infront of window#1 , but after it is closed and reopened that it appears behind?

Having looked more closely at the dhtmlwindow.js, it would appear that line 41 is part of the problem ..... or atleast by me commenting it out means that the posted problem goes away. The line increases the z-index of a window when a mouse click occurs on it.... which is obv intended to bring a partially hidden window to the foreground; which would be correct - so the error would seem to be that when re-establishing an existing window, the code needs to see if that window already exists, and if so to bring it's z-index to the fore rather than retaining the previous z-index value (which, by now, is too low).

[jscheuer1]

Well the z-index is also a function of the location in the markup of an element. If the widget being 'brought back' comes before the widget that is bringing it back in the markup, it needs its z-index increased more. In fact, almost anytime you click on a widget, it increases its z-index. So, you may have to take that into account. You have two widgets - say assigned to variables w1 and w2.

If you launch w1 from w2 you must make sure w1's z-index becomes greater than w2's:

w1.style.zIndex=w2.style.zIndex*1+2;

You may need to do +3 or +4, but if you can get away with +1 that would be ideal.

[zac]

OK, sorted the problem - commenting out line 41 leaves a problem; eg

Main window opens popup #1, which is then closed.
Main window opens popup #2, which then calls popup #1.... unable to bring popup #1 forward

However, after much swearing and I've hit on an even simpler solution ... amend line 65, changing

t=document.getElementById(t)

to read

{
t=document.getElementById(t)
dhtmlwindow.zIndexvalue++;
t.style.zIndex=dhtmlwindow.zIndexvalue
}

... so that all "un-hidden" windows will always appear on top in a layered environment.