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.
Related
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
I'm creating something like MySQL cmd and to have complete design, I want to replace insertion point (that blinking line) with underline sing. Any tips?
If you were hoping this would be easy, the bad news is that there simply isn't a quick and simple way to do this -- the text cursor is not something you can just change with a couple of lines of javascript or CSS.
If you really want to do this, you're going to need to write your own entire text input system in javascript -- display the cursor yourself, wait for key presses, print them to the screen, handle anything like word-wrapping manually.... it's a fair bit of work.
Fortunately, others have already done this work and made it available to share, so I suggest your best starting point would be to take a look at some existing examples and see how they've done it.
Here's one I found with a quick bit of googling: http://terminal.jcubic.pl/. There are plenty of others you could try as well though.
Hope that helps.
This is what you need to do.
Make input text field invisible, so usable but invisible.
copy its content
render it to another div.
and and add a custom box or whatever...
Styling text input caret
Hide textfield blinking cursor
How about:
textarea{
cursor:url(underlineimage.png),auto;
}
Replace textarea with whatever element you want the cursor to be changed on. You will need to create a custom image of what you want your cursor to look like.
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.
I want to create an online markdown editor that has limited wysiwyg formatting. If you're familiar with iA Writer, I'm trying to create an editor similar to their desktop version. For the most part it's just a simple text editor, but it does a few snazzy things that I'm trying to duplicate.
Automatically underline/bolds thing in *italics*, **bold**, ***bold italics***
Indents ">" blockquotes
Outdents "#" headers and "-" lists so that the text is left aligned, much like on the old three hole punched line paper you could align the text to the red line and put list numbers to the left of it.
I have a few thoughts about how to go about implementing this but I've run into some concerns with each of them.
Editable iFrame
How do I outdent text or apply a css class to it
The formatting happens automatically, so how would I change the selection of the text, reformat it and then go back to the original selection location
I hear that you can load another page into your editable iFrame to do more advanced features, but I'm not too familiar with that - any good resources?
Pure javavascript
How do I create a blinking cursor in an area because I don't think I'll be able to do this in a input or textarea...
Possibly make every line a div that converts into an input box when I click on it (similar to how the tags box works on the tags box when you ask a question (though doesn't work for inline formatting)
Any suggestions to how I might go about doing something like this?
A good start would be to look at Code Mirror (http://codemirror.net/) whom already provides Markdown Editor and a Strong API.
You should be able to add features and live rendering on top of it.
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!