Make a div follow caret position in a textarea? - javascript

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

Related

Is there a way to make text overflow while in javascript or p5.js?

I'm trying to make text overflow when you resize a window, like pretty much every site does. However, I have zero experience with HTML and CSS, so I only have JavaScript (I'm using the p5 library) to work with. Does anyone know if there's a way for me to do one of two things:
Make the text overflow somehow
Learn HTML and CSS (is there a good tutorial out there?)
Or should I just change it so that a certain window size changes the text manually in the code from "Example Text" to "Example\nText"? Basically, is there some function I should know about, should I do it manually, or is there a good tutorial for beginner to advanced HTML/CSS? I realize that I'm basically asking for a tutorial online, but I'm also hoping there's some other way. Help!!! :P
Did you mean Text-wrap which wraps your text content inside the div element?
TLDR; Use word-wrap or overflow-wrap.
Check this out
Also, check out this tutorial from FreeCodeCamp. You can learn pretty much all the basics from their website itself. HTML & Css

Get coordinates / BoundingClientRect of matching string/Range inside of input or textarea element

I'm trying to find away to accurately determine the location of text within a textarea or input HTML element similar to the way GitHub has managed to achieve it with their inline dropdowns (which is also a textarea), but I'm completely stumped at how I might be able to achieve this.
Ideally looking to achieve something that will return a DOMRect object similar to the Range.getBoundingClientRect() method, as I will need the x and y coordinates of the matched text as well as the width and height in order to position the dropdown I want to have in my project.
Using this for a chrome extension I'm working on that will need to be able to run on any input and textarea in order to show a dropdown directly below a '/' character when it is entered. Otherwise I would just be using a div with contenteditable="true" to achieve this.
Any ideas would be greatly appreciated!
I found this text-area-caret repo on GitHub that looks like it should be able to achieve what I want with some small tweaks (will report back with necessary tweaks if there are any, or if it doesn't achieve what I want).

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.

Treeview in ContextMenu

I got this crazy idea trying to display a tree in a context menu. I did a google search and cudnt find anything related. Can this actually be achieved? I know I am not posting in any code, but wanted to get all your guidelines before I start with the coding part of it.
Regards,
Nikhil
Only one work around comes in my mind here. You should first of all disable the default conextmenu. And then you can show your absolutely positioned div which contains a treeview next to the cursor.

jQuery Tooltip Script

I am looking for a straightforward jQuery tooltip script. I have been having troubles finding one that has a fixed position and doesn't move with the user's cursor. If anyone knows of one let me know :) Thanks!
I always use this one here:
http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
It has the option to both follow the cursor AND keep it's position, along with a few other helpful options. The css is also very minimal and therfore easy to change.
See there's this thing here called a search engine...
Okay, okay... I'll be more constructive...
My favorite is qTip 2. It does everything you want it to do. and you don't have to leave money on the table...
I use qTip2 from http://craigsworks.com/projects/qtip2.
By default, it does not move with the cursor. There are a bunch of options and some themes. The best part is that the developer answers all questions in his forum within a day or less.
Also here are some good ones meeting your requirement that it not follow the mouse cursor:
http://plugins.learningjquery.com/cluetip/
http://edgarverle.com/BetterTip/default.cfm
http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
http://labs.dmlogica.com/dmltip/#more-53
http://www.ajaxdaddy.com/javascript-tooltip-jtip.html
http://plugins.jquery.com/project/bt
http://net.tutsplus.com/tutorials/javascript-ajax/build-a-better-tooltip-with-jquery-awesomeness/
http://www.dvq.co.nz/jquery/create-a-jquery-popup-bubble-effect/
http://code.drewwilson.com/entry/tiptip-jquery-plugin
http://css-plus.com/2010/04/create-a-speech-bubble-tooltip-using-css3-and-jquery/
http://gdakram.github.com/JQuery-Tooltip-Plugin/
As a side note, I'd stay away from the tool tip plugin that's part of jQuery Tools by Flowplayer. IMHO, jQ Tools is poorly implemented, out of date and not supported very well by the developer or his community.
100 various solutions on this page (however, some are not jQuery):
http://www.webdesignshock.com/showcase/best-tooltip-scripts-plugins/
The one I always use is: http://tutorialzine.com/2010/07/colortips-jquery-tooltip-plugin/
It's three short CSS lines to customize colors and easy to work with!

Categories