[SPMan]

Zitat von Thorben

Du musst die showIt()-Funktion natürlich entsprechend anpassen. Da steht ja noch „hide“ als ID drin.

Klar, habe ich gar nicht mehr daran gedacht:

function hideIt()
{
  document.getElementById("container").style.backgroundImage="url(./fcback2.gif)";
  document.getElementById("image").style.display="none";
  document.getElementById("text").style.width="712px";

  var steelElement = document.getElementById("steel");

  steelElement.style.float="left";
  steelElement.style.width="11px";
  steelElement.onclick = showIt;
}

function showIt()
{
 document.getElementById("container").style.backgroundImage="url(./fcback3.gif)";
 document.getElementById("image").style.display="block";
 document.getElementById("text").style.width="495px";

 var steelElement = document.getElementById("steel");

 steelElement.float="right";
 steelElement.width="10px";
 steelElement.onclick = hideIt;
 }

aktualisierte Version

Der Mauszeiger lässt sich per CSS festlegen:

#steel {
  cursor: pointer;
}

Ich war gerade am Überlegen, ob man evtl. einen ganz anderen (selbst erstellten, oder von einer Seite (gibt es überhaupt Seiten mit freien Mauszeigern?)) Mauszeiger nehmen sollte (was laut CSS4You ja mölich ist). Aber ist es überhaupt ratsam soweit in das System eines Nutzers einzugreifen?

Nun besteht "nur noch" das Problem mit der Größe des Steel-Divs.
Hast Du evtl. irgendeine Idee und wenn nicht, weißt Du wo ich evtl. Hilfe bekommen könnte?

[SPMan]

Leider besteht bei meiner aktuellen Version das Javascripts weiterhin das Problem, dass bei der "umgeschalteten" Version - so wie ich es sehe - indirekt #steel als Maßstab für die Höhe genommen wird. Nun hat sich aber sichtlich, durch das Ausblenden von #image, der eigentliche Inhalt verringert, sprich ich habe eine Menge unnützen leeren Platz unter dem Text. Gibt es eine Möglichkeit diesen "Fehler" zu vermeiden bzw. zu umgehen?

Hier der Link zum Testen/Nachvollziehen und anbei der Code:

function hideIt()
{
  document.getElementById("container").style.backgroundImage="url(./images/schmuck/fcback2.gif)";
  document.getElementById("image").style.display="none";
  document.getElementById("text").style.width="712px";

  var steelElement = document.getElementById("steel");

  steelElement.style.float="left";
  steelElement.onclick = showIt;
}

function showIt()
{
 document.getElementById("container").style.backgroundImage="url(./images/schmuck/fcback3.gif)";
 document.getElementById("image").style.display="block";
 document.getElementById("text").style.width="495px";

 var steelElement = document.getElementById("steel");

 steelElement.float="right";
 steelElement.onclick = hideIt;
 }

 window.onload=function()
{
        var cHeight=document.getElementById("content").offsetHeight;
        document.getElementById("steel").style.height=cHeight+"px";
}

[hemfrie]

Die id "steel" besitzt laut firebug ein

style="height: 354px;"

Deshalb verschwindet auch unten der Weißraum nicht.

[SPMan]

Zitat von hemfrie

Die id "steel" besitzt laut firebug ein

style="height: 354px;"

Deshalb verschwindet auch unten der Weißraum nicht.

Nicht aber im eigentlich (X)HTML- oder CSS-Quelltext, sondern erst durch das JavaScript, damit das gesamte Div #steel, was es ja auch soll, anklickbar ist.
Es müsste sich beim "umschalten" an eigentlich Höhe von #text ausrichten, sp wie ich das sehe...

[hemfrie]

ja, Du vergibst die Höhe von Steel beim laden des Dokumentes

 window.onload=function()
{
        var cHeight=document.getElementById("content").offsetHeight;
        document.getElementById("steel").style.height=cHeight+"px";

}

Die 354px sind also die Höhe von #content. Du musst diese Höhe beim einklappen aber auch wieder korrigieren, ansonsten bleibt die natürlich auch bei 354px stehen

[SPMan]

Zitat von hemfrie

Die 354px sind also die Höhe von #content. Du musst diese Höhe beim einklappen aber auch wieder korrigieren, ansonsten bleibt die natürlich auch bei 354px stehen

Richtig, beim einklappen muss entweder #text oder #image der Maßstab sein, je nach was von beiden in dem Moment mehr Inhalt sein.

Eine Idee, wie sich das Ganze am Besten beerkstellgen lässt?

[hemfrie]

Der Maßstab ist #content, denn der umschließt #image und #text.

Ändere einfach Dein Javascript so ab, dass das ermitteln der Content-Höhe eine eigene Funktion erhält.

function hideIt()
{
  document.getElementById("container").style.backgroundImage="url(./images/schmuck/fcback2.gif)";
  document.getElementById("image").style.display="none";
  document.getElementById("text").style.width="712px";

  var steelElement = document.getElementById("steel");

  steelElement.style.float="left";
  steelElement.onclick = showIt;
}

function showIt()
{
 document.getElementById("container").style.backgroundImage="url(./images/schmuck/fcback3.gif)";
 document.getElementById("image").style.display="block";
 document.getElementById("text").style.width="495px";

 var steelElement = document.getElementById("steel");

 steelElement.float="right";
 steelElement.onclick = hideIt;
 }


function content_height(){
    var cHeight=document.getElementById("content").offsetHeight;
    document.getElementById("steel").style.height=cHeight+"px"; 
}

 window.onload=function()
{
    content_height();
}

und diese Funktion fürst Du dann beim klicken auf steel aus

<div id="steel" onclick='hideIt();content_height();' onkeypress='hideIt();'>

[SPMan]

Zitat von hemfrie

Der Maßstab ist #content, denn der umschließt #image und #text.

Ändere einfach Dein Javascript so ab, dass das ermitteln der Content-Höhe eine eigene Funktion erhält.
[...]

Danke, ich habe Deine Änderungen mal eben fix vorgenommen, aber es will wohl leider immer noch nicht klappen. LINK | JavaScript

[hemfrie]

Ja stimmt, kann so nicht klappen, ist meine Schuld. Das Div mit der id="steel" ist ja auch in #content enthalten.

Du müsstest also in der Funktion doch die Höhen von #text und #image ermitteln und dann die größere der beiden dem #steel übergeben.

[SPMan]

Zitat von hemfrie

Du müsstest also in der Funktion doch die Höhen von #text und #image ermitteln und dann die größere der beiden dem #steel übergeben.

Dann habe ich also doch richtig gedacht.
Wie gehe ich an o.g. Problem heran?