SCHNittER: Dynamischer Funktionsaufruf

SELF-Forum

Dynamischer Funktionsaufruf

SCHNittER
– Informationen zu den Bewertungsregeln

HILFE,

ich möchte mit einem onmouseover /out einen Schriftstyle in einem Layer ändern.
Ich übergebe also beim Funktionsaufruf den Layernamen als Variable und möchte das in der Fkt. folgendes ausgeführt wir:
Variable.style.fontsize
Variable.style.visibility
aber entweder liegt es am falschen syntax oder an weis ich nicht, es geht nicht. Ich benötige aber die dynamik da diese Fkt. an die 150 mal aufgerufen werden soll. Und wie kann ich die unterschiedliche Syntax der Browser IE und NN bewältigen?
Anbei meine jetzigen Versuche:

<script language="JavaScript">
<!--
function on(i)  <!-- Fkt on(), i kommt vom Fkt-aufruf -->
{
   z = i; <!-- z = i -->
   z = z+'.style.visibility';<!-- String popX.style.visibility wird erzeugt-->
   z = new Object();<!-- Versuch String in ein Objekt umzuwandeln -->
   z = "visible";<!-- zuweisung popX.style.visibility = "visible" -->
   i = i+'.style.fontSize';<!-- selbes vorgehen wie oben mit fontSize -->
   i = new Object();
   i = "12";
}

function off(i)
{
   z = i; <!-- wie Fkt on() -->
   z = z+'.style.visibility';
   z = new Object();
   z = "hidden";
   i = i+'.style.fontSize';
   i = new Object();
   i = "0";
}
//-->
</SCRIPT>

</head>
<body bgcolor="#FFFFFF" text="#000000">
<STYLE Type=text/css>

.text1 { font-size:16px; font-family:Arial; position:static; visibility:visible }
.text2 { font-size:0px; font-family:Arial; position:static; visibility:hidden }

</STYLE>

<div Class=text1>
<a href=http://www.ich.de onmouseover="on(pop1)" onmouseout="off(pop1)">der</a></div> <!-- Fkt-aufruf mit Parameter -->
<div ID=pop1> test</div>  <!-- dieser Text sollte bei onMouseOut unsichtbar und kleiner werden -->

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Dynamischer Funktionsaufruf

    Harry Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Holladiriiiiii ...

    Variable.style.fontsize
    Variable.style.visibility

    Probier's mal mit Gemütlichkeit und ...

    document[variable].style.fontsize

    aber entweder liegt es am falschen syntax oder an weis ich nicht, es geht nicht. Ich benötige aber die dynamik da diese Fkt. an die 150 mal aufgerufen werden soll. Und wie kann ich die unterschiedliche Syntax der Browser IE und NN bewältigen?

    Naja, mit NN wirst Du da'n bißchen Pech haben. Da mußt Du den Layer dann neu schreiben, mit document[variable].document.open(), ...write() und ...close()

    Anbei meine jetzigen Versuche:

    function on(i)  <!-- Fkt on(), i kommt vom Fkt-aufruf -->

    Also, ein Kommentar in JavaScript geht anders:
    // Kommentar oder
    /* Kommentar */

    <schnipp reason="vielzukompliziert">

    <div Class=text1>
    <a href=http://www.ich.de onmouseover="on(pop1)" onmouseout="off

    (pop1)">der</a></div> <!-- Fkt-aufruf mit Parameter -->

    Das pop1 solltest Du dann doch noch in Anführungszeichen setzen: onmouseover="on('pop1');"

    Ciao,

    Harry

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Dynamischer Funktionsaufruf

      SCHNittER
      – Informationen zu den Bewertungsregeln

      Funktioniert auch nicht (s. Fehlermeldung):

      <script language="JavaScript">
      <!--
      function on(i)
       {
        document[i].style.visibility = "visible"; //kriege document[..].style ist kein Objekt Fehlermeldung
        document[i].style.fontSize = "12";
       }

      function off(i)
       {
        document[i].style.visibility = "hidden"; //kriege document[..].style ist kein Objekt Fehlermeldung
        document[i].style.fontSize = "0";
       }

      function MM_callJS(jsStr) { //v2.0
        return eval(jsStr)
      }
      //-->
      </SCRIPT>
      </head>
      <body bgcolor="#FFFFFF" text="#000000">
      <STYLE Type=text/css>
       .text1 { font-size:16px; font-family:Arial; position:static; visibility:visible }
       .t2 { font-size:0px; font-family:Arial; position:static; visibility:hidden }
      </STYLE>

      <div Class=text1>
       <a href=http://www.ich.de onmouseover="on('t1');" onmouseout="off('t1');">der</a></div>
       <div ID=t1> test<br>test<br>test</div>

      <div ID=pop1 Class=text1>
       <a href=http://www.ich.de onmouseover="on('t2');" onmouseout="off('t2');">der</a></div>
       <div ID=t2> test<br>test<br>test</div>

      Aber hier gings, ist aber ebend undynamisch:

      <script language="JavaScript">
      <!--

      function on()
       {
        pop2.style.visibility = "visible"; //IE
        pop2.style.fontSize = "12";
       }

      function off()
       {
        pop2.style.visibility = "hidden"; //IE
        pop2.style.fontSize = "0";
       }

      function MM_callJS(jsStr) { //v2.0
        return eval(jsStr)
      }
      //-->
      </SCRIPT>
      </head>
      <body bgcolor="#FFFFFF" text="#000000" onLoad="MM_callJS('off()')">
      <STYLE Type=text/css>
       .text1 { font-size:16px; font-family:Arial; position:static; visibility:visible }
       .text2 { font-size:0px; font-family:Arial; position:static; visibility:hidden }
      </STYLE>
      <div Class=text1>
       <a href=http://www.ich.de onmouseover="on()" onmouseout="off()">der</a></div>
       <div ID=pop2> test<br>test<br>test</div>
      <div ID=pop1 Class=text1>
       <a href=http://www.ich.de onmouseover="on()" onmouseout="off()">der</a></div>

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Dynamischer Funktionsaufruf

        Harry Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Hoi !

        <script language="JavaScript">
        <!--
        function on(i)
        {
          document[i].style.visibility = "visible"; //kriege document[..].style ist kein Objekt Fehlermeldung

        document.all[i].style.visibility = "visible"; //lala, auch ich  mach öfter mal Fehler

        document[i].style.fontSize = "12";

        document.all[i].style.fontSize = 12;

        }

        function off(i)
        {
          document[i].style.visibility = "hidden"; //kriege document[..].style ist kein Objekt Fehlermeldung

        document.all[i].style.visibility = "hidden";

        document[i].style.fontSize = "0";

        document.all[i].style.fontSize = 0;  // IMHO schwachsinnig

        }

        <schnipp>

        <div Class=text1>
        <a href=http://www.ich.de onmouseover="on('t1');" onmouseout="off('t1');">der</a></div>
        <div ID=t1> test<br>test<br>test</div>

        <div ID=pop1 Class=text1>
        <a href=http://www.ich.de onmouseover="on('t2');" onmouseout="off('t2');">der</a></div>
        <div ID=t2> test<br>test<br>test</div>

        Bitte: IDs, hrefs und Klassen in Anführungszeichen !
        <div class="text1">
         <a href="http://www.ich.de" onMouseover="on('t1');" onMouseout="off('t1');">der</a></div>
         <div id="t1">test<br>test</div>

        Ciao,

        Harry

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Dynamischer Funktionsaufruf

          SCHNittER
          – Informationen zu den Bewertungsregeln

          Danke, funktionier prima, könntest Du mir das mit dem neuschreiben für NN nochmal erklären?

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Dynamischer Funktionsaufruf

            Harry Homepage des Autors
            – Informationen zu den Bewertungsregeln

            Holadidldüüü

            Danke, funktionier prima, könntest Du mir das mit dem neuschreiben für NN nochmal erklären?

            http://selfsuche.teamone.de/cgi-bin/such.pl?suchausdruck=netscape+layer+neu+schreiben&lang=on&feld=alle&index_1=on&index_2=on&index_3=on&index_4=on&index_5=on&index_6=on&index_7=on&index_8=on&hits=200

            Harry

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

  2. Dynamischer Funktionsaufruf

    Sven Rautenberg Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Moin!

    ich möchte mit einem onmouseover /out einen Schriftstyle in einem Layer ändern.
    Ich übergebe also beim Funktionsaufruf den Layernamen als Variable und möchte das in der Fkt. folgendes ausgeführt wir:
    Variable.style.fontsize
    Variable.style.visibility

    Das ist im Prinzip nicht schlecht, muß aber lediglich W3C-DOM- und IE-DOM-kompatibel angebunden werden. Netscape 4 kann Layer anzeigen und verstecken, aber garantiert keine Schriftgröße ändern. Aber das brauchst du auch ganz sicher nicht...

    aber entweder liegt es am falschen syntax oder an weis ich nicht, es geht nicht. Ich benötige aber die dynamik da diese Fkt. an die 150 mal aufgerufen werden soll. Und wie kann ich die unterschiedliche Syntax der Browser IE und NN bewältigen?

    Hier mal zwei Funktionen, um Layer zu zeigen und zu verstecken. Du übergibst die Layerid des DIV.

    ns4 = (document.layers)? true:false
    ie4 = (document.all)? true:false
    v6 = (document.getElementById)? true:false

    function showlayer(layerid)
      {
      if (ns4) document.layers[layerid].visibility = "show"
      else if (v6) document.getElementById(layerid).style.visibility = "visible";
      else if (ie4) document.all[layerid].style.visibility = "visible"
      }

    function hidelayer(layerid)
      {
      if (ns4) document.layers[layerid].visibility = "hide"
      else if (v6) document.getElementById(layerid).style.visibility = "hidden";
      else if (ie4) document.all[layerid].style.visibility = "hidden"
      }

    Die Sache mit der Schriftgröße würde ich lassen. Damit willst du vermutlich, daß der Layer kleiner wird und der freiwerdende Platz durch Aufrücken der anderen Layer nach oben genutzt wird. Klappt aber mit Sicherheit nicht, weil die Browser durch das Verstecken die Seite nicht neu rendern (und die Positionen der Layer neu ausrechnen). Da mußt du dann schon irgendwie die Layerposition selbst ausrechnen und verändern.

    Die Position eines Layers setzen geht z.B. so:

    funktion poslayer(layerid,posX,posY)
    {
      if (ns4)
        { // Positioning for Netscape
        document.layers[layerid].pageX=posX;
        document.layers[layerid].pageY=posY;
        }
      else if (ie4)
        { // Positioning for Internet Explorer
          // IE for Mac needs the 'px' String!
        document.all[layerid].style.left = posX+'px';
        document.all[layerid].style.top = posY+'px';
        }
      else if (v6)
        { // Positioning for other Browsers
        document.getElementById(layerid).style.left = posX;
        document.getElementById(layerid).style.top = posY;
        }
    }

    Anbei meine jetzigen Versuche:

    ...die ich gerne kommentiere, damit du lernst:

    <script language="JavaScript">
    <!--
    function on(i)  <!-- Fkt on(), i kommt vom Fkt-aufruf -->

    Javascript-Kommentare sind
      // Kommentarzeile bis zum Ende
      /* Kommentarbereich
         der auch über
         mehrere Zeilen gehen kann
      */

    {
       z = i; //  z = i

    Hier weist du der Variablen z den Inhalt von i zu. Das macht dann Sinn, wenn du z oder i hinterher veränderst, und den Originalinhalt behalten willst. Meist ist es aber sinnvoll, das gleich mit einer echten Rechenoperation zu verbinden - geht dann schneller. ;)

    z = z+'.style.visibility'; // String popX.style.visibility wird erzeugt

    Wenn du hier einfach z = i+'....'; geschrieben hättest, könntest du die obere Anweisung sparen. Doch leider ist alles sinnlos, denn...

    z = new Object(); // Versuch String in ein Objekt umzuwandeln

    ...hier löschst du den Inhalt der Variablen, und ersetzt ihn durch den Inhalt eines Objektes. Das Objekt selbst lebt aber auch nicht lange, denn...

    z = "visible"; // zuweisung popX.style.visibility = "visible"

    ...es wird hier schon wieder gelöscht und durch einen String mit dem Inhalt "visible" ersetzt.

    i = i+'.style.fontSize'; // selbes vorgehen wie oben mit fontSize

    Jetzt kommt i dran, ein String wird angehängt...

    i = new Object();

    ... dann gelöscht und durch ein Objekt ersetzt, welches...

    i = "12";

    ebenfalls sofort wieder gelöscht wird, um durch einen String ersetzt zu werden.

    }

    Ich muß dir nicht erklären, daß deine Funktion off() genauso blödsinnig arbeitet. :) Funktionierende Beispiele sind oben ja dabei.

    - Sven Rautenberg

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Dynamischer Funktionsaufruf

      SCHNittER
      – Informationen zu den Bewertungsregeln

      Habe folgendes probiert:

      <script language="JavaScript">
      <!--
      <!--

      ns4 = (document.layers)? true:false
      ie4 = (document.all)? true:false
      v6 = (document.getElementById)? true:false

      function showlayer(i)
        {
        if (ns4) document.layers[i].visibility = "show"
        else if (v6) document.getElementById(i).style.visibility = "visible";
        else if (ie4) document.all[i].style.visibility = "visible"
        }

      function hidelayer(i)
        {
        if (ns4) document.layers[i].visibility = "hide"
        else if (v6) document.getElementById(i).style.visibility = "hidden";
        else if (ie4) document.all[i].style.visibility = "hidden"
        }

      /*

      function MM_callJS(jsStr) { //v2.0
        return eval(jsStr)
      }*/
      //-->
      </SCRIPT>

      </head>

      <body bgcolor="#FFFFFF" text="#000000" >
      <STYLE Type=text/css>

      .text1 { font-size:16px; font-family:Arial; position:static; visibility:visible }
       .t2 { font-size:0px; font-family:Arial; position:static; visibility:hidden }

      </STYLE>

      <div Class=text1>
       <a href=http://www.ich.de onmouseover="on(t1);" onmouseout="off(t1);">der</a></div> <!--Fehlermeldung Objekt erwartet -->
       <div ID=t1> test<br>test<br>test</div>

      <div ID=pop1 Class=text1>
       <a href=http://www.ich.de onmouseover="on(t2);" onmouseout="off(t2);">der</a></div> <!--Fehlermeldung Objekt erwartet -->
       <div ID=t2> test<br>test<br>test</div>

      und bekomme die zwei Fehlermeldungen Objekt erwartet (s. Skript)
      Aber das nächste hat auch funktioniert, wenn auch ohne dynamischen Aufruf:

      <script language="JavaScript">
      <!--

      function on()
       {
        pop2.style.visibility = "visible"; //IE
        pop2.style.fontSize = "12";
       }

      /*
      function on()
       {
        pop2.style.visibility = "show";     //NN
       }
      */

      function off()
       {
        pop2.style.visibility = "hidden"; //IE
        pop2.style.fontSize = "0";
       }

      /*
      function off()
       {
        pop2.style.visibility = "hide";  //NN
       }
      */

      function MM_callJS(jsStr) { //v2.0
        return eval(jsStr)
      }
      //-->
      </SCRIPT>

      </head>

      <body bgcolor="#FFFFFF" text="#000000" onLoad="MM_callJS('off()')">
      <STYLE Type=text/css>

      .text1 { font-size:16px; font-family:Arial; position:static; visibility:visible }
       .text2 { font-size:0px; font-family:Arial; position:static; visibility:hidden }

      </STYLE>

      <div Class=text1>
       <a href=http://www.ich.de onmouseover="on()" onmouseout="off()">der</a></div>
       <div ID=pop2> test<br>test<br>test</div>

      <div ID=pop1 Class=text1>
       <a href=http://www.ich.de onmouseover="on()" onmouseout="off()">der</a></div>

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Dynamischer Funktionsaufruf

        Sven Rautenberg Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Moin!

        ... und bekomme die zwei Fehlermeldungen Objekt erwartet (s. Skript)

        Ja, ist ja auch logisch. Du definierst hier den Funktionsaufruf für mouseover und mouseout:

        <a href=http://www.ich.de onmouseover="on(t1);" onmouseout="off(t1);">

        und willst die Funktionen on und off aufrufen.

        Du definierst aber die Funktionen showlayer und hidelayer. Na, sagt dir das was? Wenn du Funktionen aufrufst, die nicht definiert werden, weil die, die definiert werden, andere Namen haben, ist das logischerweise ein Fehler.

        onmouseover="showlayer()" onmouseout="hidelayer()" wäre besser gewesen.

        Und dann noch ein Fehler: Dein aufruf onmouseover="on(t1)" übergibt der Funktion den Inhalt der Variablen namens t1. Die wird vermutlich noch garnicht existieren - auch deshalb gehts nicht.

        onmouseover="showlayer('t1')" onmouseout="hidelayer('t1')" ist da besser.

        Aber das nächste hat auch funktioniert, wenn auch ohne dynamischen Aufruf:

        Ja, und? Es funktioniert vermutlich nur im IE. Im Opera sicher nicht, und sicher auch nicht in Netscape (egal ob Version 4 oder 6).

        Wenn du programmierst, mußt du natürlich Fehler vermeiden, sonst geht's nicht. :)

        - Sven Rautenberg

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Dynamischer Funktionsaufruf

          SCHNiTTER
          – Informationen zu den Bewertungsregeln

          Danke, funktioniert, aber Harry's Variante ist mehr nach meiner Vorstellung, da ich den Platz dringend benötige.

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Dynamischer Funktionsaufruf

            Sven Rautenberg Homepage des Autors
            – Informationen zu den Bewertungsregeln

            Moin!

            Danke, funktioniert, aber Harry's Variante ist mehr nach meiner Vorstellung, da ich den Platz dringend benötige.

            Was für einen Platz?

            Wenn dir der Funktionsname zu lang ist, bennene die Funktion eben um.

            Zum Beispiel:
            function s(layerid) {
            ....//Hier Showlayer
            }
            function h(layerid)
            ....//Hier Hidelayer
            }

            <a href="..." onmouseover="s('t1')" onmouseout="h('t1')">

            Abgesehen davon funktioniert Harrys Variante derzeit nur mit dem Internet Explorer - meine aber mit allen Browsern, die <div>-Layer kennen und Javascript mit W3C-DOM oder IE-DOM oder Netscape-DOM können.

            - Sven Rautenberg

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln