offsetTop für einen sichtbaren bereich im Frame ?

M

mr_arrogant

Mitglied
Hallo Allezusammen,
ich wollte mal fragen ob es eine möglichkeit gibt, ähnlich via offsetTop, den abstand eines DIV Elementes welches sich im sichtbaren bereich eines Frames befindet zum FrameTop berechnen und ausgeben zu lassen, und nicht zur gesamt Höhe des Frames, sondern wirklich nur vom sichtbaren bereich..

Hier mal ein Bild um zu zeigen wie ich das genau meine: http://img174.imageshack.us/img174/77/bspsh1.gif


best
mr-d
 
Hi,

Du kannst zunächst die bereits gescrollte Höhe ermitteln (scrollTop bzw. pageXOffset). Anschließend berechnest Du das
Top-Offset des gewünschten Elementes (offsetTop, offsetParent). Zu guter Letzt bildest Du die Differenz.

Beispiel:
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
  <!--
function topOffset(objElem){
  var objBody = null;
  var intOffsetY = 0;

  // Passendes Body-Objekt ermitteln
  if(document.all && !window.opera)
    objBody =(window.document.compatMode == "CSS1Compat")? window.document.documentElement : window.document.body || null;
  else
    objBody = document.documentElement;

  // Scrollhöhe ermitteln
  if (window.pageYOffset) {
    intOffsetY = window.pageYOffset;
  } else if(typeof objBody.scrollTop == "number") {
    intOffsetY = objBody.scrollTop;
  }

  // Top-Offset des Ausgangselementes
  var intOffsetTop = objElem.offsetTop;
  // Nächstes Element mit Top-Offset ermitteln
  objElem = objElem.offsetParent;
  // Solange Elemente mit relevantem Top-Offset existieren
  while(objElem){
    intOffsetTop += objElem.offsetTop;
    objElem = objElem.offsetParent;
  }

  alert(intOffsetTop - intOffsetY);
}
 //-->
</script>
</head>
<body>
<div style="border: 1px solid #ccc;">Erstes Div</div>
<div style="height: 2000px; background: #efefef; border: 1px solid #ccc;">
	Höhendiv
	<div onclick="topOffset(this);" style="width: 300px; height: 200px; border: 1px solid #ccc; margin-top: 1000px; background: #fff;">Zweites Div (klick mich -> sichtbares Offset)</div>
</div>
</body>
</html>
Vielleicht kannst Du etwas damit anfangen.

Ciao
Quaese
 
Guten Morgen Quaese,
erstmal Danke für den Code Schnippsel, ich werde ihn mir gleich mal genauer anschauen und mich dann nochmal melden.
Ich habe zwar schon gestern einiges mit offsetTop und offsetParent versucht, aber nichts half wirklich.

Kurz nochmal zu der Sache, ich habe einen Tooltip den ich bei einem mouseover/release kurz ein und wieder ausblenden lasse, diesen Positioniere ich entsprechend einiger Werte "absolute" top,top-right,right,right-bottom usw.
In einem normalen Dokument klappt das alles wunderbar, nur eben in einem Frame nicht, denn "manchmal" wird vom Tooltip oben oder unten eben ein Stück abgeschnitten wenn ich diesen erscheinen lasse, daher auch die sache mit dem Frame Ausschnitt.

So ich mach mich dann mal mit Hilfe des Schnippsels an des Rätsels Lösung :D


best
mr-d
 
Zuletzt bearbeitet:
aaaalso ...
es klappt soweit sehr gut, dieses Snippet macht genau das nach dem ich gesucht/gefragt hatte, daher nochmal ein dickes DANKE :D

Leider spinnt manchmal der Tooltip bei der neuen nach positionierung, aber das soll nicht mehr eure sorge sein.
;-)



best
mr-d
 
Sorry aber ich hätte da noch eine Frage ohne dafür direkt einen neuen Thread zu erstellen.

Ich lasse mir ja mit
PHP: 
parent.window.frames['results'].innerHeight;
die höhe des sichtbaren Frame bereichs ausgeben, im Firefox, Opera und dem Safari funktioniert das auch Super, doch der IE6 als auch IE7 hat damit anscheinend Probleme.

Ich bin leider durch google und andere Foren nicht fündig geworden, daher Frage ich hier nochmal: Was muss ich machen damit ich auch in den IEs die Höhe rausbekomme ?



mfg
mr-d
 
@Quaese

Leider beziehen sich diese Beispiele aber auf ein normales Document, mein vorhaben ist aber die Höhe des sichtbaren Frame bereichs ausgeben zu lassen.


mfg
mr-d
 
Hi,

vielleicht kannst Du die Höhe des (i)Frames auslesen.
Code: 
window.onload = function() {
  var intHeight;
  intHeight = top.document.getElementsByName("results")[0].offsetHeight;
  alert(intHeight);
}

Edit:
Obiges Fragment liefert im Opera kein korrektes Resultat. Vielleicht besser so versuchen:
Code: 
window.onload = function() {
  var intHeight;

  if (window.innerHeight) {
    intHeight = top.results.innerHeight;
  } else if (document.body && document.body.offsetHeight) {
    intHeight = top.document.getElementsByName("results")[0].offsetHeight;
  } else {
    intHeight = 0;
  }

  alert(intHeight);
}
Ciao
Quaese
 
Zuletzt bearbeitet:
Guten Morgen Quaese,

leider funktioniert das alles nicht im IE6 und 7 da ich ja auch keinen iframe benutze sondern das ganze ein grosses, altes und schwergewichtiges Framekonstrukt ist das solangsam an's Web 2.0 angepasst wird, sprich das ganze wird pö a` pö in eine AJAX Application umgebaut.

Nur da dies noch ne weile dauern kann muss ich das ganze auf das Framekonstrukt anpassen, was ja auch mit folgender Zeile Code für die meisten Browser ja funktioniert:
var frameHeight = parent.window.frames['results'].innerHeight;



mfg
mr-d
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück