0

I have the following jQuery excerpt:

Tselector.mouseup = function() {
     var sel =  getSelectionCharOffsetsWithin(document.getElementById("base"));
     //...
}

Everytime when I select text in a div tag with id=base the above function will be triggered when releasing the mouse button. getSelectionCharOffsetsWithin(element) is a method that parses the selection (I need that for further steps).

What I want to do now is to popup a tooltip which shows me options on what I can do with the selection. (For those of you who are familiar with iOS, it's similar to the functionality when I select text in the Web-Browser.)

The problem is that jQuery needs a DOM element to perform operations on. For example when using tipsy:

$('#foo').tipsy();

The tooltip is connected with a div tag that has id=foo.

When triggering the mouseup function, I haven't such an element for my selected text, so that I am not able to connect my selection with the tooltip.

Is there any possibility to call jQuery-functions directly without a connection to a DOM element (eg. connecting the tooltip with the mouse-position)? If not, would it be possible to do a workaround with a temporary DOM element which is being created and connected on my event, but not stored in the HTML-code permanently?

Here is a fiddle to demonstrate this: http://jsfiddle.net/noplacetoh1de/bYNmb/

Thanks for any advice!

noplacetoh1de
  • 219
  • 3
  • 12
  • There has to be an object to connect to, even if it is the document or window. – Kevin B Oct 31 '12 at 15:17
  • Let's say I would like to connect it to my mouse position, is this possible? How would I define this with jQuery? – noplacetoh1de Nov 01 '12 at 08:39
  • The mouse isn't a node or an object, it can't have events bound to it. It simply interacts with the browser, the browser then interprets where the click or move happened and fires off events appropriately. If you want an event to fire every time the mouse button goes from being down to up, bind that event to the document. – Kevin B Nov 01 '12 at 14:05

1 Answers1

0

I think this is possible. Use your sel variable to create a temporary span, first split up the HTML. Using substr() (http://www.w3schools.com/jsref/jsref_substr.asp). Then put a span around your selection. When the selection hides, you should get the innerHTML of the span but it back in it's place using the sel variable again, and then destroy it.

I think this is much easer done in mootools btw. Maybe you can setup a fiddle on which we can continue?

Luigi van der Pal
  • 507
  • 3
  • 12