Hello,
I'd like to put, on a web page, a "place" where the user can type a
rather long text, with automatic coloring of each word (e.g. a color
depending on the number of letters of the word).
The only solution I could think of is rather ugly: a <textareafor
the user to type in, and behind the <textarea>, one <spanfor each
word, with the same text and font, and a colored background.
I've put it there: <http://perso.edulang.c om/temp/demo.html>. (For
this demo, the color changes according to whether the number of
letters is even or odd. On this page, the background color changes,
but I'd prefer if the text color would change.)
This solution doesn't really work well: not only did I have a hard
time handling spaces (two consecutive spaces show in a <textarea>, but
are counted as only one in a regular <span>), but also, there are lots
of cases to handle (the scroller for example).
Is there a good and working solution?
Shall I program my own "extented textarea"?
Or maybe Flash would be better in that case?
Thanks a lot in advance... 7 3861
Fabien LE LEZ said the following on 7/10/2006 2:03 PM:
Hello,
I'd like to put, on a web page, a "place" where the user can type a
rather long text, with automatic coloring of each word (e.g. a color
depending on the number of letters of the word).
OK.
The only solution I could think of is rather ugly: a <textareafor
the user to type in, and behind the <textarea>, one <spanfor each
word, with the same text and font, and a colored background.
An IE solution is rather short and simple. Trying to get it to work,
relatively easy, in other browsers may be more difficult.
I've put it there: <http://perso.edulang.c om/temp/demo.html>. (For
this demo, the color changes according to whether the number of
letters is even or odd. On this page, the background color changes,
but I'd prefer if the text color would change.)
You can simply change .color instead of .backgroundColo r
This solution doesn't really work well: not only did I have a hard
time handling spaces (two consecutive spaces show in a <textarea>, but
are counted as only one in a regular <span>), but also, there are lots
of cases to handle (the scroller for example).
Very true.
Is there a good and working solution?
Shall I program my own "extented textarea"?
Or maybe Flash would be better in that case?
Flash would definitely be more cross-browser friendly.
This is IE only code and may be easily modified for other browsers but I
am not sure. It has an issue with hard returns (enter key) where it
removes them but other than that it colors the words according to
length. If the length exceeds the color array, it uses the last entry in
the colors array.
It is undocumented. It's the results of about an hour of my afternoon so
if you have questions, ask.
<URL: http://members.aol.com/_ht_a/hikksno...oredWords.html >
It could be modified to work where it changed the colors as you type,
but I found that rather annoying and hard on my eyes.
Enjoy.
--
Randy
comp.lang.javas cript FAQ - http://jibbering.com/faq & newsgroup weekly
Temporarily at: http://members.aol.com/_ht_a/hikksnotathome/cljfaq/
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
On Mon, 10 Jul 2006 17:20:54 -0400, Randy Webb
<Hi************ @aol.com>:
>I've put it there: <http://perso.edulang.c om/temp/demo.html>.
You can simply change .color instead of .backgroundColo r
Nope. Since Javascript is rather slow, the textarea's text needs to
show (I can't just let it be transparent), so the "background span"'s
text color won't be visible, since it's behind.
><URL: http://members.aol.com/_ht_a/hikksno...oredWords.html > It could be modified to work where it changed the colors as you type, but I found that rather annoying and hard on my eyes.
There's a huge flaw: when you insert a space in the middle of the
text, the cursor goes to the far end of the text.
I think this can be corrected quite easily on IE, but not on other
browsers (only IE can give you the position of the cursor).
This definitely ain't a simple problem (Hey, if it was, I wouldn't
have posted it here). And I suppose I'll have to learn Flash.
Fabien LE LEZ said the following on 7/10/2006 5:51 PM:
On Mon, 10 Jul 2006 17:20:54 -0400, Randy Webb
<Hi************ @aol.com>:
>>I've put it there: <http://perso.edulang.c om/temp/demo.html>.
You can simply change .color instead of .backgroundColo r
Nope. Since Javascript is rather slow,
"Javascript is rather slow"? Yours or mine? <g>
the textarea's text needs to show (I can't just let it be
transparent), so the "background span"'s text color won't
be visible, since it's behind.
For some reason, I wasn't thinking about it that way but it makes
perfect sense.
><URL: http://members.aol.com/_ht_a/hikksno...oredWords.html > It could be modified to work where it changed the colors as you type, but I found that rather annoying and hard on my eyes.
There's a huge flaw: when you insert a space in the middle of the
text, the cursor goes to the far end of the text.
That's a flaw, and it would take some work to fix it. When the space bar
is pressed, you get the cursor position. Then after the innerHTML is
assigned, you put the cursor back where it is. It does what it does now
because it blanks the div and then replaces it which puts the cursor at
the end.
Maybe later tonight or tomorrow I will tinker with it some more and even
work on fixing the <enterkey flaw in it. Type some text, hit the
<enterkey and keep typing. It removes the hard returns.
I think this can be corrected quite easily on IE, but not on other
browsers (only IE can give you the position of the cursor).
That's not that hard to do, but the entire code is IE only anyway so
"not on other browsers" becomes a moot point :)
This definitely ain't a simple problem (Hey, if it was, I wouldn't
have posted it here).
It's an interesting idea, none the less.
And I suppose I'll have to learn Flash.
It would definitely be easier and more cross browser if written in Flash.
--
Randy
comp.lang.javas cript FAQ - http://jibbering.com/faq & newsgroup weekly
Temporarily at: http://members.aol.com/_ht_a/hikksnotathome/cljfaq/
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
On Mon, 10 Jul 2006 18:14:17 -0400, Randy Webb
<Hi************ @aol.com>:
When the space bar is pressed, you get the cursor position. Then after the innerHTML is assigned, you put the cursor back where it is.
I've thought about that all right, but AFAIK, there's no way to do
that on non-IE browsers.
And, I'd rather not do too much browser-specific code -- testing and
debugging on a few versions of IE, FF, Opera, Konqueror, Safari, and a
few other, is too time-consuming.
[Note: I'm rather lucky, since making a Links-compatible code isn't
mandatory ;-) ]
Fabien LE LEZ said the following on 7/11/2006 12:27 PM:
On Mon, 10 Jul 2006 18:14:17 -0400, Randy Webb
<Hi************ @aol.com>:
>When the space bar is pressed, you get the cursor position. Then after the innerHTML is assigned, you put the cursor back where it is.
I've thought about that all right, but AFAIK, there's no way to do
that on non-IE browsers.
And, I'd rather not do too much browser-specific code -- testing and
debugging on a few versions of IE, FF, Opera, Konqueror, Safari, and a
few other, is too time-consuming.
[Note: I'm rather lucky, since making a Links-compatible code isn't
mandatory ;-) ]
Write it in Flash and then test it in any browser with all of the
different versions of plugins and your testing time becomes comparable.
--
Randy
comp.lang.javas cript FAQ - http://jibbering.com/faq & newsgroup weekly
Temporarily at: http://members.aol.com/_ht_a/hikksnotathome/cljfaq/
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
I wrote:
>I'd like to put, on a web page, a "place" where the user can type a rather long text, with automatic coloring of each word (e.g. a color depending on the number of letters of the word).
Well, that does not seem possible in Javascript -- at least, if I want
it to work on most browsers.
So, I've made it in Flash (now *that* is an annoying piece of
software :-/ )
In case someone is interested, I've put the Flash thingy here:
<http://perso.edulang.c om/temp/demo-flash.zip>.
On Tue, 11 Jul 2006 23:17:27 -0400, Randy Webb
<Hi************ @aol.com>:
>Write it in Flash and then test it in any browser with all of the different versions of plugins and your testing time becomes comparable.
Well, of course the final result will have to be tested on lots of
different browsers. That job is to be done even if there's only plain
HTML code. And, it must be done by someone else than the programmer.
But here, there's a huge difference between the two solutions:
- javascript : here, we're using advanced, browser-specific features.
Sure, Mozilla and IE have the feature, and their interfaces are close
enough, but that's still browser-specific code. Especially with the
"get selection" feature.
And what about the non-IE, non-Gecko browsers?
In other words, there's a high probability that the result in each
browser will be different.
- Flash: I'm using a basic and well-documented feature. I'm pretty
confident that Macromedia did what was needed to make it work
everywhere. We're talking about only one editor here, not about the
long-lasting "feature war" between Mozilla and Microsoft.
Note: of course, advanced and/or undocumented features might give
different results in different versions of Flash. This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics |
by: janet |
last post by:
how can i count how many words have i written in a text
area???
Like taking an example ... i am writing in this textarea
of microsoft usergroup. and say in total i have written 50
words .. how can find out this information?
thanks
|
by: John D |
last post by:
I am trying to change the background colour of either a div or a textarea
with javascript, but am having problems.
I have passed a hex colour value in the variable hval, and with the
following code can change the background colour of the whole page, but only
(now) want to change either a textarea of a form or a div.
I'm stuck.
document.bgColor = hval;
|
by: martin |
last post by:
I needed a way to display calculated, multiple, changing values
(numerical sums) as users interacted with the page, and do this
without going back to the server to load the page again.
What I finally settled on was <input type=button...> without an
"onClick" attribute (because the purpose of the buttons was only
for displaying values).
It works fine except they look and act like buttons. No big deal,
but is there a better way?
|
by: aqualizard |
last post by:
I have searched and searched and searched...
Can someone please tell me how (or "if" it is even possible) to change
selected text in a textarea?
Specifically, say a user has highlighted "ppl" of the word "apple",
using a mouse. Is there a way to have the (usally blue) highlight
expand to the character to the left and right of the original
highlight, which is to say, highlight the entire word?
|
by: dan.vendel |
last post by:
Hi,
I know nothing about javascript, but quite a lot about regulat html and
CSS.
Have bumped into a problem that people in this fine congregation
perhaps can help me with.
I'm making a webshop. When user eventually ends up at the credit card
processor's secure pages, the styles are quite different from the
actual site's. I have managed to change some basics through a control
| |
by: StenKoll |
last post by:
Help needed in order to create a register of stocks in a company. In
accordance with local laws I need to give each individual share a
number. I have accomplished this by establishing three tables (se
below) then I run a query giving me a running total, which give me the
first stock in the batch purchased by an individual, then I use this
number and add the number of shares in order to find the number of the
individuals' last share.
So...
|
by: Arne |
last post by:
A lot of Firefox users I know, says they have problems with validation
where the ampersand sign has to be written as & to be valid. I don't
have Firefox my self and don't wont to install it only because of this,
so I hope some of you gurus can enlighten me with this :)
In what circumstances can the "&" in the source code be involuntary
changed to "&" by a browser when or other software, when editing and
uploading the file to the web...
|
by: woocha |
last post by:
I read this thread and realized that it was exactly what I was looking for. The problem is I need it to be done with sentences not words. I have a problems with typing the same thought down twice in a large text column of thoughts and ideas. This piece of software that I found on thread thread89492 works really well for words, but not for sentences. I have not been able to figure out how to get it to work.
here goes the original...
|
by: sejal17 |
last post by:
hello
I want to check duplicate word in textarea.In textarea,all words are separated by comma.No words are allowed with enter or white space.And the limit is only 7 words i want to insert.I want the code of this.Please help me.
Thanks..........
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
| |
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules.
He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms.
Adolph will...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one.
At the time of converting from word file to html my equations which are in the word document file was convert into image.
Globals.ThisAddIn.Application.ActiveDocument.Select();...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols.
I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
|
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
|
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| |
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...
| |