Page 1 of 1

how can you highlight text multiple colors within textarea?

Posted: Fri Dec 21, 2007 4:38 pm
by vapoorize
feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]


I was wondering what css tricks/methods you can use to highlight text multiple colors within the same textarea. I am aware of how to change attributes to the main textarea tag itself, but this changes the colors for the entire textarea, so thats 1 color for the whole textarea

I'm inspired by this page:
http://tinyurl.com/2ks2be

If you look at the source of html/css you will find:
CSS:
[syntax="css"]#search                     {height:60px; width:99.75%;}
#input                      {height:375px; width:99.75%; margin-top:10px;}
.smartField                 {position:relative; overflow:auto; border:1px solid #ccc; background:#f9f9f9;}
.smartField pre,
.smartField textarea        {font:100% "courier new",monospace; width:100%;}
.smartField pre             {z-index:1; color:#f9f9f9;}
.smartField textarea        {z-index:2; border:0; background:transparent; position:absolute; top:0; height:100%; min-height:100%; overflow:hidden;}

/* Highlighting ------------------------------------- */
b, i, u       {font-weight:normal; font-style:normal; text-decoration:none;}
#input b      {background:#fff000; color:#fff000;}
#input i      {background:#80c0ff; color:#80c0ff;}
#search b     {background:#aad1f7; color:#aad1f7;}
#search i     {background:#f9ca69; color:#f9ca69;}
#search i b   {background:#f7a700; color:#f7a700;}
#search i u   {background:#efba4a; color:#efba4a;} /* No RB equivalent */
#search b.g1  {background:#d2f854; color:#d2f854;}
#search b.g2  {background:#9ec70c; color:#9ec70c;}
#search b.g3  {background:#ecc9f7; color:#ecc9f7;}
#search b.g4  {background:#54b70b; color:#54b70b;}
#search b.g5  {background:#b688cf; color:#b688cf;}
#search b.err {background:#ff4300 !important; color:#ff4300 !important;}
HTML:

Code: Select all

<div id="body">
		<div id="search" class="smartField">
			<textarea cols="100" rows="3" tabindex="1">look +_++how it is (hi(ghligh)ted)</textarea>

		</div>
		<div id="input" class="smartField">
			<textarea cols="100" rows="10" tabindex="2"></textarea>
		</div>
	</div>
JS Script: http://tinyurl.com/35zctq


What puzzles me is that there are no tags inside the textarea itself and around the highlighted text, yet obviously there are css styles made for highlighting text. So how can you apply a style if you don't put tags around the text!??
I'm interested in seeing any js and/or html and/or css solution to this

-thanks


feyd | Please use[/syntax]

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]

Posted: Fri Dec 21, 2007 5:17 pm
by feyd
Textarea tags themselves can only be given styles across their entirety. No variety can be done internally.

Posted: Fri Dec 21, 2007 5:28 pm
by vapoorize
yes I realized that through trying it feyd. I showed this example url for a reason, because they manage to pull it off, you can see that the highlighted text resides IN the textarea. And you see that it is highlighted. So in repeating myself, I"m asking Why?

Posted: Fri Dec 21, 2007 5:40 pm
by feyd
In all probability they have Javascript converting it to a live edit field.

Posted: Fri Dec 21, 2007 10:39 pm
by vapoorize
go on.. how is this done?
Most Helpful '05, '06
really?

what in the world is a "live edit field" ?
didn't find anything useful here:
http://www.google.com/search?hl=en&safe ... arch[quote][/quote]

Posted: Sun Dec 23, 2007 9:42 am
by feyd
Look up TinyMCE, et al. They dynamically convert a textarea to a formatted field. Albeit to HTML, but one could easily modify them to do otherwise.