Changing zIndex with multiple IFrames

[nicoulaj]

Originally filed by artistinclosure on 2009-10-07T08:33:43

Not quite an Issue, but I have a Dashboard with the possibility to display mutiple IFrames and change their order. Since those can overlap, I needed a change to the zIndex of the iframes. I just wanted to share the results, in case anybody likes to use that, too:

public static var INSERT_FUNCTION_MOVEIFRAME:String = 
            "document.insertScript = function ()" +
            "{ " +
                "if (document." + FUNCTION_MOVEIFRAME + "==null)" +
                "{" +
                    "var oldFrame=null;" +
                    FUNCTION_MOVEIFRAME + " = function(frameID, iframeID,
x,y,w,h) " + 
                    "{" +
                        "var frameRef=document.getElementById(frameID);" +
                        "frameRef.style.left=x+'px';" + 
                        "frameRef.style.top=y+'px';" +
                        "frameRef.style.width=w+'px';" +
                        "frameRef.style.height=h+'px';" +
                        "var iFrameRef=document.getElementById(iframeID);" +
                        "iFrameRef.width=w;" +
                        "iFrameRef.height=h;" +
                        "if (oldFrame!=frameRef) {" + 
                        " if (oldFrame) oldFrame.style.zIndex=\"99\";" + 
                        " frameRef.style.zIndex=\"100\";" + 
                        " oldFrame = frameRef; }" + 
                    "}" +
                "}" +
            "}";

[nicoulaj]

Updated by Julien.N...@gmail.com on 2009-10-07T11:17:08

Good idea ! Do you have a test project or something? We could integrate it in the examples. There is no example illustrating the move functionnality yet.

Removed label Type-Defect Added label Type-Enhancement

[nicoulaj]

Updated by Julien.N...@gmail.com on 2009-10-07T11:17:35

Original ticket set status to Accepted (we converted to open)

[nicoulaj]

Updated by artistinclosure on 2009-10-07T14:53:52

I have attached a small sample (hope it runs). There is still some flickering, so you probably should move the zIndex change into another function and call it separately (and not in moveIFrame). The sample uses the Dashboard sample from WASI found at aAdobe: http://www.adobe.com/devnet/flex/samples/dashboard/dashboard.html

[nicoulaj]

Updated by artistinclosure on 2009-10-07T15:01:57

Another thing I noticed is, that the IFrame cannot be seamlessly integrated into the Flex app. So, if another Flex components overlaps the IFrame, the frame will still be visible. But that is a problem of using the underlying DOM model and not of your Component (or is there a way to move the IFrame between flex layers?).

[nicoulaj]

Updated by Julien.N...@gmail.com on 2009-10-07T20:40:22

Ok, I added it, but as separate method. The users will choose themselves if they want to trigger it on "move" or other lifecycle events. I will inlude your dashboard example too. Thank you for your contributions :)

To answer your last post, you could may be take a look at the overlayDetection feature ?

Original ticket set status to Fixed (we converted to closed)

[nicoulaj]

Updated by Julien.N...@gmail.com on 2009-10-11T00:18:21

Original ticket set status to Verified (we converted to closed)