basically, I would like to develop a django based application for a synonym dictionary, where the user can write a paragraph and my application, highlights a set of words in different colors and by clicking on those highlight words, a set of synonym will be shown as a popup box (exactly like gmail spell checker) and by clicking they get replaced by the word.
The main question is from where should I start. Is there any API that can assist me ? Also, I wonder, if such a editable area is still called "textarea" ? What library are already out there to help me me out with coloring and pop-up box or any similar code ?
I appreciate any hint.
Related
As many people have used google translation, I want to create a website like "translate.google.com" based on my own machine translation system. I hope somebody can help me with the following questions since I'm not experienced in web development, .
The input area of google-translate is a textarea . When a user hovers on the target phrase, the corresponding source phrase was highlighted. How can I achieve such effects? Do I need to modify the textarea or use span-like control?
The output area of google-translate seems to be not a textarea. When a user clicks on the target phrase, it triggered an event and make communication with the back-end, then the corresponding translation options are displayed right on the target phrase. I want to make the position of the translation options the same as google-translate, how can I achieve this without refreshing the whole page?
Any comment will be welcome.
I am relatively new to both programming and developing chrome extensions. I am developing a chrome extension that will do this simple thing.
On selecting a text, show a button on clicking which the text will be highlighted. (Somewhat like the pin button)
When i revisit the page I can see what where the areas i highlighted.
So currently I have a extension working which can save the bookmark to the database. This is the link from which i got this understanding http://markashleybell.com/building-a-simple-google-chrome-extension.html. If you want i can share the actual code also but it is going to crowd the question.
I think I can make get the selected text to go in to the database if i use contextmenus. But this is what i intend to do is
select the text
A icon comes up (How do i trigger the jquery to add the button, which chrome api i need to use and in which file i should put the code)
3 On clicking the icon the text gets highlighted. (how should i change the DOM of the current page)
I can do the part of extracting the text and sending it to the Database.
The next problem i have no idea about what information I need to store in the database (Example do i need to store the start or end node) so that i can have the text highlighted when i return to the URl. How does a chrome extension start on its own to figure out what part of the page need to be highlighted.
In case you have a sample code that will be great or just tell me what is the logic and chrome api's i need to use.
I know the question is too broad but even if you have a few links that can help to understand this flow it will be great. The project i am working on it to create a far similar version of https://www.diigo.com/, with just the ability to store URL along with the highlighted notes.
I'm trying to create an editable text field in a page which highlights the edits made by the user to the text as it is being edited. For instance, text inserted or changed by the user should appear against a colored background, deletions should be indicated by adding a colored background to the neighboring characters (or maybe some kind of symbol?)... It seems to be much harder than I thought to do this in Javascript, and I am surprised that I couldn't find any code already implementing such a text field.
Do you know of anything which implements what I'm looking for?
Thanks!
You should have a look at Google's Diff, Match and Patch libraries for Plain Text which are open source and available in JavaScript among other languages.
Diff demo.
Step1->
Store the original value in a variable V1
Step2->
Store the modified value in a variable V2
Step3->
For each word in V2 [word are divided by at least a single space] check it against the V1, if it's not same HIGHLIGHT it with HTML tag !
I need functionality in my web application similar to Gmail's drop-down of suggestions when entering recipient addresses, or Stack Overflow's drop-down when entering tags for in question composition.
In Gmail, there is a text field for the "To:" address. Once you start typing, a drop-down appears with suggestions. If you enter a semi-colon or comma, you can enter another address. Again, once you start typing this address, a drop-down appears with suggestions.
The suggestions are the subset of your address book containing the text you've entered. (E.g. if you typed "jo" then "John" and "Foojoe" would appear as suggestions, but "XYZ" would not.) The matched part of the word is highlighted in bold.
If you press "enter" or use the up and down cursor keys, you can navigate around the drop-down suggestion list.
I could presumably program this myself, however I have the feeling there must be standard solutions out there I could incorporate. However, all I found were solutions where the value of the field led to the suggestions, and not the value of the current part of the field led to the suggestions (where each part was separated by a separator, for example "," or ";" in the case of Gmail, or space in the case of Stack Overflow tags).
I am using Wicket (Java server-side Web framework) so any Wicket-specific solution would be great, but otherwise I'm sure I can incorporate any plain Javascript library in the project.
jQueryUI's autocomplete is a great plugin.
http://jqueryui.com/demos/autocomplete/#multiple
The link is to the "multiple values" example which is almost word for word what you described; it matches partial words from the middle, it allows key-based navigation, multiple entries.
You can use the AutoCompleteTextField class in wicket-extensions for this.
Wicket Examples provides a sample implementation as the first item in its AJAX section. The source code link is kind of hard to see, it's at the right edge of the gray bar.
(The description even says "like google suggest!")
There are some JQuery plugins for that out there, for example:
FCBKcomplete
Tokenizing Autocomplete Text Entry
There is a AutoComplete Component in the Wicketstuff project. There is an Blog on how to use it.
I would like to add to my site a on-hover/on-select dictionary. What are they usually called, so I can search on the web?
I am thinking in a piece of javascript code that detects which word the mouse is currently hovering/selecting and after some time it shows a baloon with the hovered word definition.
Using onMouseover for this could be very annoying to your users. The NYTimes website uses the selected text (highlighted by double-clicking a word or dragging to select) to display a bubble that, when clicked, opens a popup with a query on that word or term.
See http://graphics8.nytimes.com/js/common/screen/altClickToSearch.js.
Are you thinking of tooltips that display the definition? You can achieve this with a style sheet by adding alt tags and adding a style="cursor:help" attribute.
Alternatively you could use a tooltip library like these jQuery ones.