style.height = auto; Div ausklappen lassen...

Fabian Frank

Fabian Frank

Erfahrenes Mitglied
Hai,

ich habe neulich eine Skript-Demo entdeckt mit einer Lightbox, in der das Inhaltsdiv, in dem das Foto angezeigt wird nach unten, ich nenns mal, "aufscrollt". Die Sache ist nur die, wenn ich das für mehrere Fotos verwenden will (hab kein Zugriff auf das eigentliche Skript, da Lizenz...), die unterschiedliche Höhen besitzen, würde das ja bedeuten, dass ich das Div auf Height: auto; setze, was wiederum zu Folge hat, dass ich dieses Scrollen nicht realisieren kann, da ich ja kein Limit (beispielsweise bei einer rekursiven Funktion) setzen kann, da ich die eigentliche Höhe nicht kenne.
Ein Lösungsansatz von mir wäre, die Höhe des Bildes zu ermitteln und zu den ganzen Padding-Sachen des Divs zu addieren. (Wobei ich ehrlich gesagt nicht weiß, wie ich die Höhe ermitteln sollte, wenn nicht gleich beim Upload des Fotos in eine DB eingetragen).

Hat jemand eine bessere Idee dazu ?

Ich danke euch,

Fabi
 
Moin,

Bei einem Bild, das fertig geladen ist, kannst du, sofern du seine angezeigte Grösse nicht durch eigene Angaben geändert hast, über die Eigenschaften width+height die tatsächlichen Abmessungen des Bildes ermitteln.
 
okay, aber wie würde es aussehen, wenn ich jetzt nur Text in diesem Div habe ?
Gibt es denn keine Möglichkeit, die Height:auto; nicht auszulesen in dem Sinne, aber quasi eine rekursive Funktion solange sich wiederholen zu lassen, nach dem Motto

Code: 
while (curentheight < document.getElementById('blabla').style.height.auto) ...

Es muss doch irgendwie möglich sein, ein durch Höhe nicht festgelegtes Div nach unten aufscrollen zu lassen ?!

Ciaosen!
 
Fabian Frank hat gesagt.:
okay, aber wie würde es aussehen, wenn ich jetzt nur Text in diesem Div habe ?
Zum Vergrößern anklicken....
offsetHeight ermittelt die Höhe eines Objekts.

Aber sprachst du nicht eingangs von Bildern mit unterschiedlichen Höhen?

#edit

Der beschriebene Effekt zielt wohl in Richtung http://api.jquery.com/slideDown/ ab.

Das erste Beispiel daraus funktioniert gleichermaßen ohne die Höhenangabe, wenn im Gegenzug die Objekte Inhalt besitzen (hier: unterschiedliche Anzahl von <p>-Elementen).
HTML: 
<!DOCTYPE html>
<html>
<head>
  <style>
div { background:#de9a44; margin:3px; width:80px; 
/*height:40px;*/ display:none; float:left; }
</style>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
	Click me!
<div><p>foobar</p></div>
<div><p>foobar</p><p>foobar</p></div>
<div><p>foobar</p><p>foobar</p><p>foobar</p></div>
<script>
$(document.body).click(function () {
if ($("div:first").is(":hidden")) {
$("div").slideDown("slow");
} else {
$("div").hide();
}
});

</script>

</body>
</html>
 
Zuletzt bearbeitet:
Ja, sprach ich. Entschuldigt, ich hab vergessen zu erwähnen, dass ich das nicht nur auf Bilder anwenden möchte (im Hinterkopf hatte ich eben diese Lightbox...).

offsetHeight ist denke ich das, was ich brauche. Ich bin kein Fan von Bibliotheken, jedoch wäre jquery-api noch eine Alternativlösung.

Danke für eure Hilfe.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück