[JS/CSS] Textarea resizen dmv JavaScript en CSS - Softwareontwikkeling

woensdag 6 oktober 2004 16:21

Acties:

Internet Entrepreneur

Topicstarter

Een textarea resizen is een piece of cake als je met rows en cols werkt:

code:

<html>

<body>

<Script language='JavaScript'>
    function TextAreaResize(value, value2) {
        document.getElementById("textAreaId").rows = document.getElementById("textAreaId").rows + value ;
        document.getElementById("textAreaId").cols = document.getElementById("textAreaId").cols + value2 ;
    }
</script>

<input type='button' onclick='javascript:TextAreaResize(-1, 0)' value='Less Rows'>
<input type='button' onclick='javascript:TextAreaResize(+1, 0)' value='More Rows'>
<input type='button' onclick='javascript:TextAreaResize(0, -1)' value='Less Cols'>
<input type='button' onclick='javascript:TextAreaResize(0, 1)' value='More Cols'>
<textarea cols='20' rows='30' name='textAreaId' id='textAreaId' class='textAreaClass'>HOEI!</textarea>

</body>

</html>

Echter dit gaat ervan uit dat je uberhaupt cols en rows hebt gedefinieerd in je textarea tag. Dit heb ik dus niet en wil ik ook niet: ik doe het met CSS, want ik wil een waarde in px kunnen invoeren.

Hoe kan ik nu dan de textarea van grootte laten veranderen? Ik heb al flink wat lopen kloten, echter wat blijkt: je kan de style.width van een object op je pagina niet bepalen. Stel ik voeg in het vorige voorbeeld het volgende toe

code:

<head>
<style type='text/css'>
textarea.textAreaClass {
        width: 200px ;
        height: 200px ;
    }
</style>
</head>
(...)
<script language='JavaScript'>
alert(document.getElementById('textAreId').style.width) ;
</script>

...dan blijft je alert box leeg. Je weet dus niet hoe groot hij is en dat is dus ook niet op te roepen. Je zou hem wel een nieuwe waarde kunnen geven d.m.v.:

code:

<script language='JavaScript'>
var ta_width = 400 ;
document.getElementById('EVOEditor').style.width = ta_width + "px" ;
</script>

Maarja, veranderen is er dus niet bij, want ik weet niet hoe groot hij is.

Iemand die weet hoe dit op te lossen?

[ Voor 28% gewijzigd door Cavorka op 06-10-2004 16:22 ]

the-blueprints.com - The largest free blueprint collection on the internet: 50000+ drawings.

woensdag 6 oktober 2004 16:25

Acties:

djluc

evil oplossing: je slaat de inhoud op in een var, maakt met createElement en setAttribute een nieuwe textarea van mooi formaat en met de juiste inhoud. Met appendChild hang je deze weer op de juiste plaats.

woensdag 6 oktober 2004 18:12

Acties:

crisp

Devver

Pixelated

met currentStyle (IE) of computedStyle (DOM lvl2) kan je de geldende style-waarden ophalen

Intentionally left blank