Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium


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

Posted on 2003-03-28
Medium Priority
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];
            this.chromelessWW.execScript('var cx='+this.xPos+';');
            this.chromelessWW.execScript('var cy='+this.yPos+';');

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);
            this.chromelessWW.execScript('var cw='+this.w+';');
            this.chromelessWW.execScript('var ch='+this.h+';');

ChromelessWindow.prototype.runCode = function(){
            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);
            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('<META HTTP-EQUIV="imagetoolbar" CONTENT="no">');
            this.chromelessWW.document.writeln('BODY{border:0px !important}');
            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('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('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.title = this.title;
            this.chromelessWW.document.title = this.title;

// FILE: "test.html" -- this loads the chromeless window automatically
<script type="text/javascript" src="new.js"></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;
<body bgcolor=#cccccc onLoad="myChromeless.openChromeless();"></body>
Question by:gabriellw
  • 2

Author Comment

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.

Author Comment

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

Accepted Solution

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

Community Support Moderator @Experts Exchange

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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

580 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