Fast gelöst: Seitenhöhe, Scrollposition, sichtbarer Bereich

[Michael Klose]

Hallo,

jetzt muss ich mich nochmal zurückmelden.

Als erstes muss ich schon loswerden, dass ich es sehr schade gefunden habe, dass wahsaga und Gernot Back (v.a. Gernot Back) meine Anfrage doch recht schroff beantwortet haben.

Es ist schade, dass man sich scheinbar erst in gewisser Art und Weise rechtfertigen und erklären muss, warum man was wofür benötigt, um die Chance zu bekommen, wirkliche Hilfestellungen zu erhalten.

Aufgrund der Vorgaben komme ich nicht herum, die aktuelle Seitenhöhe, die aktuelle Scrollposition und die Höhe des sichtbaren Bereiches festzustellen und entsprechend dynamisch darauf zu reagieren. Das hat rein gar nichts damit zu tun, dass ich mich in der Sache "Javascript" profilieren will, sondern es ist schlichtweg notwendig.

Gut, um zu meinem Problem zurückzukehren:

Einwandfrei funktioniert nun die Abfrage, ob man schon gescrollt hat oder nicht und die damit verbundene Anzeige der entsprechenden Navigationselemente.

Allerdings funktioniert die Prüfung noch nicht, ob man bereits am Seitenende angelangt ist und die entsprechenden Navigationselemente damit versteckt werden, oder nicht, d.h. die Navigationselemente werden nicht versteckt.

Hier der überarbeitete Code:

var Scrolling;

function Hoehe_Anzeigebereich_ermitteln ()
{
  return document.all['AnzeigeSeite'].scrollHeight;
}

function Seitenhoehe_ermitteln ()
{
  if (typeof document.height != 'undefined')
    return parent.AnzeigeSeite.document.height;
  else
  {
    var obj = getBody (parent.AnzeigeSeite);
    return obj.scrollHeight;
  }
}

function getBody (window)
{
  return (window.document.compatMode && window.document.compatMode == "CSS1Compat") ? window.document.documentElement : window.document.body || null;
}

function Sichtbarkeit_aendern (id, NNtype, IEtype, WC3type)
{
  if (document.getElementById)
    eval ("document.getElementById(id).style.visibility = "" + WC3type + """);
  else
    if (document.layers)
      document.layers[id].visibility = NNtype;
    else
      if (document.all)
        eval ("document.all." + id + ".style.visibility = "" + IEtype + """);
}

function Scrollposition_ermitteln ()
{
  if (typeof window.pageYOffset != 'undefined')
    return parent.AnzeigeSeite.pageYOffset;
  else
    if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat')
      return document.parent.AnzeigeSeite.scrollTop;
    else
      if (typeof document.body != 'undefined')
        return parent.AnzeigeSeite.document.body.scrollTop;
}

function Nach_Oben_scrollen (Geschwindigkeit)
{
  Scrolling = window.setInterval ('parent.AnzeigeSeite.scrollBy (0,' + Geschwindigkeit + ');Navigation_ausgeben ();', 1);
}

function Nach_Unten_scrollen (Geschwindigkeit, Hoehe_Anzeigebereich, Seitenhoehe)
{
  Scrolling = window.setInterval ('parent.AnzeigeSeite.scrollBy (0,' + Geschwindigkeit + ');Navigation_ausgeben ();', 1);
}

function Scrolling_beenden ()
{
  if (Scrolling)
    window.clearInterval (Scrolling);
}

function Navigation_ausgeben ()
{
  var Hoehe_Anzeigebereich = Hoehe_Anzeigebereich_ermitteln ();
  var Seitenhoehe          = Seitenhoehe_ermitteln ();
  var Scrollposition       = Scrollposition_ermitteln ();

if (Scrollposition == 0)
    Sichtbarkeit_aendern ('Hoch', 'hidden', 'hidden', 'hidden');
  else
    Sichtbarkeit_aendern ('Hoch', 'show', 'visible', 'visible');

if (Scrollposition == Seitenhoehe)
    Sichtbarkeit_aendern ('Runter', 'hidden', 'hidden', 'hidden');
  else
    Sichtbarkeit_aendern ('Runter', 'show', 'visible', 'visible');

if (Seitenhoehe > Hoehe_Anzeigebereich)
    Sichtbarkeit_aendern ('Runter', 'show', 'visible', 'visible');
  else
    Sichtbarkeit_aendern ('Runter', 'hidden', 'hidden', 'hidden');
}

Was muss ich noch ändern bzw. verbessern, damit die Abfrage, ob man sich bereits am Seitenende befindet, funktioniert ?

Danke im voraus.
Michael

[Ingo Turski]

Hi,

was ich nicht verstehe:

function Hoehe_Anzeigebereich_ermitteln ()
{
  return document.all['AnzeigeSeite'].scrollHeight;
}

hier berücksichtigst Du ausschließlich IE(kompatible), aber

function Sichtbarkeit_aendern (id, NNtype, IEtype, WC3type)
{
  if (document.getElementById)
    eval ("document.getElementById(id).style.visibility = "" + WC3type + """);
  else
    if (document.layers)
      document.layers[id].visibility = NNtype;
    else
      if (document.all)
        eval ("document.all." + id + ".style.visibility = "" + IEtype + """);
}

hier sogar den NN4.

Soll dies nun eine Anwendung ausschließlich für IEs mit aktiviertem Javascript werden oder nicht?

freundliche Grüße
Ingo

[Michael Klose]

Hallo Ingo,
Hallo Gernot Back ;-)

Gut, Gernot, dann Schwamm drüber ;-)

Zurück zu meinem Problem:

Die Funktion "Hoehe_Anzeigebereich_ermitteln" kann ich auch weglassen, da der eingebettete Frame, in dem alle Seiten angezeigt werden, insgesamt 376px hoch ist, somit schaut die Funktion "" nun so aus:

function Navigation_ausgeben ()
{
  var Seitenhoehe          = Seitenhoehe_ermitteln ();
  var Scrollposition       = Scrollposition_ermitteln ();

if (Scrollposition == 0)
    Sichtbarkeit_aendern ('Hoch', 'hidden', 'hidden', 'hidden');
  else
    Sichtbarkeit_aendern ('Hoch', 'show', 'visible', 'visible');

if (Scrollposition == 376)
    Sichtbarkeit_aendern ('Runter', 'hidden', 'hidden', 'hidden');
  else
    Sichtbarkeit_aendern ('Runter', 'show', 'visible', 'visible');

if (Seitenhoehe > 376)
    Sichtbarkeit_aendern ('Runter', 'show', 'visible', 'visible');
  else
    Sichtbarkeit_aendern ('Runter', 'hidden', 'hidden', 'hidden');
}

Damit ist die zuvor gegebene Einschränkung auf IE aufgehoben.

Aber auch wenn ich eine fixe Höhe für den sichtbaren Bereich angebe (bedingt durch die Höhe des eingebetteten Frames), funktioniert das Verstecken der Elemente zum Runterscrollen nicht.

Frage ich die Höhe der Seite falsch ab ?
Ist die Ermittlung der Scrollposition falsch ?

Gruss, Michael

[Gernot Back]

Hallo Michael,

wollte dir sowieso gerade schreiben. Der Tipp hat nämlich schon öfters geholfen:

Wenn du Schwierigkeiten hast, die Höhe deines Dokuments zu ermitteln, umschließe doch einfach mal alles darin mit einem Div-Element und frage dessen offsetheight ab,´statt der des Body-Elements.

Mit einem ähnlichen Abgleich blende ich übrigens bei dieser kleinen studie, die auch nicht allein auf meinem Mist gewachsen ist, auch Steuerelemente ein- und aus.

http://www.sprachlernspiele.de/scroll

Gruß Gernot

[Michael Klose]

Hossa, Du bist auch noch auf ?!   :-)

Gut, habe jetzt den Body einer längeren Seite in einen Div namens "Seite" gepackt.

Gibt es "offsetHeight" nur beim IE ?
Wie sieht die Entsprechung beim NS aus ?

Und beim Zugriff über "getElementById" muss ich dann sicherlich auch etliche Varianten beachten... *stöhn*

Ich muss nämlich gestehen, dass ich den übrigen JS-Code aus zig verschiedenen Seiten zusammengesetzt habe, wenn er auch - bis auf die berühmte, besagte Ausnahme - soweit funktioniert... :o)

Gruss, Michael

[Gernot Back]

Hallo

Hossa, Du bist auch noch auf ?!   :-)

Ja wieder, bei Arbeitslosen kommt es nicht so drauf an.

Gibt es "offsetHeight" nur beim IE ?
Wie sieht die Entsprechung beim NS aus ?

Manchmal geht das bei Mozilla, manchmal nicht. Ich habe da schon ganz komische Sachen erlebt, dass z.B. document.body.offsetWidth auszulesen war, ~offsetHeight hingegen nicht oder umgekehrt in ein und demselben Dokument.

Und beim Zugriff über "getElementById" muss ich dann sicherlich auch etliche Varianten beachten... *stöhn*

Wenn du den alten Netscape 4 bedienen willst bleibt dir das wohl nicht erspart.

Da hatte übrigens einer mal ein ähnliches Ansinnen wie du. Weiß aber nicht, wie weit er gekommen ist.

http://forum.de.selfhtml.org/archiv/2004/9/89304

Gruß Gernot

[Gernot Back]

Hallo nochmal,

Bezogen auf einen alles umschließenden Div-Container solltest du eigentlich in keinem der neueren Browser Probleme haben, weder mit offsetHeight, noch mit offsetWidth. Netscape 4 kannst du da aber wohl vergessen.

http://de.selfhtml.org/javascript/objekte/all.htm#offset_height

Das kannst du auch über document.getElementById() ansprechen, nicht nur mit document.all.

Gruß Gernot

[Michael Klose]

Hallo Gernot,

Ja wieder, bei Arbeitslosen kommt es nicht so drauf an.

Entschuldige, wollte Dir nicht zu nahe treten...

Ich verzweifle noch an meinem Vorhaben *knirsch*

Die Seitenhöhe ermittle ich nun über die Höhe des DIVs "Seite" im eingebetteten Frame "AnzeigeSeite" folgendermassen:

if (document.layers)
  return parent.AnzeigeSeite.document.layers["Seite"].clip.height;
else
  if (document.all)
    return parent.AnzeigeSeite.document.all["Seite"].offsetHeight;
  else
    if (document.getElementById)
      return parent.AnzeigeSeite.document.getElementById("Seite").offsetHeight;

Wenn ich nun testweise die Seitenhöhe ausgeben lasse, dann wird mir bei den unterschiedlichen Seiten meiner Homepage auch unterschiedliche Werte geliefert (was den Anschein erweckt, als dass die Abfrage richtig funktionieren würde).

Wenn ich nun zudem die Scrollposition ausgeben lasse, dann wäre ich - laut Bildschirmausgabe - beispielsweise bei Position 180px am Seitenende, während die Seitenhöhe erst bei 546px erreicht wäre.

Gruss, Michael

[Gernot Back]

Hallo Michael,

Entschuldige, wollte Dir nicht zu nahe treten...

(bist du nicht)

Ich verzweifle noch an meinem Vorhaben *knirsch*

Ich bin mir nur mit alten Netscapes (4)
nicht sicher , clip.height klingt aber gut, da war ja mal was

Die Seitenhöhe ermittle ich nun über die Höhe des DIVs "Seite" im eingebetteten Frame "AnzeigeSeite" folgendermassen:

if (document.layers)
  return parent.AnzeigeSeite.document.layers["Seite"].clip.height;
else
  if (document.all)
    return parent.AnzeigeSeite.document.all["Seite"].offsetHeight;
  else
    if (document.getElementById)
      return parent.AnzeigeSeite.document.getElementById("Seite").offsetHeight;

Sieht gut aus.

Wenn ich nun testweise die Seitenhöhe ausgeben lasse, dann wird mir bei den unterschiedlichen Seiten meiner Homepage auch unterschiedliche Werte geliefert (was den Anschein erweckt, als dass die Abfrage richtig funktionieren würde).

Ich denke das tut sie.

Wenn ich nun zudem die Scrollposition ausgeben lasse, dann wäre ich - laut Bildschirmausgabe - beispielsweise bei Position 180px am Seitenende, während die Seitenhöhe erst bei 546px erreicht wäre.

Aber wie machst du das, fallweise unterschieden nach pageYOffset (alte und neue Netscapes/Mozilla-Artige) und document.body.scrollTop für MSIE (Opera kann meines wissens beides verstehen)
http://de.selfhtml.org/javascript/objekte/window.htm#page_y_offset

Das müsste gehen, ich bin recht zuversichtlich.

Gruß Gernot

[Gernot Back]

Noch ein Nachtrag:

setz auch margin:0px sowohl bei html als auch body und gib vorsichtshalber eine Toleranz von einigen Pixeln für ganz unten zu, so dass man auch schon ganz unten ist, wenn man noch einige Pixel vom unteren Rand erntfernt ist, also lieber ein Abgleich mit > oder < statt mit == !

Gruß Gernot

[Michael Klose]

Hallo Gernot,

Der relevante JS-Code insgesamt sieht so aus:

function Seitenhoehe_ermitteln ()
{
  if (document.layers)
    return parent.AnzeigeSeite.document.layers["Seite"].clip.height;
  else
    if (document.all)
      return parent.AnzeigeSeite.document.all["Seite"].offsetHeight;
    else
      if (document.getElementById)
        return parent.AnzeigeSeite.document.getElementById("Seite").offsetHeight;
}

function Scrollposition_ermitteln ()
{
  if (typeof window.pageYOffset != 'undefined')
    return parent.AnzeigeSeite.pageYOffset;
  else
    if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat')
      return document.parent.AnzeigeSeite.scrollTop;
    else
      if (typeof document.body != 'undefined')
        return parent.AnzeigeSeite.document.body.scrollTop;
}

function Navigation_ausgeben ()
{
  var Seitenhoehe    = Seitenhoehe_ermitteln ();
  var Scrollposition = Scrollposition_ermitteln ();

if (Scrollposition == 0)
    Sichtbarkeit_aendern ('Hoch', 'hidden', 'hidden', 'hidden');
  else
    Sichtbarkeit_aendern ('Hoch', 'show', 'visible', 'visible');

if (Scrollposition == 376)
    Sichtbarkeit_aendern ('Runter', 'hidden', 'hidden', 'hidden');
  else
    Sichtbarkeit_aendern ('Runter', 'show', 'visible', 'visible');

if (Seitenhoehe > 376)
    Sichtbarkeit_aendern ('Runter', 'show', 'visible', 'visible');
  else
    Sichtbarkeit_aendern ('Runter', 'hidden', 'hidden', 'hidden');

// alert ("Seitenhöhe: " + Seitenhoehe + "\nScrollposition: " + Scrollposition);
}

Es scheint alles so weit richtig zu sein und doch funktioniert es nicht. Ich versteh's nicht...

Gruss, Michael

PS: Michael geht jetzt in's Bett, weil er um 8 wieder aufstehen muss. Ich schau dann heute Nachmittag wieder rein. Auf jeden Fall nochmal vielen Dank für Deine, jetzt wirklich starke, Hilfe ;-)

[Gernot Back]

Hallo Michael,

if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat')

Ich glaube ich kann auch von dir noch was lernen, das mit dem compatMode kenne ich noch nicht, muss mich kundig machen, aber auch nicht mehr vor der Nachtruhe. Vielleicht ist das ja besser als letzter else-Zweig.

Gruß Gernot

[Gernot Back]

Hallo Michael

Ich glaube ich kann auch von dir noch was lernen, das mit dem compatMode kenne ich noch nicht, muss mich kundig machen, aber auch nicht mehr vor der Nachtruhe.

http://forum.de.selfhtml.org/archiv/2004/1/69505/#m399858

habe ich jetzt gelernt.

Vielleicht ist das ja besser als letzter else-Zweig.

Und dass das wahrscheinlich gerade nicht gut wäre, habe ich auch gelernt:
http://forum.de.selfhtml.org/archiv/2004/1/68964/#m396500

Gruß Gernot

[Michael Klose]

Hallo Gernot,

Herschaftszeiten, ich glaub, da gibt es keine funktionierende Lösung. Egal was ich probiere, es klappt einfach nicht *grml*   :-(

Gruss, Michael

[Struppi]

Herschaftszeiten, ich glaub, da gibt es keine funktionierende Lösung. Egal was ich probiere, es klappt einfach nicht *grml*   :-(

Die Funktion von mir klappt einwandfrei.
http://javascript.jstruebig.de/lib/window.html#pageOffset

Struppi.

[Struppi]

function Scrollposition_ermitteln ()
{
  if (typeof window.pageYOffset != 'undefined')
    return parent.AnzeigeSeite.pageYOffset;
  else
    if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat')
      return document.parent.AnzeigeSeite.scrollTop;
    else
      if (typeof document.body != 'undefined')
        return parent.AnzeigeSeite.document.body.scrollTop;
}

Nicht document.parent, sondern document.documentElement. Ich gehe davon aus, dass parent.AnzeigeSeite ein Frameseite ist?

function Scrollposition_ermitteln ()
{
var w =  parent.AnzeigeSeite;

if (window.pageYOffset) return w.pageYOffset;
else if (window.document.documentElement) return window.document.documentElement.scrollTop;
else if (window.document.body) return w.document.body.scrollTop;
}

Struppi.

[Gernot Back]

Hallo Michael,

Als erstes muss ich schon loswerden, dass ich es sehr schade gefunden habe, dass wahsaga und Gernot Back (v.a. Gernot Back) meine Anfrage doch recht schroff beantwortet haben.

also Michael, wenn du diesen Thread hier meinst, in dem du auch durchaus hättest bleiben können:

[http://forum.de.selfhtml.org/my/?t=90843&m=545442]

da steckte zwar eine gehörige Portion Ironie drin, aber die war nicht auf dich gemünzt, sondern eher auf Wahsaga. Aber der nimmt mir das nicht übel, sonst hätte er längst reagiert.

Es ist schade, dass man sich scheinbar erst in gewisser Art und Weise rechtfertigen und erklären muss, warum man was wofür benötigt, um die Chance zu bekommen, wirkliche Hilfestellungen zu erhalten.

Da gebe ich dir voll und ganz Recht. Schau mal auf die Uhrzeit meines Postings, ich bin schlaflos durch die Nacht gegeistert und jetzt ist es fürchte ich auch wieder zu spät, um mich in deinen Code reinzudenken. Aber es gibt hier durchaus viele hilfsbereite Leute. Wahsaga gehört übrigens auch dazu, auch wenn man es ihm manchmal nicht gleich anmerkt, weil er einfach manche Fragen schon viel zu häufig beantwortet hat.

Gruß Gernot

[wahsaga]

hi,

Als erstes muss ich schon loswerden, dass ich es sehr schade gefunden habe, dass wahsaga und Gernot Back (v.a. Gernot Back) meine Anfrage doch recht schroff beantwortet haben.

findest du? ich fand's nicht zu schroff ...

Es ist schade, dass man sich scheinbar erst in gewisser Art und Weise rechtfertigen und erklären muss, warum man was wofür benötigt, um die Chance zu bekommen, wirkliche Hilfestellungen zu erhalten.

ist das zu viel verlangt, dass man erst mal die problematik der aufgabenstellung und vor allem ihre angenommene notwendigkeit nachvollziehbar erklärt, wenn man von anderen kostelose hilfe bekommen möchte?

Aufgrund der Vorgaben komme ich nicht herum, die aktuelle Seitenhöhe, die aktuelle Scrollposition und die Höhe des sichtbaren Bereiches festzustellen und entsprechend dynamisch darauf zu reagieren. Das hat rein gar nichts damit zu tun, dass ich mich in der Sache "Javascript" profilieren will, sondern es ist schlichtweg notwendig.

mir ist auch jetzt immer noch nicht klar, welchen zweck das ganze haben soll, und wo durch es von dem von mir als "nachbasteln im browser bereits vorhandener funktionalität" bezeichneten signifikant abheben soll.

gruß,
wahsaga