text area

[bobbiedigital]

Hi

I have an rte which is essentially a text box and i want to create a text area above it which essentially changes to report a particular style.

For example say i have 3 lines of text each with a different font, the html code is :

<p style="font-family: Verdana;" <font size="2">text line 1</font></p>

<p style="font-family: Lucida Console;" align="left"><font size="2">text line 2</font></p>

<p align="left"><font size="2"><span style="font-family: Tahoma;">text line 3</font></p>

and say when the cursor clicks on to the text in the text box, i can get the textarea to fill with the style.

im thinking the way to do it would be to write a javascript function so onclick it gets the style, ive tried this but i know i need to place an id somewhere in one of the tags, but this is where i get stuck.

Does anyone have any ideas?
Thankyou for your help
Bobbie

 

[BillyRayPreachersSon]

If you're using the TinyMCE RTE, I believe you get this for free if you enable the style/formatting drop-down.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[monksnake]

I have an idea, here I'll even set it up for you. Set all your styles up in classes and apply these classes to <span> tags that contain the style and font you want to click on. Put an onclick on the spans that grabs the class name of the span and assigns it to the textarea.

Example (with your data):

<p style="font-family: Verdana;" <font size="2">text line 1</font></p>

<p style="font-family: Lucida Console;" align="left"><font size="2">text line 2</font></p>

<p align="left"><font size="2"><span style="font-family: Tahoma;">text line 3</font></p>

span {
   font-size:7pt;
}
span.verd {
   font-family: Verdana;
}

span.lucida {
   font-family: Lucida Console;
}

span.tahom {
   font-family: Tahoma;
}

p.leftAlign {
   text-align:left;
}

<p><span class="verd" onclick="styleTextBox(this.className)">text line 1</span></p>

<p class=leftAlign"><span class="lucida" onclick="styleTextBox(this.className)">text line 2</span></p>

<p class="leftAlign"><span class="tahom" onclick="styleTextBox(this.className)">text line 3</span></p>
<textarea id="bigArea>blah blah blah ....</textarea>

function styleTextBox(spanClass) {
   document.getElementById("bigArea").className = spanClass;
}

<.