You know how when you start typing in Instant, the suggestions for words you want start to come up, and the #1 suggestion is some grey text beside the word? That is what I am interested in trying to mimic (in javascript, prefer), but for text fields and text areas.
I thought about getting the x and y coordinates of the current caret position, and placing the grey text there. However, I'm not sure if this is the best option, because if I want to place that grey text in the middle of a sentence, or what have you, then the rest of the text would have to be shifted over to make room. Not to mention the fact that I haven't yet found a good way to even get the x and y coordinates of the caret in a textfield or textarea. For these reasons, this option just seems inefficient.
Also, the code can not be the same or near the same as what Google has. One additional feature I want is having the grey text appear in the middle of sentences, which Google's code doesn't support. So, that would need to be included in the solution.
Does anyone have an idea (or some code) of how to achieve this? I have been pondering this for a while and haven't really gotten anywhere.
Thanks!
JQuery has a wonderful autocomplete plugin.
Related
Hey guys I am working on an application and so far its going well but while working on a recent features i am a little stuck.
Here is my problem:
using java script I am getting continuous user speech input and transcribing it. While I am getting this speech input i want to be able to identify and highlight the text on the screen that is being read. I want to highlight mistakes (words spoken that don't match) and I want to highlight all the content that is going correct.
I am not asking for someone to code this for me, i just want to be pointed in the right direction.
A similar implementation you have probably seen is in online typing games. where you try to type parts of a passage as fast as possible and it highlights the ones you are getting right and the ones that you are getting wrong.
Any help is appreciates, libraries, algorithms, methods, or terms I should search. Thank you !
Are you indexing the text at all? Do you know the text in advance? If you created an in memory graph database using each word in the text, you could search edges to find 'weighted' hits. It's ambitious, but there's an article here:
https://graphaware.com/neo4j/2016/07/07/mining-and-searching-text-with-graph-databases.html
If you want to go dirt simple and follow your typing game analogy:
In the typing game an event is fired each input (keypress).
The key pressed is compared to the expected one.
If it is not correct it is flagged as wrong.
There is usually no way to go back and correct the mistakes.
The user has to type the next expected letter correctly to
get things rolling correctly again.
You could do the same thing.
Underline the next expected word.
Each word (whitespace) is an event.
Match the text to speech word to the expected word.
If it is not right, flag it as wrong, strike it out.
The user has to say the next underlined word correctly to start things going smoothly again.
You could allow the user to back space the expected word so he/she could start over where they wanted to.
This will have some hiccups, as all things speech to text do, but it will work like your typing game and be simple to implement.
I've been trying to make a row-marking script to help me read text online. When I read books I always use a ruler or paper. Online, I don't have this option and usually get lost in text.
W - move div up
S - move div down
JS fiddle for my current effort (S = down, W = up)
The best thing I could come up with is to have equal row height for all text-elements, but makes styling quite hard. Also, I would like to be able to run it in the console to enable it on any website (or install it as a add-on).
Is there some better way to design a tool like this, that makes it more capable and adaptive to unknown content?
I can of course select text and I do that a lot. Usually, it results in me selecting only some words-> attention goes to that word, which is kind of what I want to avoid.
I could also use a secondary window, which I do sometimes. But it's a bit wobbly and as soon as you click it disappears.
A div that follows mouse-pointer is a possibility, but it's too shaky and feels like something got stuck on your finger.
EDIT: I updated the fiddle with the changes. I kept the javascript because without it you won't be able to move the ruler to the lower parts of the text.
Updated reading-ruler
Instead of JavaScript you could set a position: fixed for the .ruler. It will stay in the same place all the time so you can read the text with the .ruler element below it.
Here is the jsFiddle. http://jsfiddle.net/RxDpP/1/
I am trying to use a text area to gather input from the user and then when the user clicks a done button. I grab the textarea value and insert it into Raphael text object. Easy enough. However, I realized after typing out a paragraph in the text area that a number of things occur. Here are a couple of things that occur.
Although in the text area it looks like its on multiple lines it actually just puts it all on one line. (Makes sense after thinking about it for two seconds)
When I hit enter it puts the text onto a new line but if I hit enter and add mulitples new lines above the text it just ignores them.
So basically what I am asking is does anyone know the best way or any way that is more consistent and efficient to take textarea text and formatting it properly to look the same way in Raphael. Tips tricks would be appreciated.
I am evaluating technology options for an upcoming project, and one of the requirements is to draw a rectangle around certain groups of words in a text field.
Each time the text is evaluated and parsed, certain recognized parts of it must be boxed with a rectangle, which should also respond to mouse clicks. There is even a requirement to place a little triangle to one of the corners of this rectangle.
I have no control over the requirements, and clearly this requirement points out to getting pixel positions of text in a text field (or a div container), and using some sort of overlay mechanism to draw the rectangle.
Unless I am using the wrong keywords, google searches return no helpful results, and I'd really appreciate your input about this topic.
Best Regards
Seref Arikan
Ps: any books/resources about advanced browser dom based graphics with javascript be appreciated also.
I would recommend looking at this plugin: http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html
It's not exactly what you want, but you might be able to adapt it. The work of finding text in running content and then manipulating it is a little messy.
edit note that that plugin is for text in the HTML document, not text in input text fields or in <textarea> blocks. That would be pretty hard to do, but possibly somebody's done it.
I suggest you use multiple, borderless text fields, each containing a single part of the text(words or letters) and wrap groups as needed in span styled with a border and the triangle as a positioned background image.
Is there any way to make textarea display lines in colors? What I am trying to achieve is every second line colored, i.e. white,grey,white,grey,white,grey... for better readability. Users are supposed to write in lots of stuff, as in "enter names, each one from new line".
I do use jQuery anyway so if they made some simpler solution for this it would be perfect.
What you are looking for is called Zebra striping, maybe that will help with some google searching. However, I don't think there is a way to currently do this to text within a textarea (besides using the background image hack).
CSS3 has a lot of powerful features such as the nth-child psuedo class. There might be a way to do it using that, but again, it probably has no way to do that within a text area.
Perhaps another solution would be to do something like SO does -- where you enter text into a textarea and then next to it or below it it shows a nicely formatted version. You would use jquery to parse the text in real time and display it zebra striped.
Edit: I had another idea that might work, but would take some experimenting. There is probably a way using jquery to get the absolute position of each line of text in the text area. I would think you could at least get the absolute position of the top left of the textarea, get the line height of the text, multiply by the number of rows down (number of linebreaks in the text), test and tweak a little, and you should be able to get the position of each line in the text area. Then, use jquery to draw a colored div behind the text area for each line of text that is as wide as the textarea and as tall as the line of text. The textarea should be transparent as well.
With a little more work, you can probably even have the zebra striping logic be smart enough to detect if the line of text has wrapped, so that zebra stripe can be 2 or more lines tall.
Might work. Good luck!
One way to accomplish this would be to just use a background in the textarea.
<style type="text/css">
textarea { background-image: url(bg.png); }
</style>
That being said, you'd have to have to play around with the tiling and the line-height to get it just right, but it should be able to accomplish what you're looking for without the use of scripting.
If you wanted to make the actual text different colors, there's no way to do this using a pure <textarea>. You could use a rich text editor such as TinyMCE, but that would be way too overkill in my opinion.