philippbusse: ein Script für mehrere ID's

hallo,

ich such nach einer lösung für folgendes problem:

ich will auf einer seite verschieden bereiche ein bzw. ausblenden, nach dem motto, "für mehr informationen 'hier' klicken".

das ganze habe ich wie folgt eingebunden:

<head>
  <script language="JavaScript" type="text/javascript">
  <!--
  function show() {
   if(document.getElementById)
     document.getElementById("Hidden").style.display = "block";
  }
  //-->
  <!--
  function hide() {
   if(document.getElementById)
     document.getElementById("Hidden").style.display = "none";
  }
  //-->
  </script>
 </head>

<body>
  <a id="link3" href="javascript:show()">mehr</a>
  <div id="hidden" style="display:none">ne menge infos</div>
  <a id="link3" href="javascript:hide()">weniger</a>
 </body>

jetzt will ich aber nicht nur einen bereich ein- und ausblenden, sondern mehrere. ich habe aber keine lust das script für jede ID neu zu kopieren.
hab' leider auch nich so viel ahnung von javascript-implementierung aber vielleicht hat ja jemand von euch ne IDee?!

mfg philipp

  1. Hallo Phillip,

    Du solltest die Funktionen so modifizieren, dass Du die ID des Elements mit übergibst.
    Und vielleicht solltest Du nicht unbedingt "hidden" als Namen verwenden, da dies auch als Wert der Eigenschaft "visibility" genutzt wird.

    Grüße,
    bluntburn

    --
    jeden Tag 'ne Currywurst...
  2. hi,

    jetzt will ich aber nicht nur einen bereich ein- und ausblenden, sondern mehrere.

    schau dir unter http://selfhtml.teamone.de/javascript/sprache/funktionen.htm an, wie du funktionen parameterisierst.

    gruss,
    wahsaga

    1. danke, ging ja fix,

      is mir nur leider zu hoch, bin recht neu bei java...

      phil

  3. versuchs lieber mit ner klasse.

    also eine klasse versteckt und ein sichtbar, dann mit

    if ( this.m_objLink.className = "visible"; ) this.m_objLink.className = "hidden"; und schon isses nicht mehr visible

    1. danke erstmal für die schnelle hilfe,

      aber ich will ja nicht alles auf einmal ein- oder ausblenden, sondern jeden bereich einzeln, oder hab ich das jetzt falsch verstanden?
      (wie gesagt anfänger!)

      mfg philipp

    2. versuchs lieber mit ner klasse.

      Besser nicht...

      also eine klasse versteckt und ein sichtbar, dann mit

      Eine versteckte Klasse? Was ist das?

      if ( this.m_objLink.className = "visible"; ) this.m_objLink.className = hidden";

      Puh, wo hast Du denn das rausgepastet??? 2 Fehler allein in der Syntax. Und ist Dir bewusst, dass es "className" nur beim InternetExplorer gibt?

      Grüße,
      bluntburn

      --
      jeden Tag 'ne Currywurst...
      1. Hallo,

        Und ist Dir bewusst, dass es "className" nur beim InternetExplorer gibt?

        Nein, className steht auch in DOM1 (siehe http://www.w3.org/TR/REC-DOM-Level-1/level-one-html.html#ID-011100101)

        Grüße aus Nürnberg
        Tobias

        --
        Selfcode: sh:( fo:) ch:? rl:( br:< n4:& ie:% mo:| va:) de:] zu:) fl:( ss:| ls:[ js:|
  4. Hallo bluntburn,

    <head>
      <script language="JavaScript" type="text/javascript">
       <!--
       function show(myDiv) {
        if(document.getElementById)
          document.getElementById(myDiv).style.display = "block";
       }
       //-->
       <!--
       function hide(myDiv) {
        if(document.getElementById)
          document.getElementById(myDiv).style.display = "none";
       }
       //-->
       </script>
      </head>

    <body>
       <a id="link3" href="javascript:show(hidden1)">mehr</a>
       <div id="hidden1" style="display:none">ne menge infos</div>
       <a id="link3" href="javascript:hide(hidden1)">weniger</a>

    <a id="link4" href="javascript:show(hidden2)">mehr</a>
       <div id="hidden2" style="display:none">ne menge infos</div>
       <a id="link4" href="javascript:hide(hidden2)">weniger</a>
      </body>

    jetzt will ich aber nicht nur einen bereich ein- und ausblenden, sondern mehrere. ich habe aber keine lust das script für jede ID neu zu kopieren.
    hab' leider auch nich so viel ahnung von javascript-implementierung aber vielleicht hat ja jemand von euch ne IDee?!

    mfg philipp

    so müsste das gehen. Du übergibst deinen Show/Hide Funktionen einfach die id des entsprechenden div. Du solltest aber prüfen, ob der Inhalt der divs mit 'style=display:none' überhaupt zum Browser übertragen wird (Quelltext ansehen), sonst versuche es mit 'style=visibility:hidden' bzw. 'style.visibility="hidden"' und 'style=visibility:visible' bzw. 'style.visibility="visible"'

    cu, ziegenmelker

    1. Hallo bluntburn,

      Hallo Ziegenmelker!

      Ist ja nett, dass Du mir antwortest, aber gepostet hat phillipbusse...

      ...ach ja: Vielleicht nicht immer gleich Quellcode posten!

      cu, ziegenmelker

      cu, bluntburn

      --
      jeden Tag 'ne Currywurst...
    2. Hi,

      <a id="link3"
         <a id="link3"

      <a id="link4"
         <a id="link4"

      Befasse Dich näher mit dem id-Attribut, insbes. damit, wie oft in einem Dokument für id derselbe Wert benutzt werden darf.

      Du solltest aber prüfen, ob der Inhalt der divs mit 'style=display:none' überhaupt zum Browser übertragen wird (Quelltext ansehen),

      Du solltest das selber überprüfen, bevor Du derartig unsinnige Spekulationen anstellst.

      Selbstverständlich wird das komplette Dokument übertragen - wer sollte denn die nicht-angezeigten Teile rausfiltern?
      Insbesondere, da nur der Client entscheiden kann, ob er überhaupt CSS kann...

      cu,
      Andreas

      --
      MudGuard? Siehe http://www.Mud-Guard.de/
      Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
      1. sorry,

        die <a id="link3" - geschichte hab ich LEIDER VERGESSEN rauszunehmen, ist nur ein Font-Abruf von einem CSS-Style-Sheet.

        der rest funktioniert mit:

        display = "block" und display = "none"
        die sache mit "hidden" macht nur unschöne lerre flächen!

        display kann man sogar auf ganze tabellen anwenden!

        mfg phil

      2. Hi Andreas,

        Hi,

        <a id="link4"
           <a id="link4"

        Befasse Dich näher mit dem id-Attribut, insbes. damit, wie oft in einem Dokument für id derselbe Wert benutzt werden darf.

        Ich hab den Fehler überlesen, Asche auf mein Haupt (copy und paste)

        Du solltest aber prüfen, ob der Inhalt der divs mit 'style=display:none' überhaupt zum Browser übertragen wird (Quelltext ansehen),

        Du solltest das selber überprüfen, bevor Du derartig unsinnige Spekulationen anstellst.

        Schon richtig, war ja auch nur zur Sicherheit gemeint.

        Selbstverständlich wird das komplette Dokument übertragen - wer sollte denn die nicht-angezeigten Teile rausfiltern?

        No! Das habe ich irgendwann schon einmal erlebt, dass der Webserver das rausgefiltert hat, was nicht angezeigt werden sollte. Das war im Zusammenhang mit ASP.NET und dem IIS.

        Insbesondere, da nur der Client entscheiden kann, ob er überhaupt CSS kann...

        Alles richtig, theoretisch kann das auch anders sein, aber darum geht es hier sicher nicht.

        cu,
        Andreas

    3. funktioniert bei mir irgendwie nicht so richtig mach ich irgendwelche fehler mit den """"""?? wofür ist denn eigentlich myDiv?

      philipp

      1. Hi,

        funktioniert bei mir irgendwie nicht so richtig mach ich irgendwelche fehler mit den """"""?? wofür ist denn eigentlich myDiv?

        philipp

        nein, ich hab einen Fehler genmacht, siehe anderes Posting.

        myDiv ist einfach der Variablenname in den Funktionen für den übergebenen Text, nämlich die Bezeichnung der id. Somit kannst du die Funktion für verschiedenen divs benutzen, du mußt nur immer den richhtigen Namen (der id) einsetzen.

        cu, ziegenmelker

        1. danke hat doch geklappt, hatte nur ein paar fehler, sollte man halt doch erstmal im kleinen testen, eh man das ganze im großversuch startet.

          danke und noch ein schönes wochenende.

          mfg philipp

          1. Hallo philipp,

            danke und noch ein schönes wochenende.

            mfg philipp

            gern geschehen und auch ein schönes WE

            cu, ziegenmelker

    4. Hallo,

      es muß so heissen:

      <a id="link3" href="javascript:show('hidden1')">mehr</a>
          <div id="hidden1" style="display:none">ne menge infos</div>
          <a id="link3a" href="javascript:hide('hidden1')">weniger</a>

      sorry wegen dem Fehler
      cu, ziegenmelker

  5. <head>
      <script language="JavaScript" type="text/javascript">
      <!--
      function show() {
       if(document.getElementById)
         document.getElementById("Hidden").style.display = "block";
      }
      //-->
      <!--

    hier wird ein Fehler erzeugt, da in JS keine HTML Kommentare ungültig sind.

    function hide() {
       if(document.getElementById)
         document.getElementById("Hidden").style.display = "none";
      }
      //-->

    sowas kann man auch prima zusammenfassen:

    function display_id(id, dis)
    {
    if(!document.getElementById) return;
    var obj = document.getElementById(id);
    if(!obj) return;
    obj.style.display = dis ? 'block' : 'none';
    }

    </script>
    </head>

    <body>
      <a id="link3" href="javascript:show()">mehr</a>
      <div id="hidden" style="display:none">ne menge infos</div>
      <a id="link3" href="javascript:hide()">weniger</a>
    </body>

    Sind die Links link oder nicht?
    Wenn nicht, ist es auch nicht nötig hier einen Link zu verwenden.

    <div id="layer1" onclick="display_id(this.id + 'mehr', true);">
    mehr</div>
    <div id="layer1mehr">.....................</div>

    Struppi.

    1. Hi,

      //-->
        <!--

      hier wird ein Fehler erzeugt, da in JS keine HTML Kommentare ungültig sind.

      ;-))

      freundliche Grüße
      Ingo

    2. Hallo Struppi

      <script language="JavaScript" type="text/javascript">
        <!--
        //-->
        <!--
      hier wird ein Fehler erzeugt, da in JS keine HTML Kommentare ungültig sind.

      inwiefern? Ich bekomme da keinen Fehler (Mozilla JavaScript Konsole)

      function hide() {
         if(document.getElementById)
           document.getElementById("Hidden").style.display = "none";
        }
        //-->

      sowas kann man auch prima zusammenfassen:

      function display_id(id, dis)
      {
      if(!document.getElementById) return;
      var obj = document.getElementById(id);
      if(!obj) return;
      obj.style.display = dis ? 'block' : 'none';
      }

      Toll ;-)
      Aber meinst du nicht philippbusse, der sich als Anfänger in Sachen JavaScript sieht, ist damit ziemlich überfordert?

      <div id="layer1" onclick="display_id(this.id + 'mehr', true);">

      Warum berechnest du die id, wenn sie da schon steht? Genial. ;-)

      <div id="layer1mehr">.....................</div>

      Struppi.

      schönes WE, ziegenmelker

      1. Hallo ziegenmelker

        Hallo Struppi

        <script language="JavaScript" type="text/javascript">
          <!--
          //-->
          <!--
        hier wird ein Fehler erzeugt, da in JS keine HTML Kommentare ungültig sind.

        inwiefern? Ich bekomme da keinen Fehler (Mozilla JavaScript Konsole)

        weil <!-- eugentlih kein gültiger JS Befehl ist, aber jetzt wo du es sagst, irgendwas macht MZ aus <! ich weiß abe rnicht mehr was.

        Ein Kommentar in JS get so // oder so /* */

        function display_id(id, dis)
        {
        if(!document.getElementById) return;
        var obj = document.getElementById(id);
        if(!obj) return;
        obj.style.display = dis ? 'block' : 'none';
        }

        Toll ;-)
        Aber meinst du nicht philippbusse, der sich als Anfänger in Sachen JavaScript sieht, ist damit ziemlich überfordert?

        Inwiefern?
        prüfen ob etwas funktioniert hat sollte auch ein Afänger machen und  Sprachelemente gibt es in JS auch nicht soviele als das das Konstrukt ? : jemand überfordern sollte.

        <div id="layer1" onclick="display_id(this.id + 'mehr', true);">

        Warum berechnest du die id, wenn sie da schon steht? Genial. ;-)

        <div id="layer1mehr">.....................</div>

        Um es flexibel zu halten

        <div id="layer1" onclick="display_id(this.id + 'mehr', true);">
        <div id="layer1mehr">.....................</div>

        <div id="layer2" onclick="display_id(this.id + 'mehr', true);">
        <div id="layer2mehr">.....................</div>

        <div id="layer3" onclick="display_id(this.id + 'mehr', true);">
        <div id="layer3mehr">.....................</div>

        Da einfacher, wenn man z.b. mit Dreamweaver arbeitet, da man die id direkt in den Properties ändern kann den JS event meines Wissens nicht.

        Struppi.

        1. Hallo Struppi

          Hallo ziegenmelker

          weil <!-- eugentlih kein gültiger JS Befehl ist, aber jetzt wo du es sagst, irgendwas macht MZ aus <! ich weiß abe rnicht mehr was.

          imho ist es für Browser, die das <script>-Tag nicht kennen, damit sie den JavaScript-Code nicht als Text in der Webseite anzeigen.

          Ein Kommentar in JS get so // oder so /* */

          ich weiß ;)

          Aber meinst du nicht philippbusse, der sich als Anfänger in Sachen JavaScript sieht, ist damit ziemlich überfordert?

          Inwiefern?

          Zitat aus seinem 1. Posting: "...ich habe aber keine lust das script für jede ID neu zu kopieren."
          D.h. er wusste bis dato noch nicht, wie Parameter an Funktionen übergeben werden.

          prüfen ob etwas funktioniert hat sollte auch ein Afänger machen

          das schon

          und  Sprachelemente gibt es in JS auch nicht soviele als das das Konstrukt ? : jemand überfordern sollte.

          Aus der myFunc(myParam) - Sache schließe ich etwas anderes.

          <div id="layer1" onclick="display_id(this.id + 'mehr', true);">

          Warum berechnest du die id, wenn sie da schon steht? Genial. ;-)

          <div id="layer1mehr">.....................</div>

          Um es flexibel zu halten

          <div id="layer1" onclick="display_id(this.id + 'mehr', true);">
          <div id="layer1mehr">.....................</div>

          <div id="layer2" onclick="display_id(this.id + 'mehr', true);">
          <div id="layer2mehr">.....................</div>

          <div id="layer3" onclick="display_id(this.id + 'mehr', true);">
          <div id="layer3mehr">.....................</div>

          Da einfacher, wenn man z.b. mit Dreamweaver arbeitet, da man die id direkt in den Properties ändern kann den JS event meines Wissens nicht.

          Ich kenne Dreamweaver nicht, aber wenn du das schon so 'flexibilisieren' möchtest, dann solltest du auch die Funktion das Addieren von 'mehr' machen lassen ;)

          Struppi.

          cu, ziegenmelker

          1. weil <!-- eugentlih kein gültiger JS Befehl ist, aber jetzt wo du es sagst, irgendwas macht MZ aus <! ich weiß abe rnicht mehr was.

            imho ist es für Browser, die das <script>-Tag nicht kennen, damit sie den JavaScript-Code nicht als Text in der Webseite anzeigen.

            Er hat folgendes geschrieben:

            <script ...>
            <!--

            -->
            <!--

            -->
            </script>

            und das erzeugt im IE zumiondest einen Syntaxfehler.

            <div id="layer1" onclick="display_id(this.id + 'mehr', true);">

            Warum berechnest du die id, wenn sie da schon steht? Genial. ;-)

            <div id="layer1mehr">.....................</div>

            Um es flexibel zu halten

            <div id="layer1" onclick="display_id(this.id + 'mehr', true);">
            <div id="layer1mehr">.....................</div>

            <div id="layer2" onclick="display_id(this.id + 'mehr', true);">
            <div id="layer2mehr">.....................</div>

            <div id="layer3" onclick="display_id(this.id + 'mehr', true);">
            <div id="layer3mehr">.....................</div>

            Da einfacher, wenn man z.b. mit Dreamweaver arbeitet, da man die id direkt in den Properties ändern kann den JS event meines Wissens nicht.

            Ich kenne Dreamweaver nicht, aber wenn du das schon so 'flexibilisieren' möchtest, dann solltest du auch die Funktion das Addieren von 'mehr' machen lassen ;)

            Wieso? wie stellst du dir das vor?
            Das geht nicht, du musst die layer schon von Hand einfügen und auch bezeichnen, das Skript weiss nciht welche Zahl als nächstes kommt. Man könnte aber in der Funktion den String zusammensetzten.

            Struppi.

            1. Hallo Struppi;

              <script ...>
              <!--

              -->
              <!--

              -->
              </script>

              und das erzeugt im IE zumiondest einen Syntaxfehler.

              Ich halte den IE nicht für das Maß der Dinge.
              http://selfhtml.teamone.de/javascript/intro.htm#javascriptbereiche

              <div id="layer3" onclick="display_id(this.id + 'mehr', true);">
              <div id="layer3mehr">.....................</div>
              Wieso? wie stellst du dir das vor?
              Das geht nicht, du musst die layer schon von Hand einfügen und auch bezeichnen, das Skript weiss nciht welche Zahl als nächstes kommt. Man könnte aber in der Funktion den String zusammensetzten.

              Genau. Also entweder so wie ich es vorgeschlagen habe:
              <div id="layer3" onclick="display_id('layer3mehr', true);">
              oder
              <div id="layer3" onclick="display_id(this.id, true);"> und die Funktion addiert 'mehr' zur übergebenen id.

              Wie wäre es denn eigentlich damit:
              <div id="layer3" onclick="display_id(this, true);">
              Dann ist in der Funktion kein 'var obj = document.getElementById(...)' mehr nötig, das ist imho noch allgemeiner. Mit einem dritten Parameter könnte man auch bestimmen, ob vielleicht lieber style.visibility geswitched werden soll, damit das Layout der Seite nicht verrutscht.

              Struppi.

              cu, ziegenmelker

              1. Hallo ziegenmelker

                Hallo Struppi;

                <script ...>
                <!--

                -->
                <!--

                -->
                </script>

                und das erzeugt im IE zumiondest einen Syntaxfehler.

                Ich halte den IE nicht für das Maß der Dinge.
                http://selfhtml.teamone.de/javascript/intro.htm#javascriptbereiche

                Du verstehst nicht.

                Er hat 2 Kommentare eingebaut. der 1. nach dem Script tag ist gültig und soll das JS verstecken vor alten Browsern. Aber der 2. Kommentar ist ungültig und erzeugt normalerweise einen Fehler, denn es steht da: erniedrige <! um eins.

                Ich hab keine Ahnung was MZ da berechnet, er ist aber der einzige Browser der keinen Fehler anzeigt.

                Wie wäre es denn eigentlich damit:
                <div id="layer3" onclick="display_id(this, true);">
                Dann ist in der Funktion kein 'var obj = document.getElementById(...)' mehr nötig, das ist imho noch allgemeiner. Mit einem dritten Parameter könnte man auch bestimmen, ob vielleicht lieber style.visibility geswitched werden soll, damit das Layout der Seite nicht verrutscht.

                Weil this nicht der layer ist der versteckt bzw. angezeigt werden soll.

                Struppi.

                1. Hallo Struppi

                  Hallo ziegenmelker

                  <script ...>
                  <!--
                  -->
                  <!--
                  -->
                  </script>

                  und das erzeugt im IE zumiondest einen Syntaxfehler.

                  Du verstehst nicht.

                  Er hat 2 Kommentare eingebaut. der 1. nach dem Script tag ist gültig und soll das JS verstecken vor alten Browsern. Aber der 2. Kommentar ist ungültig und erzeugt normalerweise einen Fehler, denn es steht da: erniedrige <! um eins.

                  Ich hab keine Ahnung was MZ da berechnet, er ist aber der einzige Browser der keinen Fehler anzeigt.

                  Du hast das original posting von philippbusse falsch zitiert. Er hat die HTML-Kommentare folgendermaßen eingesetzt und ich habe es in deinen postings übersehen:
                  <script ...>
                  <!--
                  JavaScript-Code
                  //-->
                  <!--
                  JavaScript-Code
                  //-->
                  </script>
                  Ich weiß nun wirklich nicht, ob ein doppelter HTML-Kommentar an dieser Stelle erlaub ist, sinnvoll ist es jedenfalls nicht.
                  Nun zu deiner Behauptung, daß das im IE einen Syntaxfehler verursacht. Wenn man die Kommentare so wie von mir beschrieben einsetzt, dann bekommt man folgende Ergebnisse:
                  Mozilla 1.6a unter Windows: ok
                  IE 6.0 SP1 unter Windows: ok
                  Opera 7.50 P1 unter Linux: ok
                  Konqueror 3.04: ok
                  Mozilla 1.5 unter Linux: ok
                  Mozilla 1.6 unter Linux: ok
                  Mir scheint, das zeigt, dass da alles ok ist :)

                  Wie wäre es denn eigentlich damit:
                  <div id="layer3" onclick="display_id(this, true);">
                  Dann ist in der Funktion kein 'var obj = document.getElementById(...)' mehr nötig, das ist imho noch allgemeiner. Mit einem dritten Parameter könnte man auch bestimmen, ob vielleicht lieber style.visibility geswitched werden soll, damit das Layout der Seite nicht verrutscht.

                  Weil this nicht der layer ist der versteckt bzw. angezeigt werden soll.

                  hast recht, das war ein 'quick shot'.

                  Struppi.

                  cu, ziegenmelker