dynamic population on page

[ArrTu]

This could apply either to CSS or to javascript, so I have taken my chances here.

I already know how to dynamicly populate a form, but I am attempting to take it a stage further.

I have a menu which passes text, pictures or both into a textarea.

Now, I thought that there may just be a way to do the exact same thing, but by using a css overflow substituted for a textarea. What I don't get is how to declare an overflow area in javascript. Any help?

[Rambo Tribble]

Overflow is a style property of a block element, like a div. If you gave your div an id of "divID" the code for assigning an overflow of "auto" should look something like:

document.getElementById("divID").style.overflow="auto";

[ArrTu]

Sorry..am I missing something...?

If i was declaring via a form select option to show in a text area:

<form name="thisform">

<select name="selectwhat" size="1" onChange="showtext()">
<option value="select" readonly Selected>Select from the list></option>
<option value="A" readonly>first choice</option>
<option value="B">second choice</option>
<option value="C">third choice</option>
</select>

<TEXTAREA rows=6 cols=40 wrap="physical" name="show" readonly>Select from above</textarea>

<script language="javascript">

var description=new Array()

description[0]="Select"
description[1]="first display
description[2]="Next display."
description[3]="another display"

function showtext(){
document.thisform.selectwhat.show.value=description[document.thisform.selectwhat.select.selectedIndex];
}

</SCRIPT>

</FORM>

>>>>>>

(?)To do the same in an overflow is :

<DIV ID="menu">
<UL>
<LI><A HREF="javascript:void(0)" onclick="show()"
onfocus="this.blur()" Home</A></LI>
</UL></DIV>

<DIV class=overflowobject ID="showit">
</div>

<script language="javascript">

function show()
{document.getElementById("showit").style.overflow="description1";
}
</SCRIPT>

This, if I am getting you correctly passes the text "description1" into the overflow object declared in divid "showit"? Or have I completely misinterpreted this, as it does not do anything at all.

[Rambo Tribble]

I think you may have a mistaken impression of what the overflow property is supposed to do. The property tells the browser how to handle content that exceeds the boundaries of its containing element. So, if you have a div containing more text than will display in the dimensions set for the div, the overflow can handled according to one of five possible settings: visible, hidden, scroll, auto, or inherit. These are the only acceptible values for overflow. Also, overflow is the property of an object, not an object itself.

If you wish to write content into a document element other than a form element, you will probably be best served using the innerHTML method. Otherwise, if you want the value of the select to be appended to the text in a textarea, you can use the technique of making the textarea's value += the value of the select.

Make sense?

[ArrTu]

Yes, sorry. With you now.
The confusion seems to have arisen in my introduction to the overflow element. When I first saw it, I just assumed its workings and paramanters similar to that of a textarea form element, and that I could simply pass variables into an overflow to be displayed. As this is evidently not the case, as you have outlined above, I will just have to revert to a textarea until an alternative (better) option manifests.

Thanks for your help.

[createErrorMsg]

ArrTu,
In my limited experience, what RamboTribble suggested (the use of getElementById('id') combined with innerHTML) is a better way to display text on the fly in a page. With a textarea you are stuck with the barebones formatting the form element uses (courier font, no bells or whistles).
Personally, I can't stand reading text in a textarea.
If you set up an area on your page using a div with a unique id (like, <div id="preview">, for example) you can not only dump your text and/or images into it, but you can format the thing using any and all of the style properties at our disposal. You can give it borders, backgrounds, change the font and size, indent, etc. A textarea gives you none of this freedom. An added bonus is that the containing div resizes to hold your content (unless you don't want it to, in which case you give it width and height settings in a stylesheet and it stays the same!).

Dumping your content into this DIV is easy. First code the DIV in your page:
<div id="preview">
<p>My default paragraph of text.</p>
</div>

Next, in your javascript, create a variable for each menu option containing the text and material you want dumped in the DIV:

var menuItemOne = "<p>This is the text that goes with menu option one. Ain't it grand?<\/p?"

Don't forget to add the html tags necessary for proper rendering of the elements.

Last, in your javascript, set the DIV's innerHTML property equal to the right variable:
document.getElementById('preview').innerHTML = menuItemOne.

Et voila! You can even use CSS position:absolute (or float for IE5+ or NN6+) to put that box anywhere on the page you want.

Peace.

[Rambo Tribble]

Well said, createErrorMsg.