höhe von div langsam ändern

Greg10

das problem dabei: automatischer zeilenumbruch
wenn ich nur irgendwie die höhen zweier divs vergleichen könnte....
also div 1 (höhe unbekannt) ist höher / niedriger als div 2 (höhe unbekannt)

synaptic

also so langsam wirds arg eng für dein vorhaben

Greg10

jap wahrscheinlich gibts genau eine möglichkeit aber die ist so ungewöhnlich, dass wir einfach nicht drauf kommen

synaptic

dein optmismus ist bemerkenswert

poste mal entsprechenden code bitte

Greg10

entsprechenden code für was?
wieso optimismus?
wir fhaben die möglichkeit selbst nach langem überlegen nicht gefunden also werden wir sie wohl wahrscheinlich nie finden :-/

synaptic

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">


<head>
    <title>checking</title>
    <script type="text/javascript">
/* <![CDATA[ */
function textit(zahl){
var text1 ='äiheüfiohWÜEIOFGHAÜIGR OHAÜHÜAIROHG ÜAIRHEGÜIRHEGÜOI AHERÜGOIHAERGNAÜÄ EIRHBÜEÄB HÜEHEIRHGÜIHÜEÄIH *IROEGHÜOIRAHE GÜOIJAERÜGOIJEAÜROIGJÜAEIJR GÜAIREJGÜIJAERÜIGEÜI ROGJÜAEIROJGÜOIRAEGÜ *OIRAHE*ABGIOER*BAIHERHRÜOIB HÜAEIRHIAERIEGJÜAEROJGHAERJGHE *PJROH*PAEJRO HAEIJRHAIJR EH*PAJROEH*PJROEHB'P EIJROHB'PEORJBH'POJAEHPRO EJHPAEJROAH'EPJOH* PAERJOHPAFJROHAFLÖJHLAFJHPA JROH'PAEJROH'EDROH';
var text2 ='blubb';
var target = document.getElementById('datdiv');
if(zahl==1){target.innerHTML=text2;}
else{target.innerHTML=text1;}
}


function getheight(){
var target = document.getElementById('datdiv');
alert('height: '+target.style.height +' - minheight: '+ target.style.minHeight);
}
/* ]]> */
</script> 
</head>


<body>
<div id="header"></div>
<div id="wrapper">
<div id="navi"></div>
<div id="content" style="width:80%;">
<input type="button" value="blubb" onclick="textit('1');"><input type="button" value="mehr text" onclick="textit();"><input type="button" value="getheight" onclick="getheight();">
     <br />
     <p id="datdiv" style="min-height:50px; background:yellow; width:50%;">

     </p>


</div>
<div id="footer"></div>
</div>




</body>
</html>

Alles anzeigen

das hab ich grad mal auf doof gemacht um zu testen.. fucked gut ab dein prob..^^ wollt eigentlich zocken und mich mal wat entspannen, aber beim lesen deines anfrage hats mich gepackt -.-

der entsprechende code wäre dein problemcode gewesen...
hast du ne fixe breite für dein div oder ne dynamische?
denn eine idee hab ich noch

Greg10

kann ich nicht genau sagen^^
das konzept befindet isch in der entwicklung^^
momentan dynamisch (78%) später vielleicht fest in px

No0ob

So, hier hab ich mal was schnell hingezaubert, damit ihr seht, wie das geht
http://phpdave.com/whyjqueryownssomuch.htm
Aber vorsicht! Lasst euch nicht von der enormen Codemenge erschlagen

Dodo

ich hab die Idee

1) Du benutzt eine Schriftart, in der jedes Zeichen gleich breit ist.
2) Du schaust nach, nach wie vielen Zeichen ein Umbruch kommt.
3) Eine einfache Division sagt dir die anzahl der Zeilen
4) Darüber kann man mit der Schriftgröße auf die neue Contenthöhe rückschließen.
5) Mit dem vorher gespeicherten wert für den Content, kann man das langsam öndern

@NoOoB:
Ich denke du hast das Problem noch nicht verstanden.
Das problem ist nicht das umändern der größe, sondern das herausfinden der Größe, damit man die Größe überhaupt ändern kann, damit der Text hineinpasst(!)

Greg10

da gibt es noch das problem das monospace beim hauptcontent mistig aussieht

Dodo

dann bleibe denke ich nur noch 3 möglichkeiten
1) du gibst für jeden text eine eigene größe dazu, auf die geändert wird
2) du misst für deine Schriftart zeichen für Zeichen.
3) Du lässt einen gewissen Fehlerbereich zu, und nimmst einen Mittelwert für jedes Zeichen.

Greg10

nummer 2 scheidet auch aus da nicht wirklich bestimmen kann welche schriftart der user nutzt, wenn er die nicht hat die ich haben will nimmt er eine andere und es geht wieder nicht oder er verbietet in den browsereinstellungen das ändern der schriftart
bei nummer 1 wird dann halt je nach schriftart entweder der div zu groß oder text wird abgeschnitten und beides will ich vermeiden

dann gäbe es nur noch wie schoneinmal erhähnt die 2 möglichkeiten die mir eingefallen sind:
1.) solange vergrößern und überprüfen ob der div scrollbalken hat (overflow:auto;) bis er eben keine mehr hat (muss man dann halt zunächst im shcnelldurchlauf bei einem div ohne breite und mit selbem content testen um die höhe rauszukriegen)
2.) solange vergrößen und überprüfen ob der div niedriger ist als ein anderer div ohne breite mit dem selben content bis er es een nicht mehr ist

aber ich denke beide arten der überprüfung sind nicht möglich/stark browserabhängig?

synaptic

ich stell mir grad die frage, wie du auf nen scrollbalken prüfen willst.. ich hab dafür bis dato noch keine möglichkeit gesehen.. ich kann zwar bei nem mit js erzeugten fenster den balken direkt ausschalten, aber des is window.scrollbars und nich object.scrollbars!

evtl musste da tatsächlich von hinten durch die brust ins auge um an deine eierlegende wollmilchsau zu kommen.

ich hab auch bis dato nie so ne faxe versucht.. ob man da mit offset rankommt? ich weiß es nicht..
du könntest mit faux columns arbeiten dann sieht man generell nich wie hoch des div is sondern imitiert auch da noch nen div, wo es eigentlich schon zu ende ist...

Greg10

nein das geht auch nicht, da dieser div eigentlich die höhe der ganzen seite bestimmt (content-div halt)
ich weiß doch auch nicht wie ich auf scrollbalken prüfen kann sonst hätt ichs ja schonso gemacht!

synaptic

also mir fiel bis jetzt nichts ein, wie das realisierbar wäre..
also nicht unter den genannten gesichtspunkten.
wenn du deinen text selber formatieren würdest könnte man anhand der <br> und der lineheight an nen wert kommen, aber so......

!no chance! denke ich

Greg10

ich formatier ihn ja selber!
das verhindert aber nicht, dass zulange zeilen im browser umgebrochen werden und wird dann eine zeile mehr haben, die abgeschnitten wird

Greg10

Ich hab die lösung!
die höhe eines divs bekomtm mit der eigenschaft offsetHeight raus!
Mein Bruder hat das nach 10 sekunden rausgekriegt

The User

Da hilft übrigens auch ein kleiner Blick im FireBug, manchmal sind so Hilfsmittel eben schon praktisch, gibt übrigens auch offsetLeft und offsetTop für die Position.

Tags