Bettina: Probleme mit showhide Funktion

Hallo,

ich habe ein akutes Problem und würde mich sehr freuen, wenn mir jemand helfen kann! Ich habe eine Navigation mit Aufklappmenü, realisiert mit showhide. Firefox zeigt die Datei ohne Probleme an. Leider öffnet der I.E. bei onklick die neue Ebene nicht. Warum nicht?

Ein anderes Problem habe ich beim Menupunkt Home. Dort soll wiederum ein bereits ausgeklapptes div verschwinden.

Wer kann mir helfen??

Grüße,
Bettina

Hier der Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>:::dhtml.menu.v1:::</title>

<script type="text/javascript">
<!--
// Arrays für subNav
var maincat = new Array();
maincat[0] = 'cat1';
maincat[1] = 'cat2';
maincat[2] = 'cat3';
maincat[3] = 'cat4';
maincat[4] = 'cat5';

// subNav ein- und ausblenden
function ShowHideMain(divid)
{
        if(document.getElementById(divid).style.display=="none")
        {
                for(i=0;i<maincat.length;i++)
                {
                        document.getElementById(maincat[i]).style.display="none";
                }

document.getElementById(divid).style.display="block";
        }
        else
        {
                document.getElementById(divid).style.display="none";
        }
}

// aktiven Link hervorheben
function aktivieren(strHref)
{
    if(document.getElementById)
        {
            for(i=0;i<document.links.length;++i)
                {
                    if(String(document.links[i].className).match(/^(main|clicked)$/))
                        {
                            document.links[i].className=(document.links[i].href==strHref)?'clicked':'main';
                        }
                }
        }
}
//-->
</script>

<style type="text/css">
<!--
#navBox {
width: 890px;
position: absolute;
left: 50%;
margin-left: -445px;
top: 20px;
height: 110px;
background: #c0c0c0;
}

#mainNav {
width: 200px;
height: 100px;
border-right: 2px solid #dfdfdf;
margin: 5px 0 0 5px;
}

#subNav {
width: 200px;
height: 100px;
position: absolute;
left: 205px;
top: 5px;
}

.infoBox {
width: 200px;
height: 100px;
border-right: 2px solid #dfdfdf;
}

a:link, a:visited {
display: block;
width: 195px;
font-family: arial, sans-serif;
color: #fff;
font-size: 11px;
font-weight: bold;
text-decoration: none;
padding-left: 5px;

}

a.clicked {
background: #dfdfdf;
}
-->
</style>

</head>
<body>

<div id="navBox">
     <div id="mainNav">
          <a href="#home" class="clicked" onclick="aktivieren(this.href)">Home</a>
          <a href="#cat1" class="main" onclick="ShowHideMain('cat1');aktivieren(this.href)">Main1</a>
          <a href="#cat2" class="main" onclick="ShowHideMain('cat2');aktivieren(this.href)">Main2</a>
          <a href="#cat3" class="main" onclick="ShowHideMain('cat3');aktivieren(this.href)">Main3</a>
          <a href="#cat4" class="main" onclick="ShowHideMain('cat4');aktivieren(this.href)">Main4</a>
          <a href="#cat5" class="main" onclick="ShowHideMain('cat5');aktivieren(this.href)">Main5</a>
     </div>

<div id="subNav">
          <div id="cat1" class="infoBox" style="display:none">
               <a href="#">Link1</a>
               <a href="#">Link2</a>
               <a href="#">Link3</a>
          </div>
          <div id="cat2" class="infoBox" style="display:none">
               <a href="#">Link4</a>
               <a href="#">Link5</a>
               <a href="#">Link6</a>
          </div>
          <div id="cat3" class="infoBox" style="display:none">
               <a href="#">Link7</a>
               <a href="#">Link8</a>
          </div>
          <div id="cat4" class="infoBox" style="display:none">
               <a href="#">Link9</a>
               <a href="#">Link10</a>
          </div>
          <div id="cat5" class="infoBox" style="display:none">
               <a href="#">Link11</a>
               <a href="#">Link12</a>
          </div>
     </div>
</div>

</body>
</html>

  1. Bei mir funktioniert es teils.

    IE 6.0 führt den Onclick-Befehl korrekt aus. Außer bei der Home-Option.

    CSS-Fehler. Die Texte in den Links sind etwa um 50 Pixel nach links verschoben. Ist jedoch behebbar ...

    Ich wollte es mir mal anschauen, aber so weit fortgeschritten bin ich noch nicht, dass ich sowas kann. Ich arbeite zwar viel mit Javascript auf IE aber das ist mir 'n bischen zu hoch. Ist aber nicht als Kritik gemeint.

    Ich habe dir ein Screenshot beigefügt, wo der Text weg ist.

    Ich hoffe, das hilft dir, ein wenig an CSS oder ähnlichem zu lösen. Also ich würde sagen, du solltest bei den Links die Links-Padding (zumindest bei den Hauptlinks) für IE abfangen und um 50 - 60 erhöhen.

    MFG
    Griever

    Hier der Screenshot:

    1. Hallo Griever,

      leider bin ich selbst meilenweit davon entfernt zu wissen was ich tue. Aber ich hoffe weiterhin auf Tips von den Könnern ;-)
      Vielen Dank Dir!

      Grüße,
      Bettina

  2. Hallo,

    ich habe ein akutes Problem und würde mich sehr freuen, wenn mir jemand helfen kann! Ich habe eine Navigation mit Aufklappmenü, realisiert mit showhide. Firefox zeigt die Datei ohne Probleme an. Leider öffnet der I.E. bei onklick die neue Ebene nicht. Warum nicht?

    Also bei mir (Windows XP SP2, Internet Explorer 6) geht das wunderbar. Was soll denn angeblich nicht gehen?

    1. Hallo Jörg,

      jetzt gehts es bei mir im I.E. auch?! Er hatte die zweite Navigation nicht gezeigt...

      Ein Problem besteht aber immer noch: Wenn die zweite Navigation gezeigt wird und man klickt anschließend auf Home, dann bleibt die zweite Navi stehen. Und das geht nicht nur im I.E. nicht ;-)
      Vielleicht kannst Du ja hier helfen.

      Du hattest also keinen Verschiebungseffekt, den Griever beschrieben hat?

      Danke fürs testen!
      Bettina

      1. Hi.

        Das Problem hatte ich grade gelöst ...

        MFG
        Griever

        1. Hi.

          Das Problem hatte ich grade gelöst ...

          Ups. Code vergessen:

          <script language="JavaScript">
          <!--
          // Arrays für subNav
          var maincat = new Array();
          maincat[0] = 'cat1';
          maincat[1] = 'cat2';
          maincat[2] = 'cat3';
          maincat[3] = 'cat4';
          maincat[4] = 'cat5';

          // subNav ein- und ausblenden
          function ShowHideMain(divid)
          {
                  if(document.getElementById(divid)&&document.getElementById(divid).style.display=="none")
                  {
                          for(i=0;i<maincat.length;i++)
                          {
                                  document.getElementById(maincat[i]).style.display="none";
                          }
                          if(divid != "main")
                          document.getElementById(divid).style.display="block";
                  }
                  else
                  {
                          for(i=0;i<maincat.length;i++)
                          {
                                  document.getElementById(maincat[i]).style.display="none";
                          }
                          if(document.getElementById(divid))
                          document.getElementById(divid).style.display="none";
                  }
          }

          // aktiven Link hervorheben
          function aktivieren(strHref)
          {
              if(document.getElementById)
              {
                      for(i=0;i<document.links.length;i++)
                      {
                              if(String(document.links[i].className).match(/^(main|clicked)$/))
                              {
                                      document.links[i].className=(document.links[i].href==strHref)?'clicked':'main';
                              }
                      }
              }
          }
          //-->
          </script>

          Somit wird, wenn du auf "Home" klickst, die Ganze Navi auf standard zurückgesetzt.

  3. Ich nochmal.

    Möchtest du, dass der IE das Menü via "Home" öffnet und schließt?

  4. Hi,

    home schliesst die offenen Submenues ja nicht. Du kannst z.B. Deine Funktion so umbauen:
    // subNav ein- und ausblenden
    function ShowHideMain(divid)
    {
            if(!divid || document.getElementById(divid).style.display=="none")
            {
                    for(i=0;i<maincat.length;i++)
                    {
                            document.getElementById(maincat[i]).style.display="none";
                    }

    if (divid) document.getElementById(divid).style.display="block";
            }
            else
            {
                    document.getElementById(divid).style.display="none";
            }
    }

    und den home-link abändern:
    <a href="#home" class="clicked" onclick="ShowHideMain(0);aktivieren(this.href);return false">Home</a>

    immer wenn Du anstelle der ID 0 (false) verwendest wird jetzt nur ausgeschaltet. Ansonsten: vergiss das return false in Dummie-Links nicht.

    Gruesse, Joachim

    --
    Am Ende wird alles gut.
    1. Danke!

      Ich werds ausprobieren.
      Ich hoffe ich werde irgendwann mal wissen was ich da eigentlich tue ;-)

      Grüße,
      Bettina