Scrollbare Layer ohne Hintergrund?

[Sven-Oliver Schibat]

Hallo!

Eins gleich vorweg: Sollte diese Frage schonmal gestellt worden sein, tut's mir leid! Im Archiv hab ich jedenfalls irgendwie nix in der Richtung gefunden und von daher versuche ich einfach mal mein Glück! :-)

Ich habe folgendes Problem:

In einem Frame habe ich ein recht aufwendiges Hintergrundbild. Über diesem möchte ich nun diverse Inhalte darstellen, die auch schonmal über den Umfang des Frames hinausgehen können. Wenn ich nun den Frame scrolle, sieht der Hintergrund aber nicht mehr aus, da Netscape ja noch immer keinen stillstehenden Hintergrund unterstützt (oder habe ich da was verpaßt?). Jetzt dachte ich, daß es doch vielleicht möglich sein müßte, einen transparenten Layer (sprich: ohne Hintergrund) über diesen Hintergrund zu legen und den eventuell noch scrollen könnte. Ist das technisch irgendwie machbar und wenn nicht: Hat vielleicht irgendwer eine Idee, wie ich das realisieren könnte?

Ich danke Euch im voraus! :-)

See ya!
Sven

[Thomas J.S.]

Hallo!

In einem Frame habe ich ein recht aufwendiges Hintergrundbild. Über diesem möchte ich nun diverse Inhalte darstellen, die auch schonmal über den Umfang des Frames hinausgehen können. Wenn ich nun den Frame scrolle, sieht der Hintergrund aber nicht mehr aus, da Netscape ja noch immer keinen stillstehenden Hintergrund unterstützt (oder habe ich da was verpaßt?).

Etwas ähnliches hatten wir schon:
<../../sfarchiv/1999_2/t04030.htm>
<../../sfarchiv/1999_3/t05576.htm>

Kamen aber zu keinen richtig guten Ergebnis.

Grüße
Thomas

PS:
»»Ist das technisch irgendwie machbar und wenn nicht: Hat vielleicht irgendwer eine Idee, wie ich das realisieren könnte?
»»

Wenn's nicht machbar ist, sollte es doch machbar sein? ;-))

[Knut]

Hi,

Machbar ist das, allerdings mit etwas aufwand.
Wenn du einen Layer "scrollen" willst mußt du dir erst einmal eine eigene Scrollbar basteln:

<layer id="Scrollbar" left="" top="" >
       <a href="#" onMouseover="scroll('aktiv', 'hoch()')" onMouseout="scroll('inaktiv', 'hoch()')">
       Hoch scrollen</a>
       <a href="#"onMouseover="scroll('aktiv', 'runter()')" onMouseout="scroll('inaktiv', 'hoch()')">
       Runter scrollen</a>
</layer>

Als nächstes brauchst du einen Layer in dem der Inhalt steht.

<layer id="Inhalt"> left="" top"">
       Hier steht dein langer langer Text.
</layer>

Diesen Layer kannst du mit document.Inhalt.moveBy(x,y) verschieben.
Um eine scroll bewegung zu simmulieren kannst du window.setInterval benutzen um die bewegungs funktion immer wieder auszuführen.

<script>

function scroll(Modus, Richtung)
{
if (Modus == "aktiv")                                
  {dup = window.setInterval(Richtung ,10);}  // wiederholt den funktionsaufruf von Richtung aller                                                                // 10 Millisekunden
if (Modus == "inaktiv")                             // trift nur zu wenn du den link wieder verlässt
{window.clearInterval(dup);}                      // löscht die wiederholung des funktionsaufrufes
}

function hoch()
{
document.Inhalt.moveBy(0,-5);} // bewegt Layer 5px nach oben

// Abruchbedingen wenn der Text zuende ist:
// Mit document.Inhalt.top - document.Inhalt.document.heigh bekommst du den unteren Rand
// des Layers. Wenn der <= der Fensterhöhe ist d.h. wenn das ende des Layers zusehn ist  
// wird die funktion nicht mehr aufgerufen.

if (document.Inhalt.top - document.Inhalt.document.height <= window.innerHeight)
{window.clearInterval(dup);}
}

function runter()
{
document.Inhalt.moveBy(0,5);}   // bewegt Layer 5px nach unten
if (document.Inhalt.top - document.Inhalt.document.height >= window.innerHeight)
{window.clearInterval(dup);}
}

</script>

Ich habs zwar nicht ausprobier es müsste aber so ungefähr funktionieren.*s*

p.s. über nehme keine garantie das da nicht irgendwo ein semikolon fehlt oder ein rechtschreibfehler zu viel ist.

cu Knut

[Knut]

»»  // Abruchbedingen wenn der Text zuende ist:
»»  // Mit document.Inhalt.top - document.Inhalt.document.heigh bekommst du den unteren »»     Rand
»»  // des Layers. Wenn der <= der Fensterhöhe ist d.h. wenn das ende des Layers zusehn »»     ist  
»»  // wird die funktion nicht mehr aufgerufen.

»»  if (document.Inhalt.top - document.Inhalt.document.height <= window.innerHeight)
»»  {window.clearInterval(dup);}
Die Bedingung ist murks. Zumal sie natürlich beim runter und beim hoch scrollen unter schiedlich ist. Hier noch mal die beiden funktionen

function hoch()
{
if (document.Inhalt.top + document.Inhalt.document.height <= window.innerHeight)
{window.clearInterval(dup);return;}
document.Inhalt.moveBy(0,-15);
}

function runter()
{
if (document.Inhalt.top >= 10)
{window.clearInterval(dup);return;}
document.Inhalt.moveBy(0,15);
}

So jetzt gehts. Nun ist das ganze auch getestet *s*
Sorry für den murks ist schon früh.

cu knut