ByKlein chromeless window problem (IE5+) -- very tough problem!

This is a long and complicated script, so please bear with me.  This is a modified version of the ByKlein chromeless windows script found on http://www.chromeless.org .  I want the window to contain Flash and still be draggable.  I have accomplished this, however that the first time you click the Flash it is not actually in focus and it can not be interacted with until it's been clicked.  It shows that it has been moused-over, but a click won't work (it will enable the drag function properly, but none of the Flash internal buttons will work until the focus has been properly set).

It is important to note that the Flash movie itself is used for testing does not have any interaction with the chromeless script.  If the Flash is in focus, and it gets clicked, it will simply perform a "window.close" and close the window.

To get the Flash to work correctly with the function that allows the window to be moved, I set its "wmode" parameter to "opaque".  This is what confuses the focus.  Normally I would set the focus back to the Flash movie with another script like this: "setTimeout('windowname.flashID.focus();',250);" but this does not work in this case.  My problem is that from the "document.writeln" section, the Flash object is being inserted into the "innerHTML" area.  I can't seem to convince the Flash to take a focus after that.  I've included comments in this code where the two files begin so you can copy/paste the code and test it.

Thanks in advance.


// FILE: "new.js" -- the guts of the chromeless window script
ChromelessWindow = function (){
      this.title = null;
      this.scrollbars = null;
      this.w = 0;
      this.h = 0;
      this.centered = null;
      this.xPos = 0;
      this.yPos = 0;
      this.chromelessCompatible = navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion)>=4 ? true:false;
      this.chromelessWW = null;
}

ChromelessWindow.prototype.openChromeless = function(){this.runCode();}

ChromelessWindow.prototype.closeChromeless = function(){this.chromelessWW.close();}

ChromelessWindow.prototype.moveTo = function(){
      this.xPos = arguments[0];
      this.yPos = arguments[1];
      if(this.chromelessWW){
            this.chromelessWW.execScript('var cx='+this.xPos+';');
            this.chromelessWW.execScript('var cy='+this.yPos+';');
            this.chromelessWW.execScript("showChromeless()");
      }
}

ChromelessWindow.prototype.resizeTo = function(){
      this.w = arguments[0];
      this.h = arguments[1];
      this.cH = (this.h-this.titlebarHeight)-this.borderSize;
      this.cW = this.w -(this.borderSize*2);
      if(this.chromelessWW){
            this.chromelessWW.execScript('var cw='+this.w+';');
            this.chromelessWW.execScript('var ch='+this.h+';');
            this.chromelessWW.execScript("b.all.canvas.style.width='"+this.cW+"'");
            this.chromelessWW.execScript("b.all.canvas.style.height='"+this.cH+"'");
            this.chromelessWW.execScript("showChromeless()");
      }
}

ChromelessWindow.prototype.runCode = function(){
      if(this.centered=="yes"){
            var tempX = this.w;
            var tempY = this.h;
            this.xPos = (screen.availWidth/2)-(tempX/2);
            this.yPos = (screen.availHeight/2)-(tempY/2);
      }
      if (this.chromelessCompatible){
            this.chromelessWW = window.open("about:blank","","top=5000,left=5000,width=100,height=100,scrollbars="+this.scrollbars);
      }else{
            this.chromelessWW = window.open(this.URL, "chromelessWindow", "top="+this.yPos+",left="+this.xPos+",width="+this.w+",height="+this.h+",toolbar=0,scrollbars="+this.scrollbars+",resizable=0");
      }
      this.cH = this.h;
      this.cW = this.w;
      
      this.FLASH = "<OBJECT ID=FLASHMovie classid=clsid:D27CDB6E-AE6D-11cf-96B8-444553540000 codebase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0 WIDTH=300 HEIGHT=100><PARAM NAME=MOVIE VALUE=move.swf><PARAM NAME=wmode VALUE=opaque><PARAM NAME=menu VALUE=false></object>";
            
      if (this.chromelessCompatible){
            this.chromelessWW.document.writeln('<html><head>');
            this.chromelessWW.document.writeln('<META HTTP-EQUIV="imagetoolbar" CONTENT="no">');
            this.chromelessWW.document.writeln('<style>');
            this.chromelessWW.document.writeln('BODY{border:0px !important}');
            this.chromelessWW.document.writeln('</style>');
            this.chromelessWW.document.writeln('</head><body>');
            this.chromelessWW.document.writeln('<script>');
            this.chromelessWW.document.writeln('var c=window.createPopup();');
            this.chromelessWW.document.writeln('var b=c.document.body;');
            this.chromelessWW.document.writeln("var ox=oy=ix=iy=0;");
            this.chromelessWW.document.writeln("var allContent =\""+this.FLASH+"\";");
            this.chromelessWW.document.writeln('b.innerHTML=allContent;');
            this.chromelessWW.document.writeln('var cx='+this.xPos+';');
            this.chromelessWW.document.writeln('var cy='+this.yPos+';');
            this.chromelessWW.document.writeln('var cw='+this.w+';');
            this.chromelessWW.document.writeln('var ch='+this.h+';');
            this.chromelessWW.document.writeln('function showChromeless(){c.show(cx,cy,cw,ch);}');
            this.chromelessWW.document.writeln('var m=false;');
            this.chromelessWW.document.writeln('var allb=b.all("allborders");');
            this.chromelessWW.document.writeln('var cmove=(b.all("FLASHMovie"))?b.all("FLASHMovie"):"";');
            this.chromelessWW.document.writeln('var ox=oy=ix=iy=0;');
            this.chromelessWW.document.writeln('var m=0;');
            this.chromelessWW.document.writeln('cmove.onmousedown=function(){m=1;}');
            this.chromelessWW.document.writeln('cmove.onmouseup=function(){m=0}');
            this.chromelessWW.document.writeln('document.body.onclick=function(){if (m){cx=ix+event.screenX-ox;cy=iy+event.screenY-oy;c.show(cx,cy,cw,ch);}else{ix=cx;iy=cy;ox=event.screenX;oy=event.screenY;}};');
            this.chromelessWW.document.writeln('setInterval("document.body.click()",20);');
            this.chromelessWW.document.writeln('onfocus=function(){showChromeless();}');
            this.chromelessWW.document.writeln('</script></body></html>');
            this.chromelessWW.document.location.reload();
            this.chromelessWW.document.title = this.title;
      }else{
            this.chromelessWW.document.title = this.title;
      }
}


// FILE: "test.html" -- this loads the chromeless window automatically
<html>
<head>
<title>Test</title>
</head>
<script type="text/javascript" src="new.js"></script>
<script>
var myChromeless = new ChromelessWindow();
myChromeless.title = "New";
myChromeless.scrollbars = "yes";
myChromeless.w = 400; //width
myChromeless.h = 300; //height
myChromeless.centered = "yes";
myChromeless.xPos = 10;
myChromeless.yPos = 10;
</script>
<body bgcolor=#cccccc onLoad="myChromeless.openChromeless();"></body>
</html>
gabriellwAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

gabriellwAuthor Commented:
The purpose of this script is to allow the user to interact immediately with the Flash movie, but also allow them to drag around the window itself.  Both should be accomplished without clicking once to set focus and once again to interact.

On a side note, the "window.createPopup()" technique listed (http://msdn.microsoft.com/library/default.asp?url=/workshop/author/om/popup_overview.asp) never takes focus, so an "onfocus" or "onblur" won't work.
0
gabriellwAuthor Commented:
Solution for this problem:

A technique for embedding Flash in the byKlein chromeless script while allowing it to be draggable has been successfully implemented by the author here on http://www.chromeless.org/ and can be viewed at http://www.chromeless.org/byklein
0
SpideyModCommented:
PAQ'd and points refunded.

SpideyMod
Community Support Moderator @Experts Exchange
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.