Placing html content in front of ge window

[Markw65]

Lots of people have asked, and there's a defect report giving some
hints on how to do it, but not much in the way of demos.

I've put one together using the "Prototype Window Class" (http://
prototype-window.xilinus.com/). pwc already had some "ishim" support,
but needed some fixups to make it work with ge (see fixup.js).

The demo is here: http://maps.myosotissp.com/demos/popups.html

In addition to the pwc windows (which, with fixup.js, just work) I've
also written a function that lets you create icon controls over the
earth instance - see create_ishim_icon_control. It basically creates a
screen overlay *and* a icon/ishim on top of each other.

The reason for the icon/ishim is that a) you can create a control
thats appears independently of ge (so eg the demo "works" in Opera,
minus the ge window), and b) you can control the cursor etc when the
mouse is over it (which I dont think you can do with screen overlays).
The reason for the screen overlay is that it lets you have rounded
corners on the icon (and have the iframe inset a little).

Roman has hinted that if you get the layering right, you *can* have
transparent iframes which allow the content on top of them to be seen
(and hence have rounded corner windows work nicely). But I've not been
able to achieve that. If anyone sees how to do it, please let me know!

You can also look at: http://maps.myosotissp.com/demo.html to see this
in use.

Mark

[sohming]

Hi, Mark. I have looking for iframe shim method long time ago but with
no revail. I just saw ur works. Really nice.
I would like to implement it to my current school project. Is there
anywhere i can get those .js file in order for me to further
understand the code?

Thanks in advanced.
Sohming

> You can also look at:http://maps.myosotissp.com/demo.htmlto see this
> in use.
>
> Mark

[sohming]

Hi, Mark.
I have found all the .js file. But i missed the fixup.js. Where can i
get it?

Thanks in advanced.
Sohming

> > Mark- Hide quoted text -
>
> - Show quoted text -

[Markw65]

It should be right along with all the other files:
http://maps.myosotissp.com/demos/fixup.js

Mark

[Markw65]

Just realized that indexing was turned off for the directory.

I've turned it on, so if you go to http://maps.myosotissp.com/demos
you will be able to see/download the files directly.

Mark

[sohming]

Hi, Mark:

Thanks for your help. I tried the sample but i found some error. The
"debug" iframe box is lied at the top of ge window but not within it.
Is it i missed some css file?

Thanks in advanced.
Sohming

On Feb 4, 3:21 am, Markw65 wrote:
> Just realized that indexing was turned off for the directory.
>

> I've turned it on, so if you go tohttp://maps.myosotissp.com/demos

> > > > - Show quoted text -- Hide quoted text -

[Markw65]

Yes. You're missing the prototype window styles.

If you use firefox, and the jsview plugin, it will make it very easy
to find all the files you need, and download them.

For now you can also just go to http://prototype-window.xilinus.com/download.html
and download the pwc package, which has all the css/icons in it.

I'll try to repackage the whole demo as a standalone .zip, that can be
downloaded and used directly - just as soon as I have time :-)

Mark

[sohming]

OK, thanks for your help. I will play around with it at the moment.

Sohming

On Feb 4, 11:03 pm, Markw65 wrote:
> Yes. You're missing the prototype window styles.
>
> If you use firefox, and the jsview plugin, it will make it very easy
> to find all the files you need, and download them.
>

> For now you can also just go tohttp://prototype-window.xilinus.com/download.html

[metaluc]

Marlw65,

Thanks so much for posting this. I found the demo to be quite useful.
A bit complicated for a demo, but still quite useful and informative.

> You can also look at:http://maps.myosotissp.com/demo.htmlto see this
> in use.
>
> Mark

[Markw65]

I've updated the demo - now has proper "transparent" rounded corner
windows.

Also, if you click the top left "button", you'll get an about box with
links to browse the source, and download as a zip file.

If you download, and unpack the zip, it *almost* works straight from
your desktop. The only issue is that the geplugin wont read .png files
from the local disk (even when the web-page its running from is
local).

Mark

On Feb 4, 7:03 am, Markw65 wrote:
> Yes. You're missing the prototype window styles.
>
> If you use firefox, and the jsview plugin, it will make it very easy
> to find all the files you need, and download them.
>

> For now you can also just go tohttp://prototype-window.xilinus.com/download.html

[Markw65]

I've updated the demo again.

In this version, the about box is modal. The earth, and any other web
content is "greyed" out, and clicks on the earth and on other
background content is ignored.

The main changes are in fixup.js, to patch the
WindowUtilities.disableScreen/WindowUtilities.enableScreen functions
from the PWC library to also "disable" the earth.

Basically, it creates a semitransparent overlay for the earth (pwc
already creates a semitransparent div to cover the screen - but of
course it doesnt show up over the earth div). Then it traps all the
mouse events, and stops them.

The only glitch was that it doesnt seem to be possible to trap mouse
events on the nav control. So I hide that in disableScreen, and
restore it in enableScreen.

With those changes, modal windows created by pwc are automatically
modal wrt the earth too.

Mark

[Roman N]

Nice changes Mark! The only suggestion I have is to make the UI a
little more obvious -- i.e. maybe a button that says "show modal
dialog box" or something.

Great stuff!
- Roman

[Markw65]

On Feb 26, 4:21 pm, Roman N wrote:
> The only suggestion I have is to make the UI a
> little more obvious -- i.e. maybe a button that says "show modal
> dialog box" or something.

Ah yes. A UI. Ive heard about those things :-)

Mark

[sohming]

I put this great stuff and implement it to my website. I done with it
but i can't make a fisheye menu in there.
I found there must be some relation with the prototype.js in pwc. But
i really can't get where did it goes wrong.
Is there any suggestion?

Thanks
Sohming

[TMAX]

I would love to see your samples of the maps.myosotissp.com/demos, but
I cannot connect to the website, doesn't come up. Thanks man!

[Markw65]

Sorry, Ive been having problems with my web host for the last week -
they moved my account to another server, and seem to have made a
number of blunders on the way.

I think everything is finally resolved (as of the last few minutes),
and the site should be up and working again. I dont expect any further
outagaes (but then, they promised little to no outage before the
move).

Mark

[TMAX]

Site came up yesterday, looks great, thank you so much for the demos
dude! Makes total sense and much appreciated... I needed your version
along with what I already did.

Just if anyone else cares. I did want to put a "facebox" style box
over the GE window, once a user clicks search, then the confirmation
"popup" modal's the screen etc and a "please wait" happens. Well in my
case I was also calling a js function to make the ge.window visibility
to false, then the popup opens and the page background grayed out etc,
then when the search was done and the "pop up" was closed, the ge
window is displayed again and with new results. That worked too, but
your demo keeps the ge window on, pretty cool...

Later...

[johnb]

Mark,
This is really awesome! Definitely a clever solution. I'm just
having one problem that's a little strange. I'm using the window to
display an embedded Flex application. It displays properly and looks
great, but the mouse clicks are all offset by what appears to be the
amount of inset of the content to the window. In other words, when I
click on the Flex GUI, it's as if I'm actually clicking down and to
the right of where my cursor is pointing. Any idea what would cause
that?

When I don't include fixup.js, the window decoration screen overlays
are of course missing, but the flex div appears and operates
correctly.

Here's what the content of the div displayed in the dialog looks like:
function showWindow(title, url) {
var dialogs = $("dialogs");
var dialogDiv = document.createElement('div');
dialogDiv.innerHTML='<embed type="application/x-shockwave-flash" ' +
'src="' + url + '" ' +
'id="balloon" ' +
'name="balloon" bgcolor="#ffffff" ' +
'quality="high" wmode="opaque" ' +
'menu="true" height="100%" ' +
'width="100%"/> ';

// The rest of the method is just like in the tutorial
}

John

> > > >contentis "greyed" out, and clicks on the earth and on other
> > > > backgroundcontentis ignored.

> > > > > > > > > > > > transparent iframes which allow thecontenton top of them to be seen

[Markw65]

Im not sure, but I had exactly the same problem when I put the google
street view in a pwc window (street view is also built using flash).
For me, it only showed up in FF. In IE, everything worked fine (which
is a rather unusual turn of events, in my experience!).

I never really understood what was causing the problem, and my
solution is a hack that I still dont like (I should look into your
hint that fixup.js is causing it, and see if I can find the real
culprit).

I surrounded the street view div with a pair of divs. The outer was
relatively positioned, and the inner absolutely positioned. Then,
after the street view initializes, I change the position of the
window.content to relative (and for whatever reason, this *has* to be
done after the flash initializes).

So if you're having the same problem that I was, you would need to
add
dialogDiv.style.position = "relative";

and surround your innerHtml with something like
<div style="position:absolute"> <embed ... /> </div>

And then you would need to execute:

dialogDiv.parentNode.style.position = "relative";

*after* your flash has finished initializing.

Mark