PDA

View Full Version : Writing inside an auto-resizing layer?

pvz
05-09-2005, 10:45 AM
Hello! I've got 2 related questions:
1) I would like to be able to write simple text directly into a layer.
2) I would like the width of the layer to be fixed, but the height of it to resize to fit the content which I write in it.
I would be SO thankful if somebody could let me know if this is possible, I've searched google without success...
Thanks/Per, Sweden
glenngv
05-09-2005, 11:12 AM
1) I don't exactly know what you actually mean.
2) Set the width and don't set the height.

<div style="width:100px; border:1px solid red;">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</div>
pvz
05-09-2005, 12:00 PM
Thanks Glenn, sorry about the second question, of course i should know that!

What im looking for in the first question is to use a <div> instead of <input type="text"> if you get what i mean... I know that's possible with several "wysiwyg text-area replacements", but i don't want any of the extra features that come with those. I just want to be able to write regular text inside the <div>! Hope you understand now! Thanks/Per
glenngv
05-09-2005, 12:15 PM
I think contentEditable is supported in IE only.

<div contentEditable="true" style="width:100px;border:1px solid black">Type something here</div>

Use iframe and set designMode to "on" for more cross-browser support.

<body onload="document.getElementById('edit').contentWindow.document.designMode ='on';">

<iframe id="edit" src="about:blank"></iframe>

</body>
pvz
05-09-2005, 01:32 PM
Thanks again... ContentEditable was what I was looking for.
After searching Google for some info, it seems that Mozilla Firebird (0.6.1+) supports contentEditable, and that Safari soon will... But how can I check if the browser supports it, and if it doesn't, display a regular form object instead? Hope you can help, thanks/Per
glenngv
05-09-2005, 01:41 PM
var editor = document.getElementById('editor');
if (typeof editor.contentEditable != "undefined"){
//contentEditable is supported
}