?
Solved

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

Posted on 2003-03-28
4
Medium Priority
?
207 Views
Last Modified: 2012-05-11
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>
0
Comment
Question by:gabriellw
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 

Author Comment

by:gabriellw
ID: 8239065
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
 

Author Comment

by:gabriellw
ID: 8239342
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
 

Accepted Solution

by:
SpideyMod earned 0 total points
ID: 8239381
PAQ'd and points refunded.

SpideyMod
Community Support Moderator @Experts Exchange
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

800 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question