Alex: Wieder mal: Problem mit Dropdownliste unter DIV

SELF-Forum

Wieder mal: Problem mit Dropdownliste unter DIV

Alex
– Informationen zu den Bewertungsregeln

Servus Leute!
Es geht wieder einmal um das bekannte Problem, dass Dropdown-Listen ohne Workaround (zumindest im IE) nicht von Ebenen (DIV) überlappt werden können. Im Archiv habe ich zwar eine Lösung des Problems mittels IFRAME gefunden, dieses will aber schlicht und einfach mit dem dynamischen Menü (aus SELFHTML) nicht funktionieren.

Findet vielleicht jemand den Fehler im unten stehenden Script? Das wäre super...

Vielen Dank im Voraus!

<html><head><title>Test</title>
<script type="text/javascript" src="dhtml.js"></script>
<script type="text/javascript">
<!--
function IfrSetVisible(state) {
   var DivRef = document.getElementById('Nav');
   var IfrRef = document.getElementById('DivShim');
   if(state)
   {
    DivRef.style.display = "block";
    IfrRef.style.width = DivRef.offsetWidth;
    IfrRef.style.height = DivRef.offsetHeight;
    IfrRef.style.top = DivRef.style.top;
    IfrRef.style.left = DivRef.style.left;
    IfrRef.style.zIndex = DivRef.style.zIndex - 1;
    IfrRef.style.display = "block";
   }
   else
   {
//  DivRef.style.display = "none";
    IfrRef.style.display = "none";
   }
}

function Menue() {
 if(DOM) {
   if(MS)
     getElem("id","Nav",null).style.top = document.body.scrollTop + 50;
   else
     getElem("id","Nav",null).style.top = window.pageYOffset + 50;
 }
 if(DOM || MS) {
   if (!DOM) getElem("id","Nav",null).style.top = document.body.scrollTop + 50;
   if (OP) getElem("id","NavLinks",null).style.pixelTop = NavLinksPos;
   getElem("id","Nav",null).style.visibility = "visible";
 }
 else if(NS) {
  getElem("id","Nav",null).visibility = "show";
  getElem("id","Nav",null).top = window.pageYOffset + 50;
 }
 IfrSetVisible(true);
}

function noMenue() {
 if(DOM || MS)
  getElem("id","Nav",null).style.visibility = "hidden";
 if(NS)
  getElem("id","Nav",null).visibility = "hide";
 IfrSetVisible(false);
}

function handleMove(ev) {
 if(!MS) {
   Event = ev;
   if(Event.screenX < 270)
     Menue();
   else if(Event.screenX > 420)
     noMenue();
 }
}

function MShandleMove() {
 if(MS) {
  if(window.event.clientX < 30)
    Menue();
  else if(window.event.clientX > 200)
    noMenue();
  }
}

function Event_init() {
 if(DOM && !MS && !OP) {
  getElem("tagname","body",0).addEventListener("mousemove", handleMove, true);
 }
 if(NS) {
  document.captureEvents(Event.MOUSEMOVE);
  document.onmousemove=handleMove;
 }
 if (DOM && OP) {
    document.onmousemove=handleMove;
    NavLinksPos=42; //Position des Bereiches NavLinks
    getElem("id","NavLinks",null).style.pixelTop=NavLinksPos;

}
 if (MS) getElem("tagname","body",0).onmousemove=MShandleMove;
}
//-->
</script>
<style type="text/css">
<!--
body { margin-left:50px; margin-top:20px; margin-right:50px; }
#Nav { position:absolute; top:50px; left:0px; padding:0px; visibility:hidden; margin:0px; z-index:100; background-color:white; display:none;}
#NavLinks { position:absolute; top:42px; left:42px; padding:0px;}
a.nav:link    { color:#000080;
      font-family:Tahoma,sans-serif; font-weight:bold; font-size:10pt; text-decoration:none; }
a.nav:visited { color:#000080;
      font-family:Tahoma,sans-serif; font-weight:bold; font-size:10pt; text-decoration:none; }
a.nav:hover   { color:#FFFFFF; background-color:#000080;
      font-family:Tahoma,sans-serif; font-weight:bold; font-size:10pt; text-decoration:none; }
a.nav:active  { color:#000080;
      font-family:Tahoma,sans-serif; font-weight:bold; font-size:10pt; text-decoration:none; }
-->
</style>
</head>
<body onLoad="Event_init()" background="navigation_back.gif" bgcolor="#FFFFFF">

<h1>Die Seite mit der pfiffigen Navigation</h1>

<p>Einfach mit die Maus Richtung linken Fensterrand bewegen.
Um das Men&uuml; wieder wegzubekommen, Maus wieder zum rechten Fensterrand bewegen.</p>

<p>Wird das dynamische Menu alle Formular-Elemente überlappen?<br>
<form name="test">
  <input type="text" width="10"><br>
  <textarea></textarea><br>
  <select name="test_select" size=2>
    <option value="1">1</option>
    <option value="2">2</option>
  </select><br>
  <input type="checkbox" value="test"> select<br>
  <button name"testbutton" type="button">Test-Button</button>
</form>
</p>

<p>Und jetzt kommen noch etliche leere Abs&auml;tze, damit auch sichtbar wird,
da&szlig; das Men&uuml; immer an der gleichen Stelle angezeigt wird, egal wie weit man
scrollt.</p>

<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>

<p>Na, das d&uuml;rfte reichen :-)</p>

<div id="Nav">
 <img src="navigation.gif" width="250" height="450" border="0" alt="">
 <div id="NavLinks">
 <style type="text/css">
  <!--
   a.nav:link    { color:#000080;
      font-family:Tahoma,sans-serif; font-weight:bold; font-size:10pt; text-decoration:none; }
   a.nav:visited { color:#000080;
      font-family:Tahoma,sans-serif; font-weight:bold; font-size:10pt; text-decoration:none; }
   a.nav:hover   { color:#FFFFFF; background-color:#000080;
      font-family:Tahoma,sans-serif; font-weight:bold; font-size:10pt; text-decoration:none; }
   a.nav:active  { color:#000080;
      font-family:Tahoma,sans-serif; font-weight:bold; font-size:10pt; text-decoration:none; }
   -->
  </style>
  <a class="nav" href="http://selfhtml.teamone.de/"><b>SELFHTML</b></a><br>
  <a class="nav" href="http://selfaktuell.teamone.de/"><b>SELFHTML aktuell</b></a><br>
  <a class="nav" href="http://forum.de.selfhtml.org/"><b>SELFHTML Forum</b></a><br>
  <a class="nav" href="http://selfaktuell.teamone.de/artikel/"><b>Feature Artikel</b></a><br>
 </div>
</div>
<iframe
  id="DivShim"
  src="javascript:false;"
  scrolling="no"
  frameborder="0"
  style="position:absolute; top:0px; left:0px; display:none;">
</iframe>
</body></html>

Gruß,
Alex

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Wieder mal: Problem mit Dropdownliste unter DIV

    Yeti
    – Informationen zu den Bewertungsregeln

    Hi Alex,

    ohne mich durch deinen kompletten Code gekämpft zu haben (meiner ist mir schon genug)... ich hatte dasselbe Problem und habe es mittlerweile behoben: <./?t=89155&m=532731>

    HIH, Yeti

    --
    Habe nun, ach! WInfo, BWL, und Mathe, Und leider auch Info!
    Durchaus studiert, mit heißem Bemühn. Da steh' ich nun, ich armer Thor!
    Und bin so klug als wie zuvor!
    sh:( fo:| ch:? rl:? br:  n4:& ie:( mo:| va:| de:[ zu:) fl:| ss:) ls:< js:|
    http://community.de.selfhtml.org/fanprojekte/selfcode.htm
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. nicht perfekt, aber einen Versuch wert...

      Alex
      – Informationen zu den Bewertungsregeln

      Hi Yeti,
      vielen Dank für den Tipp!

      ohne mich durch deinen kompletten Code gekämpft zu haben (meiner ist mir schon genug)... ich hatte dasselbe Problem und habe es mittlerweile behoben: <./?t=89155&m=532731>

      Ich habe die Suchfunktion ja wirklich zu Hochtouren angetrieben, aber über diesen Thread bin ich leider nicht gestrauchelt!

      Ich werde es einmal so versuchen, obwohl mir eine teilweise Überdeckung schon besser gefallen würde... :-)

      Gruss,
      Alex

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln