Fabric js textbox wrap a long word - javascript

I am using a customized textbox which should maintain the same width for a textbox while splitting a long word into a new line (I have modified the solution initially proposed by one of the library's maintainers). You can find the code in the following link.
The _wrapLine function is overridden.
https://jsfiddle.net/njofce/0qfb3snm/
The problem is, when the word is too long, it splits into lines, but the cursor is not correctly positioned.
Any ideas to fix this?
Thanks in advance

Related

Avoid visual movement of word when showing sentence dynamicaly

On cocos creator, I want to show the dialog, in a way like Typed.js. Basically showing the letters as if someone is typing them.
The problem is that I have a Label of a determined width, and, when there is a word near the end of the size of the Label, it starts writing on a line, and finishes writing on another line.
I would like that word to start writing it at the start of the next line, but I don't know how to do it.
The thing that I have tried:
RichText for Cocos creator, to make the part of the sentence that stills needs to be written transparent, but RichText on cocos creator cannot be transparent.
Try to write the word before rendering it, and then check the size of the Label, to see if the dimension has changed, so I will have to set the last word on a new line, but the Label size is not updated until rendered, and I want it before rendering.
Any idea on how to accomplish this?
found a solution, and it's to first put all the words on the scene, without showing them, and then calculate the size of every word, then, calculate at witch word the sentence would break, and add a line break before that word. I don't know if it's the most optimized approach, but it works and I don't know any other way to do it.

Make a div follow caret position in a textarea?

JSBin here: http://jsbin.com/cusisidoja/1/edit?html,js,output
I'm trying to POC a context menu that will pop up given certain keywords are entered in a textarea element. The idea is to implement functionality similar to the way code completion drop-downs work in an IDE.
I realize the scope of this project so the details of the keywords and menu contents aren't important right now. What I'm trying to figure out is how to locate the caret position as the user is typing.
So stepping back and breaking the problem down into its most fundamental component:
How can I get the caret position of a textarea in terms of x,y coordinates that are meaningful to CSS styling?
I threw together a JSBin with (what I believe to be) a decent shell for watching/updating the scope of a div when text is changed in the textarea: http://jsbin.com/cusisidoja/1/edit?html,js,output
I know this is a far cry from what I'm trying to do, but it's as far as I can get given what I currently understand. I'm also open to the possibility that the only way to accomplish this would be either through external libraries or by use of jQuery, but I don't even know where to begin.
Simplest answer is using caret.js : http://ichord.github.io/Caret.js/
simple as :
$('#inputor').caret('position');
full documentation can be found on Github:
https://github.com/ichord/Caret.js

Column Selection in text area

Does anybody know how to enable column selection in a textarea.
I have absolutely no idea how after hours of searching google.
Very new to javascript, html and css.
I would like to make it so you could just highlight the c's below and not the a's or b's and perform functions such as copy and paste, exactly the same way that column selection works in notepad++ but replacing the text selection done normally, rather than having to hold down alt. I am using monospaced typing.
bab
bcb
bcb
bcb
bab
Any help at all even just pointing me in the right direction would be greatly appreciated, thankyou
Ace editor accomplishes this using multiple cursors. (Click here to see the demo and hold Alt while selecting.) It's not trivial to implement, but it is close to trivial to add the Ace editor to your site.
You can see the pull-request that added this feature with interesting bits here, here, here, and here. Overall looks to be about 1000 lines of code for that feature.

change First letter of word font size with javascript/jquery

Is there a way to select the first letter of each word with either javascript or jQuery?
Im trying to make tags on my page have the first letter of each word be a bigger font size. Im assuming it involves regular expressions but all i keep finding are things for form validation. I also see a bunch of stuff for capitalizing the first word. I'm trying to change the font size.
Does anyone know if this can be done and how? Thanks.
If you are just looking for a styling change, you might be able to get away with pure CSS using :first-letter.
Here's an example: http://jsfiddle.net/bgNP3/1/
Note: I apparently had to make the spans into inline-blocks for the effect to work.
Update fixed link to jsfiddle.
You could try using:
letteringjs its may be a little more complex than what you need tho, or
you could use this Is there any clean CSS method to make each
letter in a word a different color?

two scrollable textareas

How i can i have two text areas next to each other with the same number of lines; where when i scroll the first the second will move along as well and vice versa.
This will be used for the idea of having line numbers or any other string before the text area. Of course the only way around this is via javascripts.
Please try to use the approach described in the Synchronize Scrolling of Two TextArea or Multiline ASP.NET TextBoxes using jQuery article to accomplish this task.

Categories