OraTransplant

Using IFrame Shim to (partly) cover a Java applet

26 October 2007 at 20:31 CEST | In Other, Software development |

This week I had a conversation with someone who was interested in integrating Oracle Forms and JSF. They had some issues with the Forms Java applet and a JavaScript/CSS dropdown menu. They wanted to have the dropdown menu to appear in front of the applet. The default behavior of both Internet Explorer and Firefox is to always draw the Java applet on top. This is not something you can fix by setting the z-index or any other CSS property.

I was intrigued by this problem and wanted to find a solution. I can see it being a very common requirement to have a JavaScript/CSS dropdown menu in a web application that embeds Oracle Forms. This can lead the way to replacing the former Oracle Forms menu with a web based menu. Then, over time one can change menu-items that call pages embedding an Oracle Form to menu-items that call "true" web pages. This is clean and smooth path to migrate from Oracle Forms to JSF (or any other web technology) without a big-bang rewrite of all your Forms.

After some googling, I found the solution (aka trick). It's got the nice name "IFrame Shim". Some objects, like applets, select-boxes and iframe's are not actually drawn by your browser but by the operating system. These objects are always on top of the HTML elements rendered by your browser. You cannot put them below HTML elements with a lower z-index. The key to the solution is that both applets and iframe's are managed by the operating system. You can layer these with respect to each other with the z-index. You can create an iframe with the exact same position and dimension as the div (or any other element) you want to float on top of the applet. You can have the iframe sit on top of the applet with a higher z-index. The HTML (e.g. div element) can float on top of the iframe with an even higher z-index.

You're not putting any content or document in the iframe. It's just a trick to have your browser layer the HTML element on top of the iframe and the two of these on top of the applet. See for your self with a simple demo or look at the source code below. I've tested the solution with MS Internet Explorer 5.5, 6.0, 7.0 and Mozilla Firefox 2.0.

PLAIN TEXT

HTML:

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<script type="text/javascript">
function mouseIn() {
// create an iframe at the exact same position and
// size as the sub div
// Google "iframe shime" for more information
var shimmer = document.createElement('iframe');
shimmer.id='shimmer';
shimmer.style.position='absolute';
// normally you would get the dimensions and
// positions of the sub div dynamically. For demo
// purposes this is hardcoded
shimmer.style.width='150px';
shimmer.style.height='80px';
shimmer.style.top='100px';
shimmer.style.left='80px';
shimmer.style.zIndex='999';
shimmer.setAttribute('frameborder','0');
shimmer.setAttribute('src','javascript:false;');
document.body.appendChild(shimmer);
// make sub div visible
var sd = document.getElementById('subdiv');
sd.style.visibility='visible';
}
function mouseOut() {
var sd = document.getElementById('subdiv');
sd.style.visibility='hidden';
var shimmer = document.getElementById('shimmer');
document.body.removeChild(shimmer);
}
</script>
<style type="text/css">
#maindiv {display:block; width:150px; height:80px;
background:red;}
#subdiv {display:block; width:150px; height:80px;
background:blue; position:absolute;
top:100px; left:80px;
z-index:1000; visibility:hidden;}
</style>

<div id="maindiv" onmouseover="mouseIn();"
onmouseout="mouseOut();">
<p>MAIN DIV</p>
<p>move mouse here</p>
</div>

<div id="subdiv">
<p>SUB DIV</p>
</div>

<applet style"border:1px solid blue;"
codebase="http://java.sun.com/applets/jdk/1.4/demo/applets/Clock/"
code="Clock.class" width="170" height="150">
</applet>
</body>
</html>

47 Comments

TrackBack URI

I've used this technique in my website, http://www.upnext.com -- however, it doesn't extend to Mac browsers, specifically Mac Firefox or Safari 2.0. For these browsers we had to alter our drop-down so that it appeared to the side of the applet instead of over it. I'd love to find a solution though!

Comment by Raj Advani — 5 November 2007 #
A lot of people are reluctant to use an iframe because they fear it will negatively effect their search engine rankings.

Comment by MJ — 2 January 2008 #
I just tested and it works on Safari Mac 2.05

Comment by Jay — 11 January 2008 #
Iframe Shim works flawlessly. Perfect. Thank you.

Comment by plastik — 25 January 2008 #
Do all forgets about Opera Browser? :O

The Shim overlays the Applet on Internet Explorer, Gecko (Firefox, e.t.c.) and Safari.

But it dont overlays the Applet on Opera.

I think you should make more researches.

Comment by PowerPatrick — 9 March 2008 #
I tried alot of the solutions in google. And with applets, I could not get z-index to work. Seems the only thing that worked for me was to do what is done here, create the iframe on the fly. Creating it ahead of time and adjusting position worked for select boxes in IE6, But not for flash and Java applets,

This was the trick.

Comment by John M Ventimiglia — 12 June 2008 #
The iframe shim in the demo only partically works for me on Safari3/OSX. Specifically, any space the clock applet renders into (e.g. the clock hands and digits) overwrites the sub div. Firefox2/OSX has the same problem.

Anyone know how to get iframe shims to work with java applets in Safari3/OSX or Firefox2/OSX? Or any other technique to show html content on top of java applets?

Thanks!

Comment by Evan — 13 June 2008 #
Techniques are good but are not applicable.... Anyways thank sfor the post....

http://www.greatearthpharmacy.com/

Comment by Compound Pharmacy — 18 July 2008 #
This does not work in Safari

Comment by Tina — 17 October 2008 #
Very useful page to read. Thanks for the info.

Comment by estetik — 24 November 2008 #
thank you very much very nice article

Comment by hospital — 4 March 2009 #
thank you Estetik

Comment by Burun Estetiği — 5 March 2009 #
I have a situation where the top page has two IFRAMES (actually more, but we'll consider two). Iframe A has the Applet, Iframe B has the HTML which is intended to overlay the applet (set at a higher z-index and with a rectangle that overlaps the applet). This works great in IE and FF.

In Chrome, this doesn't work. The solution is to have a third Iframe C within Iframe A. Iframe C has a z-index within Iframe A that is higher than the z-index of the Applet. It is positioned so that it's rectangle as considered by the top page is identical to that of the Iframe B overlay.

This basically means Iframe C masks out the appropriate rectangle of the Applet, and that the Iframe B is then able to draw over that rectangle.

Safari though still has no solution I can find.... grr... Does anyone know of one? Is this something that the HTML specifications clarify in such a way that this could be considered a Safari bug and therefore get some attention? I just downloaded Safari 4 hoping this issue would go away but it does not..

Comment by jlarson — 11 March 2009 #
That is one awesome looking demo. I love its simple, sleek, and classic yet contemporary design.

Comment by Estetik — 3 April 2009 #
is it tested with Chrome?

Comment by Anton — 17 April 2009 #
Good work! I just tested in Chrome!

Comment by Anton — 17 April 2009 #
what about Opera?

Comment by tim — 3 June 2009 #
This is a hack, and hacks are never good, especially when they are this complicated. The only answer seems to be to redesign your site to avoid the problem. Besides, for those using this to have a drop-down go over your ads' iframes, don't you know that is 100% against any advertising terms of service?

Comment by iGuide — 10 June 2009 #
>The only answer seems to be to redesign your site to avoid the problem

Get a clue... the only answer is for browser and OS writers to redesign their software to specs. Expecting a drop down menu to be visible shouldnt disrupt the holy grail of advertising!

Comment by John Ventimiglia — 10 June 2009 #
I have a situation where the top page has two IFRAMES (actually more, but we'll consider two). Iframe A has the Applet, Iframe B has the HTML which is intended to overlay the applet (set at a higher z-index and with a rectangle that overlaps the applet). This works great in IE and FF.

In Chrome, this doesn't work. The solution is to have a third Iframe C within Iframe A. Iframe C has a z-index within Iframe A that is higher than the z-index of the Applet. It is positioned so that it's rectangle as considered by the top page is identical to that of the Iframe B overlay.

http://www.medyum.gen.tr" rel="nofollow">Medyum

Comment by medyum — 3 July 2009 #
a very good article da a very useful information ..thank you has to share this information.

Comment by gazeteler — 18 July 2009 #
Thank you for your site. I have found here much useful information...
busd00

Comment by jeims — 18 July 2009 #
Thank you very successful and useful
site I have received the necessary information

Comment by dora hospital — 24 July 2009 #
That is one awesome looking demo. I love its simple, sleek, and classic yet contemporary design.

Comment by medyumlar — 10 August 2009 #
Thank you very much very nice article
Great information! Very useful for me. Thanks a lot.
The idea is awesome. Congrats.
saç ekimi

Comment by saç ekimi — 22 August 2009 #
I can think of a few situations where an Atom feed of my archived posts could come in very handy. I’m sure you can think of several more ways to use this.

Comment by burun estetiği — 2 September 2009 #
As aesthetic surgery operations in the nose of burun estetiği every physician and patient to success will lead the burun estetiği search criteria are included in the courtesy and protectionist approach. As in every aspect of life in surgery, tissue is necessary to act against the gentle as possible. Cartilage or bone tissue from the nose unless you need the slightest interest is very important.

Nose breathing and relaxed good looks of aesthetic surgery in estetik burun ameliyatı addition to benefits such as perhaps even more important is the significant increase in positive self-esteem of people. In this way in my career so many patients have problems with self-confidence increase karşılaştımki how important it is that I have personally witnessed by living.

Comment by burun estetiği — 2 September 2009 #
You can create an iframe with the exact same position and dimension as the div (or any other element) you want to float on top of the applet. You can have the iframe sit on top of the applet with a higher z-index.

Comment by tadalafil — 8 September 2009 #
nice work thanks

balonlu

Comment by Balonlu — 25 September 2009 #
I can think of a few situations where an Atom feed of my archived posts could come in very handy. I’m sure you can think of several more ways to use this.

Pansiyon

Comment by Pansiyon — 25 September 2009 #
very good article

Lüks araç kiralama

Comment by Lüks araç kiralama — 25 September 2009 #
thanks nice site

hediye

Comment by hediye — 25 September 2009 #
very nice site and good article
Tatil

Comment by tatil — 25 September 2009 #
nice site thanks for the article

Comment by Capedocia Hotels — 25 September 2009 #
tekstil promosyon

very nice thanks

Comment by tekstil promosyon — 25 September 2009 #
nice post

Comment by Buy Generic Viagra Online — 13 October 2009 #
nice article

Comment by Buy Cheap Generic Viagra — 13 October 2009 #
This sounds interesting. Thx.

Comment by Andreas Bumgarner — 17 October 2009 #
thank you for the great help
the website is really good

Comment by momo — 19 October 2009 #
thank you very much
the site is really great

Comment by jörn — 19 October 2009 #
thank you for the great help
the wedding rings are very nice

Comment by Trauringe — 28 October 2009 #
thank you
nice Adwokats

Comment by AVUKAT Adwokat — 2 November 2009 #
AVUKAT Adwokat

thank you
nice Adwokats

Comment by AVUKAT Adwokat — 2 November 2009 #
thank you for the great help

Comment by movie download links — 3 November 2009 #
Thank you very much for everything

Comment by medyum — 4 November 2009 #
[code ]Thank you very much for everything[/ code]

Comment by medyum — 4 November 2009 #
thank you for the great help

Comment by Alleinunterhalter — 9 November 2009 #

Trackback/Pingbacks:

hostedhg » Using IFrame Shim to (partly) cover a Java applet

[...] check the full story here [...]
Suneth Mendis » iFrame dynamic resizing revisited

[...] iFrames (along with applets) are handled differently on browsers as compared to other elements. In fact iframes are not handled by browsers at all, but by the OS. So the solution will never be the same for all the browsers. So heres what we [...]
Problem mit Layern - Vielleicht etwas f�r die Profis.. - Seite 2 - XHTMLforum

[...] das allerh�chstens mit Javascript und iframes. Aber das geht angeblich auch nicht im Opera. OraTransplant Using IFrame Shim to (partly) cover a Java applet Also, so eine Allround-L�sung gibt es daf�r auch nicht. Das mit dem wmode k�nntest du aber mal bei [...]
SlackCoders.com » Blog Archive » iFrame dynamic resizing revisited

[...] iFrames (along with applets) are handled differently on browsers as compared to other elements. In fact iframes are not handled by browsers at all, but by the OS. So the solution will never be the same for all the browsers. So heres what we [...]
fix java applet dimensions

[...] Forms and JSF. They had some issues with the Forms java applet and a JavaScript/CSS dropdown menu.http://www.oratransplant.nl/2007/10/26/using-iframe-shim-to-partly-cover-a-java-applet/Read "Repaint() doesnt work :(" at Java Programming Forum....util.*; import java.awt.*; import [...]
OraTransplant » Using IFrame Shim to (partly) cover a Java applet

[...] Read the rest here: OraTransplant » Using IFrame Shim to (partly) cover a Java applet [...]