Enrico: Probleme bezüglich HTML, PHP und Javascript :o)

Hallo,

Ich stehe gerade vor einem - für mich *ggg* - grossen Berg und brauche Eure Hilfe.

Ich habe eine PHP-Datei erstellt, die das Layout unserer Homepage ausgibt. In dieser Datei habe ich folgende zwei DIV-Bereiche:

Im DIV-Bereich 1 (Container-DIV) sollen über Javascript Registerreiter, die in einzelne DIV-Bereiche organisiert sind, getauscht werden, die die Menüpunkte anzeigen.

<div class="container">
  <div class="register_1">
  ...
  </div>
  <div class="register_2">
  ...
  </div>
</div>

Der Link zum Wechseln sieht beispielsweise folgendermassen aus:

<a ... href="javascript:zeigeEbeneNr(2)">...</a>

Und der Code zum Wechseln, den ich im Kopf der Datei definiert habe, wie folgt:

if (document.layers)
{
  ns = 1;
  ie = 0;
}
else
{
  ns = 0;
  ie = 1;
}

var i = 1;
var name = "register_";

function zeigeEbeneNr(ebene_nr)
{
  verbergen(eval('"' + name + i +'"'));
  zeigen(eval('"' + name + ebene_nr +'"'));
  i = ebene_nr;
  window.location.href="$_SERVER['PHP_SELF']?datei=" + i;
}

function zeigen(name)
{
  if (ns)
    document.layers[''+name].visibility = "show";
  else
    document.all[''+name].style.visibility = "visible"
}

function verbergen(name)
{
  if (ns)
    document.layers[''+name].visibility = "hide"
  else
    document.all[''+name].style.visibility = "hidden"
}

Die Register-DIVs sind wie folgt definiert:

div.register_1 {position: relative; top: 0px; z-index: 7; visibility: visible}
div.register_2 {position: absolute; top: 0px; z-index: 6; visibility: hidden}

Problem (1)

Die Anzeige des ersten Registers funktioniert auch einwandfrei, nur wird mir beim Anklicken eines Menüpunktes die Fehlermeldung ausgegeben, dass document.all[...].style Null oder kein Objekt ist.

Im DIV-Bereich 2 soll, je nach angeklicktem Menüpunkt, über PHP die entsprechende Datei geladen werden.
Dies kann ich über folgende Befehlsfolge lösen:

<?php
  $datei = $_GET["datei"];

if ($datei == "")
    $datei = "HTML_S_startseite.html";

...

echo fpassthru(fopen($datei, "r"));
?>

Problem (2)

Die Datei wird auch angezeigt, jedoch ohne den definierten Hintergrund, d.h. der Hintergrund der Seite ist transparent.

.layout_seite
{
  background-image: url('pic/gfx/L_r_a_fuellung.png')
}

<body class="layout_seite">

Bei meiner Startdatei funktioniert es allerdings problemlos (hier allerdings mit einer anderen Grafik):

.layout_index
{
  background-image: url('pic/gfx/L_hg_muster.png')
}

Die Grafik L_r_a_fuellung.png existiert aber, das sie auch als Hintergrund für meine Registerreiter verwendet und da einwandfrei angezeigt wird.

Problem (3)

Kann der Aufruf der anzuzeigenden Seite mit meinem Ansatz in der Funktion zeigeEbeneNr so funktionieren ?

zeigeEbeneNr(ebene_nr)
{
  verbergen(eval('"' + name + i +'"'));
  zeigen(eval('"' + name + ebene_nr +'"'));
  i = ebene_nr;
  window.location.href="$_SERVER['PHP_SELF']?datei=" + i;
}

Leider komme ich nicht so weit, da ja das Wechseln nicht funktioniert :-(
Und da schliesst sich der Kreis :o)

Schon mal vielen Dank im voraus,
Gruss Enrico

  1. hi

    Problem (1)

    Die Anzeige des ersten Registers funktioniert auch einwandfrei, nur wird mir beim Anklicken eines Menüpunktes die Fehlermeldung ausgegeben, dass document.all[...].style Null oder kein Objekt ist.

    solltest du auch für den NN 4.x schireben, ignorier einfach was jetzt kommt :).
    du solltest versuchen DOM-Systax zu nutzen und nicht auf "all" und "layers" zurückgreifen.
    du könntest es dir einfacher machen, indem du deinen DIVs IDs gibst und diese mit "display: none;" bzw. "display: block;" ein- und ausblendest.
    den javascript-teil würdest du dann mit "getElementById" in verbindung mit "style" recht einfach lösen können.

    Problem (2)

    Die Grafik L_r_a_fuellung.png existiert aber, das sie auch als Hintergrund für meine Registerreiter verwendet und da einwandfrei angezeigt wird.

    hast du auf groß- und kleinschreibung geachtet?

    Problem (3)

    Kann der Aufruf der anzuzeigenden Seite mit meinem Ansatz in der Funktion zeigeEbeneNr so funktionieren ?

    siehe 1

    so long
    ole
    (8-)>

    1. Hallo Ole,

      Danke für Deine Rückantwort.

      Habe den Code nun folgendermassen geändert:

      function div_ref (id)
      {
        if (document.layers)
          return document.layers[id]; // NC 4
        else
          if (document.all)
            return document.all[id]; // IE 4
          else
            if (document.getElementById)
              return document.getElementById(id); // DOM
            else
              return null;
      }

      function show_hide(id, status)
      {
        if (document.layers)
          div_ref_style(id).visibility =  status ? "show" : "hide"; // NS
        else
          div_ref_style(id).visibility =  status ? "visible" : "hidden"; // IE
      }

      var i = 1;
      var name = "register_";

      function zeigeEbeneNr(ebene_nr)
      {
        show_hide('"' + name + i +'"', 0);         // Verbergen
        show_hide('"' + name + ebene_nr + '"', 1); // Zeigen

      i = ebene_nr;
        window.location.href="$_SERVER['PHP_SELF']?datei=" + i;
      }

      Der Wechsel wird aber immer noch nicht durchgeführt.
      Jetzt bekomme ich die Fehlermeldung, dass ein Objekt erwartet wird und zwar genau in folgender Zeile:

      div_ref_style(id).visibility =  status ? "visible" : "hidden"; // IE

      Wegen der Grafik:
      Ja, Groß- und Kleinschreibung passt. Ich habe den Dateinamen extra aus'm Explorer rauskopiert.

      Gruss, Enrico

      1. Ich habe jetzt auch mal folgende Variante ausprobiert, die fast funktioniert:

        function switchTo(LayerName)
        {
          if (activeLayer != null)
            activeLayer.visibility = 'hidden';

        if(document.all || document.layers || document.getElementById)
          {
            activeLayer = document.all ? document.all[LayerName].style : document.layers ? document[LayerName] : document.getElementById(LayerName).style;
            activeLayer.visibility = 'visible';
          }
        }

        Hier wird über den Befehl javascript:void(switchTo('register_2') auch das nächste Register angezeigt, das ursprüngliche aber nicht versteckt... *knirsch* So kurz vor'm Ziel und immer wieder ein Stolperstein :o)

        Gruss, Enrico