Implicit Folding in TEXTAREA with Javascript

Question

I'd like to be able to create a type of folding in xhtml textareas using Javascript/jQuery. For example, given the following text:

ABC [123] DEF

I'd like to have [123] reduce to [] when the cursor is not over it - i.e. for a cursor |:

ABC [] DEF|
AB|C [] DEF
ABC [|123] DEF
ABC [12|3] DEF

I want the content within the braces to be preserved, of course, when the item is folded in (ie when cursor exits the braces), and restored when it's folded out (cursor enters the braces).

I'd be very much obliged for thoughts on this.

Thank you.

Brian

To get you started, read this SO thread: http://stackoverflow.com/questions/263743/how-to-get-cursor-position-in-textarea — Pointy, Jul 01 '10 at 13:50
Just a note that if you want to do mouseover, unfortunately that approach won't work. It deals with the position of the caret which is only moved on click (or when typing). — Michael Mior, Jul 01 '10 at 13:52
Pointy: that's a decent starting point. I've recently answered a similar question with a solution for getting cursor position in a textarea that properly works with line breaks in IE, something I haven't seen anywhere else: http://stackoverflow.com/questions/3053542/how-to-get-the-start-and-end-points-of-selection-in-text-area/3053640#3053640 — Tim Down, Jul 01 '10 at 14:05
@Pointy, Tim Down: Thanks, that's a helpful reference. I've been using jQuery's FieldSelection plugin, and it is a helpful base. The next step (ie folding) does not seem to have been developed. @Michael Mior: I'm just looking for unfolding based on text cursor movement. — Brian M. Hunt, Jul 02 '10 at 04:45

score 2 · Answer 1 · answered Aug 26 '10 at 21:30

You might want to look at some Rich Text Editors implemented in JavaScript. If you look at the folding as an inline style sort of thing ( css display:none; }, I'm sure you could just add a rule to their syntax highlighting to get the folding to work without much effort.

10 jQuery and non-jQuery RTEs

You could also take a look at Mozilla's bespin Project (http://mozillalabs.com/bespin/). Can't post more links, little new to SO.

score 0 · Answer 2 · answered Aug 28 '10 at 00:03

0

$(function(){
  //Format on load
  $(".folding").html('[]');

  //Wire up load
  $(".folding").mouseover(function(){
    $(this).html('[' + $(this).attr("original") + ']');
  }).mouseout(function(){
    $(this).html('[]');
  });                   
});


<BODY>ABC <span class="folding" original='123'>[123]</span> DEF</BODY>

This should work for you. Not the most eloquent but delivers desired results.

answered Aug 28 '10 at 00:03

jaredmroberts

133
1
6

Thanks for the thoughts. While this allows folding for *mousover* of a **span**. This doesn't solve the *caret* over a section of a **textarea** problem though. – Brian M. Hunt Aug 29 '10 at 20:33

Implicit Folding in TEXTAREA with Javascript

2 Answers2