[css]Hoogte van een div moet altijd 220px blijven - Softwareontwikkeling

woensdag 26 maart 2003 11:11

Acties:

CQB 241

Topicstarter

Hoi,

ik heb een klein CSS probleempje. Ik zag een URL waar je een "online" tekst editor kon maken. Welnu, ik heb deze redelijk tot netjes werkend, maar, ik wil niet dat de <div> groter dan 220px wordt. En in dit geval rekt de <div> uit zodra je meer dan 15 regels invoert.

Is dit op de een of andere manier tegen te houden?

code:

<html>
<head>
<title>MEXX P.o.d v0.5</title>
<style type="text/css">
<!--
.invulbox {
font-family: Verdana; 
font-size: 12px; 
text-align: left; 
height: 220px; 
width: 196px; 
border: 1px #000000 solid
}
-->
</style>
</head>
<body>
<form name="form1" method="post" action="">

<button unselectable="on" onClick='document.execCommand("Bold");
myDocument.focus();'><b>Bold</b></button>
<div class="invulbox" id="myDocument" unselectable="off" contentEditable="true">
</div>

</form>
</body>
</html>

Heart..pumps blood.Has nothing to do with emotion! Bored

woensdag 26 maart 2003 11:17

Acties:

Willem

overflow:auto toevoegen?

Motor (of auto) onderhoud bijhouden

woensdag 26 maart 2003 11:23

Acties:

TeeDee

CQB 241

Topicstarter

Ja, maar dan krijg ik dus een pracht van een scrollbar.
En dat is niet de bedoeling...

De tekst moet gewoon domweg afgekapt worden.

Heart..pumps blood.Has nothing to do with emotion! Bored

woensdag 26 maart 2003 11:33

Acties:

Verwijderd

overflow: hidden dan, of wil je dat je niet meer kan typen? dan moet je met js effe wat afvangen (onChange kijken of je tever zit en dan false returnen ofzo (gokje hoor))

woensdag 26 maart 2003 11:33

Acties:

Willem

Is overflow:hidden niet wat je bedoelt?

spuit -fokking- 11

[ Voor 28% gewijzigd door Willem op 26-03-2003 11:33 ]

Motor (of auto) onderhoud bijhouden

woensdag 26 maart 2003 11:37

Acties:

TeeDee

CQB 241

Topicstarter

overflow:hidden is het ook net niet, die was ik idd ook net aan het proberen

Ik zat idd al te denken aan Js maar ik heb het nog niet voor elkaar gekregen dat dat werkt op een niet form element.

code:

function textCounter(field, countfield, maxlimit) {
if (field.value.length > maxlimit) // if too long...trim it!
field.value = field.value.substring(0, maxlimit);
else 
countfield.value = maxlimit - field.value.length;

Dit script kapt netjes de tekst af. Alleen werkt deze volgens mij dus alleen maar op form elementen!

Heart..pumps blood.Has nothing to do with emotion! Bored

woensdag 26 maart 2003 11:40

Acties:

Verwijderd

ja, komt omdat je naar de field.valie kijkt (dat wordt innerHTML voor een div), maar je limiteert hiermee het aantal characters en dat is misschien ook niet wat je wilt. Als je de offsetHeight deelt door de lineHeight krijg je het aantal regels en daar kan je vervolgens een limiet aan stellen. Misschien wil ik vanmiddag wel effe een voorbeeldje klussen (dan ben ik in een goede mood, want dan zijn m'n tentamens voorlopig weer voorbij)

halfwerkend voorbeeldje: http://www.rikkertkoppes.com/tests/maxlines.htm

[ Voor 11% gewijzigd door Verwijderd op 26-03-2003 11:56 ]

woensdag 26 maart 2003 11:41

Acties:

Willem

lamaa

[ Voor 95% gewijzigd door Willem op 26-03-2003 11:41 ]

Motor (of auto) onderhoud bijhouden

woensdag 26 maart 2003 11:46

Acties:

TeeDee

CQB 241

Topicstarter

Verwijderd schreef op 26 March 2003 @ 11:40:
ja, komt omdat je naar de field.valie kijkt (dat wordt innerHTML voor een div), maar je limiteert hiermee het aantal characters en dat is misschien ook niet wat je wilt. Als je de offSet height deelt door de lineHeight krijg je het aantal regels en daar kan je vervolgens een limiet aan stellen. Misschien wil ik vanmiddag wel effe een voorbeeldje klussen (dan ben ik in een goede mood, want dan zijn m'n tentamens voorlopig weer voorbij)

Als je een heel klein sampletje zou kunnen doen, graag

(oei oei oei, is dit een scriptrequest?)

Ik limiteer idd het aantal karakters ja. Dat is misschien ook niet helemaal de bedoeling. Maar wat je nu dus allemaal zegt over offSet e.d. zegt mij in ieder geval op dit moment niks.

Maar ik zal nog even rondneuzelen.

/edit:
Thanks mophor, zo simpel eigenlijk! (JS is niet mijn favoriet

)

[ Voor 5% gewijzigd door TeeDee op 26-03-2003 12:02 ]

Heart..pumps blood.Has nothing to do with emotion! Bored

woensdag 26 maart 2003 13:35

Acties:

Verwijderd

Ik weet niet echt of dit is wat je zoekt, maar je kan ook gebruik maken van:

code:

1	<div style="clip:rect(0 220 450 0);"></div>

krijg je dus een div van 220 breedt en 450 hoog, maar goed, er zit hier geen karakter limiet op... en weet niet of je hier wat aan hebt