style.height = auto; Div ausklappen lassen... @ tutorials.de: Tutorials, Forum & Hilfe

Fabian Frank · 07.08.10 09:59

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

Sven Mintel · 07.08.10 12:05

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.

Fabian Frank · 07.08.10 20:56

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 :

1	while (curentheight < document.getElementById('blabla').style.height[I].auto[/I]) ...

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

Ciaosen!

spicelab · 07.08.10 21:38

Zitat von Fabian Frank

okay, aber wie würde es aussehen, wenn ich jetzt nur Text in diesem Div habe ?

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-Code:

<!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>

Fabian Frank · 08.08.10 04:36

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.

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

jQuery gibt mir im IE bei Width bzw. Height "auto" zurück

Div 100% height style probleme

auto:height die sich dem grösseren Div Element anpassen soll

auto richtig fahren lassen cinema 4d

iFrame height="auto" geht nicht

Stichworte

E-Mail:

Abonnieren Abbestellen