javascript - How can I position an element next to user text selection? -

I need to set the status of a full position button next to the user's selected text as I like IE8 internal Does the form.

I am compelling a jQuery mouseview event in the document, and getting the selected text, but I am currently in the know of how the actual selection is It is on, without wrapping it in any element, because text can be selected in many elements, and it can mess up the structure if I wrap it.

You can create a marker duration state at the end of the selection, using its coordinates using jQuery Keep your button on those coordinates and remove marker duration.

The following should start with you:

  var markSelection = (function () {var markerTextChar = "\ ufeff"; var markerTextCharEntity = "& amp; #ffff;" ; Var markerEl, marker id = "sel_" + new date (). Match-time () + "_" + Math.rendum () .toString (). Substr (2); var selection al, return function () { Var sel, range; if (document selection & amp;; Document.selection.createRange) {// clone text range and fall category = document.Subtion.Creatorense (). Duplicate (); range.collapse (wrong); // Create an HTML element and create a marker element and make it a rental HTML Paste HTML ('& lt; span id = "' + markerId" style = "position: relative;" & gt; '+ markerTextCharEntity +' ;); Marker EL = Document. GetElementById (marker id);} and if (window.getSelection) {sel = window.getSelection (); if (sel.getRangeAt) {range = sel.getRangeAt (0) .cloneRange ();} Else {// The range is not available in the old webkit category = document. CreateRange (); Range.setStart (sel.anchorNode, sel.anchorOffset); Range .setEnd (sel.focusNode, sel.focusOffset); // handle the case when the selection was selected from the back (at the beginning of the document from the beginning) if (range collapsed! == sel.is collapsed) {range.setStart (sel.focusNode, sel.focusOffset) ; Range .setEnd (sel.anchorNode, sel.anchorOffset); }} Range. Collapse (false); Use the DOM methods that contain a single invisible character in the // marker element and enter it marker Allue = document. CreateElement ("span"); MarkerEl.id = markerId; Marker el.ependbill (document.createTextNode (marker reader)); Range.insertNode (markerEl); } If (markerEl) {// Strong Element is to be placed next to selection if (selection selection) {selectionEl = document.createElement ("div"); SelectionEl.style.border = "Solid Dark 1px"; SelectionEl.style.backgroundColor = "lightgoldenrodyellow"; Selection selector HTML = "& lt; - selection"; SelectionElei.style.status = "full"; Document.body.appendChild (selectionEl); } // Marker EL Status http://www.quirksmode.org/js/findpos.html var obj = markerEl; Var left = 0, top = 0; Do {left = obj.offsetLeft; Top + = obj.offsetTop; } While (obj = obj.offsetParent); // place the button in place // substitute your jQuery stuff in the selection el.style.left = left + "px"; SelectionEl.style.top = top + "px"; MarkerEl.parentNode.removeChild (markerEl); }}; }) ();