iWork Comment Ability, Is this possible to implement using JQUERY

Question

iWork has the ability to highlight text and then tag a comment to that text. The comment then is linked with a line to the highlighted text.

I'm curious if something like this could be implemented in JQUERY. What has me puzzled is: A. How to draw a line and have it update when a user changes the text B. How to highlight text and have it tagged somehow?

Id love to hear your thoughts on if this is even possible with JQUERY and any ideas or plugins to point me in the right direction.

Thanks

Answer 1

Yes, this is not very difficult to accomplish.

First - You need to get the select event

The select event is sent to an element when the user makes a text selection inside it. This event is limited to fields and boxes.

For example, consider the HTML:

<form>
  <input id="target" type="text" value="Hello there" />
</form>
<div id="other">
  Trigger the handler
</div>

The event handler can be bound to the text input:

$('#target').select(function() {
  alert('Handler for .select() called.');
});

SEE: http://api.jquery.com/select/

Second - You need to create a tag

CSS

<style>
body{font-size:12px; font-family:"Trebuchet MS";}
#content1{
border:1px solid #CCCC33;
padding:10px;
margin-top:10px;
width:500px;
}
</style>

(X)HTML

<a href="#" id="click">Something Here</a>
<div class="box">
<div id="content1">

<p><a href="#" id="close">Close</a></p>
</div>
</div>
</body>

As you can see it is a very simple example, but the use of this it just about limitless!

Now for the jQuery code that does all the funky stuff. What I am going to do is Show and Hide the Content1 Div element. For that I created the jQuery code below, have a look then I will go through it.

$(document).ready(function(){

$('#content1').hide();

$('a').click(function(){
$('#content1').show('slow');
});

$('a#close').click(function(){
$('#content1').hide('slow');
})

});

As I mentioned earlier the $(document).ready(function()} is a function that waits until the page is ready to be manipulated before executing the code inside it.

The next line $('#content1').hide(); Hides the Content1 Div to start with. Notice how there is a relationship between jQuery and CSS in that is uses the, ID is this case, but it could use a class in exactly the same manner, as the argument inside the parenthesis.

We then move onto the next section of code that “Shows” the DIV when the linked text is clicked. $('a).click(function(){}); This is calling the “click” function and then invoking the “show” effect on the Content1 Div.

Read the code again and make sure you get a grip on the logic. It took me a little while to get the hang of it as well !!!

Inside that Div that is being Shown and Hidden there is another text link that will Hide the Div.

$('a#close').click(function(){
$('#content1').hide('slow');
})

If you look at this you can see that any “a” (link) element with an ID of “close” will invoke the “hide” Effect on the Content 1 Div.

SEE: http://dreamweaverspot.com/jquery-show-and-hide-a-div/

Third - Draw your line

Download Plugin for jQuery SVG - http://jquery.com/plugins/project/svg

Draw your line

$("#example1").drawLine(0, 0, 220, 45);

SEE: http://www.openstudio.fr/Library-for-simple-drawing-with.html

That's it. Just put it all together to get it how you want it.

Answer 2

Maybe something as simple as a tooltip could be your answer. I have used the qtip plugin in the past, and it has the effects your are looking for.

Take a look at the website:

http://craigsworks.com/projects/qtip/

Using qtip would work perfectly for keeping information floated above the document.

With regard to selecting certain parts of the documents text, Todd has the best method there, and I also found this SO question:

http://stackoverflow.com/questions/985272/jquery-selecting-text-in-an-element-akin-to-highlighting-with-your-mouse

Once you have the text selected I would wrap it in a span with an id, and use the qtip tip as a line (pointing to the span in question). This could be styled on the fly and made any size, as described here:

http://craigsworks.com/projects/qtip/docs/tutorials/#tips

This is an interesting way to use the qtip plugin, I hope some of this information has helped you out.

Marcus.

Answer 3

Todd has basically outlined most everything you need to do here aside from writing the application for you. You need to have two lists in memory; one of comments and one of tags, and a way to associate the two in the DOM (unique ids). I would suggest checking out similar posts on how to move an element relative to the window scroll position. You'll need some way of determining which tags are visible at any given time, and I suspect you can do that with one of the standard jquery position functions; the same is needed for drawing a line between two elements. A simple search yields http://api.jquery.com/position/. Once you've determined which tags are visible, you can then re-populate the comments UI element with the appropriate comments, find their positions, and draw a line from the tagged element to the comment element. If you need to be able to also edit the comments, and you are expecting them to save without a form submit, you're going to need a database, and an ajax call to persist the comments once you're done editing.

If you are talking about a text input field, its going to be a lot harder and I don't think you could do it with any of the standard input elements very easily. I would check out one of the rich text editors out there that may expose some of this functionality (YUI?) and combine it with your plugin.

Answer 4

Regarding draw lines, I made available the code from my own question and answer

How to draw a line between draggable and droppable?

The TAG part seams easy enough when you can work with jQuery Field Selection plugin

hope it helps.