div größe abhängig vom inhalt

O

ossi26

Grünschnabel
Hallo miteinander!
Gleich vorweg, ich bin ziemlich neu im Bereich javascript, und hoffe ihr könnt mir bei meinem Problem helfen:

Ich habe da einen div, und darin befindet sich eine Aufzählungsliste. Die Anzahl der Elemente in der Liste kann sich verändern - die Liste wird durch ein Menü - Modul eines CMS geschrieben.

Was ich nun gerne machen würde ist 1) auslesen wie viele Elemente (Aufzählungspunkte) in der Liste sind und dann 2) die größe des DIVs dementsprechend anpassen - und zwar sollte die größe des DIVs zB "Anzahl der Elemte" x 20px sein.

Meine Frage ist jetzt: geht das überhaupt, und wenn ja, wie****

Vielen Dank im voraus für eure Antworten.
 
Angenommen du hast so was:

HTML: 
<ul id="foobar">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>

Dann bekommst du so "3" raus:

Javascript: 
document.getElementById('foobar').getElementsByTagName('li').length;

Aber wieso machst du das nicht via CSS? Du könntest dem DIV z.B. folgende Eigenschaft geben

CSS: 
#bacon {
    line-height:20px;
}
 
Hallo CPoly,

danke für deine Antwort.
dein javascript-code hat zwar so nicht funktioniert, du hast mich aber auf den (denke ich) richtigen weg gebracht; mein code sieht jetzt so aus:

Code: 
//Skript zu berechnung der hoehe
function Hoehe() {
	var anzahl = lyr1.getElementsByTagName("li").length;
	
	var multiplikator = anzahl / 6
	
	var multiplikator_rund = parseInt(multiplikator);
	multiplikator_rund++;
	
	
	var hoch = multiplikator_rund * 506;
        document.all.lyr1.style.height = hoch + "px";


}

Diese Funktion starte ich dann mit
HTML: 
<body onload = "Hoehe()">

Im internet explorer funktioniert das ganze genau so wie es sein sollte - aber leider im firefox nicht!
die onload funktion gibt es doch im firefox genauso, oder etwa nicht?

danke im voraus!
 
Du benutzt ganz oben "lyr1". Wo kommt das her? Außerdem ist "document.all" nicht Standard konform.
 
lyr1 ist die id des DIVs, in dem sich die aufzählungsliste befindet.

Die Sache mit document.all habe ich irgendwo auf selfhtml gefunden... Wie würde es den richtig heißen?

Danke!
 
ich habe die Sache mit dem getElement anfangs in einer Test-Datei versucht - da hat es nicht funktioniert, daher habe ich auch geschrieben dass dass dein code nicht funktioniert hat.
ich habe das ganze jetzt aber in mein originales projekt eingebaut - der gesamte code:
Code: 
function hoehe() {
	var anzahl = document.getElementById('lyr1').getElementsByTagName("li").length;
	
	var multiplikator = anzahl / 6
	
	var multiplikator_rund = parseInt(multiplikator);
	multiplikator_rund++;	
	
	var hoch = multiplikator_rund * 506;
        document.getElementById('lyr1').style.height = hoch + "px";
      
   }
Das scheint so weit jetzt auch wirklich zu funktionieren - wenn ich mir mit meinem WebDeveloper-Tool die Blockgrößen anzeigen lasse zeigt er mir wirklich die gewünschte größe. Also vielen Dank so weit.

ABER: Glücklich bin ich noch immer nicht; wir haben auf der selben seite, für dieses eine div, bereits andere javascripts eingebaut. (Es handelt sich hier um einen scroller, den wir fix fertig im web gefunden haben).
und eben diesen scroller ist es jetzt völlig egal dass ich per script die größe vom div verändere - sprich: wenn ich per script das div so verkleinere, dass es eigentlich gar nichts zum scrollen gibt, scrollt er trotzdem. Wenn ich das Div vergrößere scrollt er trotzdem nicht weiter. Komischerweise tritt dieses Problem aber nur im Firefox auf - im IE funktioniert es.

Meine Vermutung ist jetzt dass das Problem daran liegt dass die Scroller-Javascript-Files bereits im Head eingelesen werden, während mein skript erst nach vollständigen laden der seite (body onLoad...) gestartet wird - liege ich da vielleicht richtig?

Ich kann mein Skript doch aber an keiner anderen stelle starten, da ja zuerst das Div mitsamt inhalt da sein muss - oder?
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück