Horizontales Drop-Down hinter PDF in iFrame.
THE STELL
- html
Hi Leute,
Ich habe ein horizontales CSS-Drop-Down-Menü, das sich, wenn man über eine Kategorie fährt, die Unterseiten anzeigt. Da nicht alle Browser CSS-Drop-Downs unterstüzen (Steinzeitbrowser wie IE6), gibt es auch noch ein JS, dass die Drop-Downs öffnet.
Es ist sehr wichtig, dass die PDFs im Fenster geöffnet werden. Und da das mit include() nicht geht, muss ich die einfache, aber immer noch gute iFrame-Technik anwenden.
Wenn ich eine normale Seite in einen Inlineframe sperre, funzt auch noch alles: Das Drop-Down überlagert die Webseite im iFrame. So bald ich statt einer HTML-Datei ein PDF-Datei framiesiere, ist das aber nicht mehr so: Die drop-downs verschwinden hinter dem Adobe Programme (oder einem anderen PDF-Leser des Nutzers).
Ich weiß, dass es eine Externe Anwendung ist, aber bei Flash geht das auch, also sollte es bei PDF doch auch irgendeine Lösung geben, oder?
Ich weiß auch, dass sich das nicht bei allen Usern in der Iframe startet. Ich will aber, dass die User, bei denen das geht, den vorteil geniesen können.
Hier noch der Problemcode zum ausprobieren:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>css drop down</title>
<style type="text/css">
body{font-family:georgia;}
#container{width:500px;margin:auto;font-size:11pt;}
#menu{position:absolute;margin-top:10px;}
#menu ul .item{display:none;}
#menu ul:hover .item{display:block;background:#000;padding:1px;margin:1px;}
#menu ul:hover .item a{color:#fff;text-decoration:none;}
#menu ul:hover .item a:hover{color:#999;}
#menu ul{width:100px;float:left;margin:0px;padding:2px;background:#b10000;list-style:none;}
.clear{clear:both;height:30pt;}
#content iframe{width:100%;height:600px;}
</style>
</head>
<body>
<div id="container">
<h1>css drop down</h1>
<div id="menu">
<ul id="item1">
<li class="top">menu item</li>
<li class="item"><a href="#">menu item 1</a></li>
<li class="item"><a href="#">menu item 2</a></li>
<li class="item"><a href="#">menu item 3</a></li>
</ul>
<ul id="item2">
<li class="top">menu item</li>
<li class="item"><a href="#">menu item 1</a></li>
</ul>
<ul id="item3">
<li class="top">menu item</li>
<li class="item"><a href="#">menu item 1</a></li>
<li class="item"><a href="#">menu item 2</a></li>
</ul>
<ul id="item4">
<li class="top">menu item</li>
<li class="item"><a href="#">menu item 1</a></li>
<li class="item"><a href="#">menu item 2</a></li>
<li class="item"><a href="#">menu item 3</a></li>
<li class="item"><a href="#">menu item 4</a></li>
</ul>
</div>
<div class="clear"></div>
<div id="content">
<iframe src="http://www.oeaw.ac.at/ita/ebene5/wp-mpifg.pdf"></iframe>
Und das Menü verschwindet hinter dem PDF.
PS: Ich habe für das Beispiel den Code von der Basis meines Menüs genommen, da das Menü meiner Seite zu komplex zu exportieren ist und zum demonstrieren tut es das auch. das heißt, dass das JS noch nicht drin ist.</div>
</div>
</body>
</html>
Ob das Darüberlegen des Menüs funktioniert oder nicht, hängt davon ab, wie weit das Programm, welches im darunterliegenden iframe läuft, die Kontrolle über die Ausgabe an sich reißt. Der Adobe Reader ist geradezu dafür berüchtigt, alle anderen Programme zu überlagern. Deine Chancen sehen also schlecht aus.
Übrigens: bei Flash hast Du das gleiche Problem, wenn Du wmode="opaque" setzt.
Gruß, LX
Hallo LX,
Ob das Darüberlegen des Menüs funktioniert oder nicht, hängt davon ab, wie weit das Programm, welches im darunterliegenden iframe läuft, die Kontrolle über die Ausgabe an sich reißt.
Wahrscheinlich hängt es davon ab, wie die Pluginschnittstelle arbeitet. Üblicherweise ist ein Plugin eine "schwergewichtige" Komponente, d.h. es bekommt sein eigenes, vom Betriebssystem/Fenstersystem verwaltetes Fenster. Die restliche Oberfläche des Browsers oder zumindest die Webseite wird allerdings innerhalb eines einzelnen Fenster gerendert. Dadurch kann das HTML-Fenster nur insgesamt vor oder hinter dem Plugin-Fenster liegen.
Generell könnte man das auf zwei Arten lösen:
Grüße
Daniel
Hallo LX,
Übrigens: bei Flash hast Du das gleiche Problem, wenn Du wmode="opaque" setzt.
Nein im Gegenteil, wenn er wmode="opaque" oder wmode="transparent" setzt, hat er das Problem nicht, sondern nur, wenn er Flash im Default-wmode-Wert "window" belässt.
Vielleicht wäre das ja auch die Lösung des Problems:
http://www.scribd.com/doc/94604/Flash-and-PDF-Documents
Bei nicht-durchsichtigen in einen Flash-Film eingebetteten PDF-Dokumenten wäre da aber in jedem Fall der wmode "opaque" für den Flashfilm zu bevorzugen.
Gruß Gernot
Hi,
Es ist sehr wichtig, dass die PDFs im Fenster geöffnet werden.
Wie zwingst Du die Besucher Deiner Seite dazu, ein PDF-Plugin zu installieren?
Hier noch der Problemcode zum ausprobieren:
Das Menü öffnet sich problemlos über dem leeren iframe (während das PDF im externen PDF-Viewer angezeigt wird).
cu,
Andreas
Hi,
Wie zwingst Du die Besucher Deiner Seite dazu, ein PDF-Plugin zu installieren?
Wenn die Leute das Plugin nicht haben öffnet sich doch ein eigenes Fenster. Oder?
Das Menü öffnet sich problemlos über dem leeren iframe (während das PDF im externen PDF-Viewer angezeigt wird).
Aber bei den Leuten mit Plugin wird das Menü hinter dem integrierten PDF-Programm angezeigt.
lg
Hi,
Wenn die Leute das Plugin nicht haben öffnet sich doch ein eigenes Fenster. Oder?
Richtig. Aber Du schriebst, daß es sehr wichtig ist, daß das PDF im Browserfenster geöffnet wird ...
cu,
Andreas
Wenn die Leute das Plugin nicht haben öffnet sich doch ein eigenes Fenster. Oder?
Richtig. Aber Du schriebst, daß es sehr wichtig ist, daß das PDF im Browserfenster geöffnet wird ...
Ja, aber man kann die Leute ja nicht zwingen, das Plugin zu installieren. Aber ich will wenigstens, dass die Leute, die das Plugin haben, die Vorteile genießen können.
lg