table menu und css display:'none';

kills · 8. Februar 2004

hi leute,

ich hab mir hier ein mini menu gebastelt das einfach beim laden der seite nur oberpunkte anzeigt, und beim andrücken der oberpunkte mittels JS + CSS unterpunkte "aufklappt".

nun habe ich die untermenus in <tr></tr> `s drinne und diese sind mit display:none versehen.

beim anklicken mach ich einfach display:block.

im ie sieht das auch alles super aus und funzt so wie es soll, aber im mozilla rückt er beim "wiederholten klicken des überpunktes" (also beim ausblenden der unterpunkte) das menu nicht mehr so zusammen wie es vorher war.

er lässt also den platzhalter da, und beim erneuten aufklappen klappt sich unter diesem platzhalter das untermenu wiederrum auf.

wenn ich also ein paar mal auf un zu klappe wir mein menu immer größer!


<html>

<head>

   <link rel="stylesheet" type="text/css" href="admin.css">


   <script language='JavaScript'>

   function swap_menu( sMenu ) {

      var oSubMenu = document.getElementById( sMenu );


   	oSubMenu.style.display = ( oSubMenu.style.display == 'none' ) ? 'block' : 'none';


   	return true;

   }

   </script>

</head>

<body>

<table width="100px" cellspacing="0" cellpadding="0" align="center">

   <colgroup>

   <col width="15px" />

   <col width="85px" />


   </colgroup>

   <tr>

      <td onclick="swap_menu( 'sub_News')" class="header" colspan="2">[ News ]</td>

   </tr>

   <tr id="sub_News" style="display: none;" class="sub">

      <td></td>

      <td>


         <a href="content.php?section=news&action=add" target="content">Erstellen</a><br />

         <a href="content.php?section=news&action=list" target="content">Anzeigen</a><br />

      </td>

   </tr>

   <tr style="height: 10px;" class="sub">

      <td colspan="2"></td>

   </tr>

</table>

.

.

.

.

kann mir da jemand weiterhelfen?

Gruß,

kills

loeti · 9. Februar 2004

Hmmm...

Ich habe mal was gebaut, was in den meisten von mir getesteten Browsern funktioniert hat. Hierbei blende ich aber den kompletten Code aus bzw. ein, indem ich ihn immer wieder überschreibe:

   function writeDynamicContent (id, value) {

      if (browser.ie) {

         eval ("document.all." + id + ".innerHTML = \"" + value + "\";");

      } else if ((browser.ns && browser.major < 6)) {

         eval ("with (" + "document." + id + ".document) {open(); write(\"" + value + "\"); close(); }");

      } else {

         eval ("document.getElementById('" + id + "').innerHTML = \"" + value + "\";");

      }

   }

Du müsstest dann in etwa folgendes machen (ungetestet):


<script type="text/javascript">

<!--

var showstr = "<tr class=\"sub\">"

                    + "<td></td>"

                    + "<td>"

                    + "<a href=\"content.php?section=news&action=add\""

                    + " target=\"content\">Erstellen</a><br />"

                    + "<a href=\"content.php?section=news&action=list\""

                    + "target=\"content\">Anzeigen</a><br />"

                    + "</td>"

                    + "</tr>"


var hideStr = "";


var hidden = true;


function swap_menu (id) {

  if (hidden)

      writeDynamicContent (id, showStr);

   else

      writeDynamicContent (id, hideStr);

   hidden = !hidden;

}

//-->

</script>


<tr>

   <td onclick="swap_menu( 'sub_News')" class="header" colspan="2">[ News ]

   </td>

</tr>

<div id=\"sub_News\" >

</div>

Ich weiß jetzt nicht, wie sich das "<div>" neben dem "<tr>" auswirkt, aber es soll halt nur kurz zeigen, wie man meine Funktion verwenden kann. Wahrscheinlich musst du auch syntaktisch noch etwas feilen, ich habe das jetzt einfach mal so aus'm Bauch raus geschrieben. Die Variable "browser" steuert, um welchen Browsertyp es sich handelt. Das müsstest du dann auch noch implementieren, oder einfach folgende (etwas komplexere) Funktion von mir übernehmen:


var browser = getBrowser();

   function getBrowser() {

      var agent      = navigator.userAgent.toLowerCase();

      var searchstr  = "";

      if (agent.indexOf("msie") != -1) {

         searchstr = "msie";

      } else if (agent.indexOf("netscape") != -1) {

         searchstr = "netscape";

      } else if (agent.indexOf("beonex") != -1) {

         searchstr = "beonex/";

      } else if (agent.indexOf("gecko") != -1) {

         searchstr = "rv:";

      } else if (agent.indexOf("opera") != -1) {

         searchstr = "opera";

      }

      if (searchstr != "") {

         var ind        = agent.indexOf(searchstr);

         var subst      = agent.substr(ind + searchstr.length);

         this.major     = parseInt(subst);

         this.minor     = parseFloat(subst);

         this.subminor  = parseFloat(subst.substr(subst.indexOf(".")+1));

      } else {

         this.major = parseInt(navigator.appVersion);

         this.minor = parseFloat(navigator.appVersion);

      }


      this.ns           = (agent.indexOf('netscape') != -1);

      this.ns2          = (this.ns && this.major == 2);

      this.ns3          = (this.ns && this.major == 3);

      this.ns4          = (this.ns && this.major == 4);

      this.ns40         = (this.ns && this.minor >= 4.0 && this.minor < 4.1);

      this.ns405        = (this.ns && this.minor == 4.05);

      this.ns45         = (this.ns && this.minor == 4.5);

      this.ns47         = (this.ns && this.minor >= 4.7 && this.minor < 4.8);

      this.ns476        = (this.ns && this.minor >= 4.76);

      this.ns5          = (this.ns && this.major == 5);

      this.ns6          = (this.ns && this.major == 6);

      this.ns7          = (this.ns && this.major == 7);

      this.ns70         = (this.ns && this.major == 7.0);

      this.ns8          = (this.ns && this.major == 8);


      this.ie           = (agent.indexOf("msie") != -1);

      this.ie3          = (this.ie && this.major == 3);

      this.ie4          = (this.ie && this.major == 4);

      this.ie5          = (this.ie && this.major == 5);

      this.ie50         = (this.ie && this.minor == 5);

      this.ie55         = (this.ie && this.minor == 5.5);

      this.ie6          = (this.ie && this.major >= 6);


      this.opera        = (agent.indexOf("opera") != -1);

      this.opera6       = (this.opera && this.major == 6);

      this.opera605     = (this.opera && this.minor == 6.05);


      this.beonex       = (agent.indexOf("beonex") != -1);

      this.beonex08     = (this.beonex && this.minor == 0.8);

      this.beonex081    = (this.beonex08 && this.subminor == 8.1);


      this.mozilla      = (agent.indexOf("mozilla") != -1 && !this.ie && !this.ns && !this.opera && !this.beonex);

      this.mozilla0     = (this.mozilla && this.major == 0);

      this.mozilla09    = (this.mozilla && this.minor >= 0.9 && this.minor < 1.0);

      this.mozilla094   = (this.mozilla09 && this.subminor == 9.4);

      this.mozilla1     = (this.mozilla && this.major == 1);

      this.mozilla10    = (this.mozilla && this.minor >= 1.0 && this.minor < 1.1);

      this.mozilla11    = (this.mozilla && this.minor >= 1.1 && this.minor < 1.2);

      this.mozilla12    = (this.mozilla && this.minor >= 1.2 && this.minor < 1.3);

      this.mozilla121   = (this.mozilla12 && this.subminor == 2.1);


      this.win          = (agent.indexOf("win")!=-1);

      this.mac          = (agent.indexOf("mac")!=-1);

      this.unix         = (agent.indexOf("x11")!=-1);


      this.ver          = this.minor;

   }

Anmelden

table menu und css display:'none';

Empfohlene Beiträge

kills

Link zu diesem Kommentar

Auf anderen Seiten teilen

loeti

Link zu diesem Kommentar

Auf anderen Seiten teilen

Dein Kommentar

Fachinformatiker Jobs

Fachinformatiker.de, 2024 by SE Internet Services

Links

Fachinformatiker.de App

Kontakt

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

Umsehen

Aktivitäten

Stellenanzeigen

Blog

Über Fachinformatiker.de