i have text. on select, div appear has multiple colors. on click of blue div or first color div, text should highlight text highlighted. works if remove conditional if statement #blue_box. think click element removing selection of text before program can retrieve text. how can keep click element, track selection?
$("#actual_verse").mouseup(function() { var text = ""; if (window.getselection) { text = window.getselection().tostring(); } else if (document.selection && document.selection.type != "control") { text = document.selection.createrange().text; } if (/\s/.test(text)) { $("#blue_box").click(function() { var range = document.getselection().getrangeat(0); var contents = range.extractcontents(); var node = document.createelement('span'); node.style.backgroundcolor = "yellow"; node.appendchild(contents); range.insertnode(node); }); // tool tip var ele = document.getelementbyid('tooltip'); var sel = window.getselection(); var rel1 = document.createrange(); rel1.selectnode(document.getelementbyid('cal1')); var rel2 = document.createrange(); rel2.selectnode(document.getelementbyid('cal2')); window.addeventlistener('mouseup', function() { if (!sel.iscollapsed) { var r = sel.getrangeat(0).getboundingclientrect(); var rb1 = rel1.getboundingclientrect(); var rb2 = rel2.getboundingclientrect(); //this place ele below selection ele.style.top = (r.bottom - rb2.top) * 100 / (rb1.top - rb2.top) + 'px'; //this align right edges ele.style.left = (r.left - rb2.left) * 100 / (rb1.left - rb2.left) + 'px'; //code set content ele.style.display = 'block'; } }); // end of tool tip } });/* tool kit */ #tooltip { position: absolute; display: none; border: grey solid 1px; background: #373737; padding: 5px; border-radius: 3px; } #cal1 { position: absolute; height: 0px; width: 0px; top: 100px; left: 100px; overflow: none; z-index: -100; } #cal2 { position: absolute; height: 0px; width: 0px; top: 0; left: 0; overflow: none; z-index: -100; } .boxes { width: 15px; height: 15px; cursor: pointer; display: inline-block; margin-right: 2px; position: relative; top: 3px; } #blue_box { background: #aaf6ff; } #green_box { background: #d6ffaa; } #orange_box { background: #ffbf98; } #purple_box { background: #d7d5fc; } #red_box { background: #ff9b9f; } #yellow_box { background: #fff8aa; } .highlight { background: yellow; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span id='actual_verse' class='context'> hello there! </span> <div id='cal1'> </div> <div id='cal2'> </div> <div id='tooltip'> <div id='blue_box' class='boxes' title='blue'></div> <div id='green_box' class='boxes' title='green'></div> <div id='orange_box' class='boxes' title='orange'></div> <div id='purple_box' class='boxes' title='purple'></div> <div id='red_box' class='boxes' title='red'></div> </div> <br> <br>
i believe following changes accomplish desire.
changes:
- moved
$("#blue_box").click(function(){}out of#actual_versemouseupevent handler. adding yet click handler blue box every time theremouseupevent on#actual_verse. should added once. alternately, can define function in global scope , name it. can add , remove multiple times. - add
mousedownhandler on#tooltipcallsevent.preventdefalut().mousedownevent 1 clears selection. happens before click event, time getting click handler there no selection. - add
selection.removeallranges();end ofblue_boxclickhandler clear selection show highlight. i'm assuming desirable. me user, expect happen. - create
hidetooltip(), add end ofblue_boxevent handler. user, expect tooltip disappear once have made click. - remove
window.addeventlistener('mouseup',leave code executing. i'm not sure why codewindowmouseuphandler. being added event listener resulted in yet copy of handler added every time#actual_versemouseupevent handler executed, happeningblue_boxclickhandler.
$("#tooltip").mousedown(function(event) { event.preventdefault(); }); //only add listener once, not listener each mouseup $("#blue_box").click(function() { var selection = document.getselection(); var range = selection.getrangeat(0); var contents = range.extractcontents(); var node = document.createelement('span'); node.style.backgroundcolor = "yellow"; node.appendchild(contents); range.insertnode(node); selection.removeallranges(); //clear selection, showing highlight hidetooltip(); }); function hidetooltip() { document.getelementbyid('tooltip').style.display = ''; //hide tooltip } $("#actual_verse").mouseup(function() { var text = ""; if (window.getselection) { text = window.getselection().tostring(); } else if (document.selection && document.selection.type != "control") { text = document.selection.createrange().text; } if (/\s/.test(text)) { // tool tip var ele = document.getelementbyid('tooltip'); var sel = window.getselection(); var rel1 = document.createrange(); rel1.selectnode(document.getelementbyid('cal1')); var rel2 = document.createrange(); rel2.selectnode(document.getelementbyid('cal2')); if (!sel.iscollapsed) { var r = sel.getrangeat(0).getboundingclientrect(); var rb1 = rel1.getboundingclientrect(); var rb2 = rel2.getboundingclientrect(); //this place ele below selection ele.style.top = (r.bottom - rb2.top) * 100 / (rb1.top - rb2.top) + 'px'; //this align right edges ele.style.left = (r.left - rb2.left) * 100 / (rb1.left - rb2.left) + 'px'; //code set content ele.style.display = 'block'; } // end of tool tip } });/* tool kit */ #tooltip { position: absolute; display: none; border: grey solid 1px; background: #373737; padding: 5px; border-radius: 3px; } #cal1 { position: absolute; height: 0px; width: 0px; top: 100px; left: 100px; overflow: none; z-index: -100; } #cal2 { position: absolute; height: 0px; width: 0px; top: 0; left: 0; overflow: none; z-index: -100; } .boxes { width: 15px; height: 15px; cursor: pointer; display: inline-block; margin-right: 2px; position: relative; top: 3px; } #blue_box { background: #aaf6ff; } #green_box { background: #d6ffaa; } #orange_box { background: #ffbf98; } #purple_box { background: #d7d5fc; } #red_box { background: #ff9b9f; } #yellow_box { background: #fff8aa; } .highlight { background: yellow; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span id='actual_verse' class='context'> hello there! </span> <div id='cal1'> </div> <div id='cal2'> </div> <div id='tooltip'> <div id='blue_box' class='boxes' title='blue'></div> <div id='green_box' class='boxes' title='green'></div> <div id='orange_box' class='boxes' title='orange'></div> <div id='purple_box' class='boxes' title='purple'></div> <div id='red_box' class='boxes' title='red'></div> </div> <br> <br>
Comments
Post a Comment