1. Liebe Forumsgemeinde,

    aufgrund der Bestimmungen, die sich aus der DSGVO ergeben, müssten umfangreiche Anpassungen am Forum vorgenommen werden, die sich für uns nicht wirtschaftlich abbilden lassen. Daher haben wir uns entschlossen, das Forum in seiner aktuellen Form zu archivieren und online bereit zu stellen, jedoch keine Neuanmeldungen oder neuen Kommentare mehr zuzulassen. So ist sichergestellt, dass das gesammelte Wissen nicht verloren geht, und wir die Seite dennoch DSGVO-konform zur Verfügung stellen können.
    Dies wird in den nächsten Tagen umgesetzt.

    Ich danke allen, die sich in den letzten Jahren für Hilfesuchende und auch für das Forum selbst engagiert haben. Ich bin weiterhin für euch erreichbar unter tti(bei)pcwelt.de.
    Dismiss Notice

Javascript "aufklappares" Menu

Discussion in 'Web-Know-how für die Homepage' started by Aegis, Feb 24, 2004.

Thread Status:
Not open for further replies.
  1. Aegis

    Aegis Kbyte

    Hi, ich bin nicht gerade ein Javascript kenner aber habe trotzdem mal etwas versucht.

    Mein "aufklappares" Menu funtioniert eigentlich auch ganz gut, doch sobald ich ein zweites Menu (bzw. Eintrag) hinzufügen möchte funktioniert das ganze nicht mehr (siehe Eintrag).
    Ich könnte natürlich jetzt für jedes weitere Menu zwei funtionen mit anderen Namen aber dem genau gelcihen Zweck einfügen.

    Gib es eine möglichkeit das ganze zu vereinfachen, vielleicht 'ghost' als variable zu benutzen???


    Hier mal der Code:

    START CODE

    <html>
    <script type="text/javascript" language="JavaScript1.2">
    var angezeigt = false;

    function versteckt()
    {
    if (angezeigt)
    {
    document.getElementById('ghost').style.display = 'none';
    angezeigt = false;
    }
    else
    {
    document.getElementById('ghost').style.display = 'block';
    angezeigt = true;
    }
    }

    function bildwechsel()
    {
    if (angezeigt == true)
    {
    document.Bild1.src = "minus.gif"
    }
    else
    {
    document.Bild1.src = "plus.gif"
    }
    }

    </script>
    <body>
    <table width="100%" height="100%" border="0">
    <tr><td align="center" valign="middle" width="100%" height="100%">
    <table width="800" height="100%" border="1" bordercolor="#CCCCCC" style="border-style: none;" cellpadding="0" cellspacing="0">
    <tr><td colspan="3" height="150">Test</td></tr>
    <tr><td width="200" valign="top">
    <!-- Start Menu -->
    <table width="200" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td width="100%" height="23" background="oben.jpg" align="right" valign="middle">
    <a href="#" onclick="versteckt();bildwechsel()"><img src="plus.gif" name="Bild1" border="0"></a>&nbsp;
    </td>
    </tr>
    <tr>
    <td style="display : none" id="ghost">
    <table width="200" height="178" border="1" bordercolor="#CCCCCC" style="border-style: none;" cellpadding="0" cellspacing="0">
    <tr><td valign="top">Test<br>Test2<br>Test3
    </td></tr>
    </table>
    </td>
    </tr>
    </table>
    <!-- End Menu -->
    </td>
    <td width="400" valign="top">
    <!-- Start Eintrag -->
    <table width="400" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td width="100%" height="23" background="oben.jpg" align="right" valign="middle">
    <a href="#" onclick="versteckt();bildwechsel()"><img src="plus.gif" name="Bild1" border="0"></a>&nbsp;
    </td>
    </tr>
    <tr>
    <td style="display : none" id="ghost">
    <table width="100%" height="178" border="1" bordercolor="#CCCCCC" style="border-style: none;" cellpadding="0" cellspacing="0">
    <tr><td valign="top">Test<br>Test2<br>Test3
    </td></tr>
    </table>
    </td>
    </tr>
    </table>
    <!-- End Eintrag -->
    </td>
    <td width="200">&nbsp;</td>
    </table>
    </td></tr>
    </table>
    </body></html>

    END CODE
     
    Aegis, Feb 24, 2004
    #1
  2. Gast

    Gast Guest

    gern geschehen...

    übrings zur info!

    mit

    plus = new Image();plus.src = "plus.gif";

    wir das bild geladen, ohne das angezeigt wird, hat vorteil, bei langsamen verbindungen.
     
    Gast, Feb 25, 2004
    #2
  3. Aegis

    Aegis Kbyte

    Michael_x,

    Warum nicht einfacher?
    Nun beschäftige mich noch nicht lange mit javascript...

    Aber es klappt prima, thx. :D
     
    Aegis, Feb 25, 2004
    #3
  4. Gast

    Gast Guest

    @it-praktikant
    wo soll da der unterschied sein ?

    ie machts in einer zeile, firebird untereinander

    @aegis

    warum so umstandlich:confused:

    <script>

    plus = new Image();plus.src = "plus.gif";
    minus = new Image();minus.src = "minus.gif";

    var angezeigt = false;

    function versteckt(element,bildnr)
    {
    if (angezeigt)
    {
    document.getElementById(element).style.display = 'none';
    window.document.images[bildnr].src = plus.src;
    angezeigt = false;
    }
    else
    {
    document.getElementById(element).style.display = 'block';
    window.document.images[bildnr].src = minus.src;
    angezeigt = true;
    }
    }
    </script>

    <a href="#" onClick="versteckt('ghost','0')"><img src="plus.gif"></a>


    hinter der variablen ghost steht eine null. diese null ist das erste bild in der html.
    wenn das +- bild nun die dritte ist, so muss anstatt null ZWEI stehen.
     
    Gast, Feb 25, 2004
    #4
  5. it-praktikant

    it-praktikant Megabyte

    Naja, dann könnte man so argumentieren: "Wieso sollte der IE CSS3 können, wenn er noch nicht mal CSS2 kann?"
     
    it-praktikant, Feb 25, 2004
    #5
  6. Aegis

    Aegis Kbyte

    Ok, hab es jetzt mal nach der Methode von kalweit gemacht und die funktioniert einwandfrei. THX.

    Jetzt funktioniert aber mein bildwechseln noch nicht, wie kann ich das lösen?

    Neuer CODE:

    <script type="text/javascript" language="JavaScript1.2">
    var angezeigt = false;


    function versteckt(element)
    {
    if (angezeigt)
    {
    document.getElementById(element).style.display = 'none';
    angezeigt = false;
    }
    else
    {
    document.getElementById(element).style.display = 'block';
    angezeigt = true;
    }
    }

    function bildwechsel()
    {
    if (angezeigt == true)
    {
    document.Bild1.src = "minus.gif";
    }
    else
    {
    document.Bild1.src = "plus.gif";
    }
    }
    </script>

    ...

    <a href="#" onclick="versteckt('ghost');bildwechsel()"><img src="plus.gif" name="Bild1" border="0"></a>
    ...
    <td style="display : none" id="ghost">

    ...

    <a href="#" onclick="versteckt('ghost1');bildwechsel()"><img src="plus.gif" name="Bild1" border="0"></a>
    ...
    <td style="display : none" id="ghost1">
     
    Aegis, Feb 25, 2004
    #6
  7. Gast

    Gast Guest

    Nein, ich habe mich nicht verschrieben. Ich meine ausdrücklich CSS 3 (in Worten: DREI).
     
    Gast, Feb 25, 2004
    #7
  8. it-praktikant

    it-praktikant Megabyte

    :D Also über den Netscape hat ja auch keiner was gesagt. Mein Mozilla kann bisher alles mögliche anzeigen, MathML, CSS2.0.

    Und wenn der IE nicht alles von CSS2.0 interpretieren kann, dass unterstütz er demnach also CSS2.0 nicht.

    Ich stelle mir diese Aussagen über Ausnahmen mal beim Autokauf vor:
    "Ja sie haben ein Geländefahrzeug. Aber es kann leider nicht über Hügel und durch Wasser, das einen halben Meter tief ist, fahren. " :D


    ==== Nachtrag ====
    Man stolpert immer wieder darüber, dass der IE in seiner Entwicklung einfach stehen geblieben ist. Einfach mal folgenen Code im IE und im Mozilla anschauen:
    <span class="code" style="white-space: pre; font-family: 'Courier New'; font-size: 14px;">
    01 <span style="color: #008F00;">#include &lt;stdio.h&gt;</span>
    02 <span style="color: #9F0000;">int</span> main() {
    03 <b>return</b> <span style="color: #0000BF;">0</span>;
    04 }</span>
     
    it-praktikant, Feb 25, 2004
    #8
  9. Gast

    Gast Guest

    laut selfhtml von netscape 6 auch nicht
    ausserdem unterstützt ie 2.0, aber bei weitem nicht alle befehle!
     
    Gast, Feb 24, 2004
    #9
  10. it-praktikant

    it-praktikant Megabyte

    Ich glaube Steele hat sich verschrieben und meint CSS 2.0, von Version 3 habe ich noch nichts gehört und dass CSS 2.0 vom IE noch nicht unterstützt wird ist allgemein bekannt.


    Ciao it.
     
    it-praktikant, Feb 24, 2004
    #10
  11. Gast

    Gast Guest

    wo find ich die codes für css3
     
    Gast, Feb 24, 2004
    #11
  12. Gast

    Gast Guest

    Tja...und wenn der IE endlich mal CSS3 unterstützen würde, könnte man ganz auf das dämliche JS verzichten und das mit CSS realisieren...achja...im Mozilla geht das schon jetzt ;)
     
    Gast, Feb 24, 2004
    #12
  13. Gast

    Gast Guest

    einfach hier klicken!

    also ich würd eher den style visibility einsetzen!


    z.b.
    <html>
    <head>
    <title>CSS Box zeigen/verstecken</title>
    </head>
    <script type="text/javascript">
    function show(id_name)
    {
    if(document.getElementById(id_name.style.visibility == "hidden")
    ocument.getElementById(id_name).style.visibility = "visible";
    else
    document.getElementById(id_name.style.vibility = "hidden";
    }
    </script>
    <style type="text/css">
    #test
    {width:100px;height:100px;background-color:#ff0000;visibility:hidden;}
    </style>
    <body>
    <div id="test">Die ist ein Test</div>
    <a href="javascript('test')">Zeigen/Verstecken</a>
    </body>
    </html>
     
    Gast, Feb 24, 2004
    #13
  14. kalweit

    kalweit Hüter der Glaskugel

    Nö, du ersetzt in dem Script die Konstante der ID durch eine Variable. Dessen Wert ist die aktuell anzusprechende ID. Diese musst du dann im Funktionsaufruf mit übergeben - mal ins blaue:

    function versteckt(element)
    ...
    document.getElementById(element).style.display = 'none';
    ...

    onclick="versteckt('ghost')..."

    Gruss, Matthias
     
    kalweit, Feb 24, 2004
    #14
  15. Aegis

    Aegis Kbyte

    danke,

    wenn ich nun für jede ID einen anderen Wert nehme, wie mache ich das ganze dan mit der function versteckt()? Mithilfe eines Arrays?
     
    Aegis, Feb 24, 2004
    #15
  16. it-praktikant

    it-praktikant Megabyte

    Du verwendest getElementById() und das bedeutet, dass dein zweites Menü auch eine zweite, andere ID benötigt.

    Ciao it.
     
    it-praktikant, Feb 24, 2004
    #16
Thread Status:
Not open for further replies.

Share This Page