Skip to content Skip to sidebar Skip to footer

Why Does This Highlighter Not Always Work?

Why is my highlighter so buggy? To start, select the text and then choose one of the colors to make the selection bold. But, sometimes it doesn't do it and sometimes it does. Also,

Solution 1:

A very interesting problem. Try use Rangy. Download zip file from Git. Be careful with messing up with Range and Selection on your own before calling MyHighlight.toggleSelection() (when calling it, make sure the selection is visible in the browser).

Here is simplified version (changes made to "script" tags, also "*.highlight" style is added).

<!DOCTYPE HTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><title></title><scriptsrc="https://code.jquery.com/jquery-1.11.3.js"></script><scripttype="text/javascript"src="rangy-master/external/log4javascript.js"></script><scripttype="text/javascript"src="rangy-master/src/core/core.js"></script><scripttype="text/javascript"src="rangy-master/src/core/dom.js"></script><scripttype="text/javascript"src="rangy-master/src/core/domrange.js"></script><scripttype="text/javascript"src="rangy-master/src/core/wrappedrange.js"></script><scripttype="text/javascript"src="rangy-master/src/core/wrappedselection.js"></script><scripttype="text/javascript"src="rangy-master/src/modules/rangy-classapplier.js"></script><scripttype="text/javascript">varMyHighlight;

    rangy.addInitListener(function(rangy) {
        MyHighlight = rangy.createClassApplier("highlight", true);
    });

    $( document ).ready(function() {


            $(".boxes").mousedown(function() {
                    MyHighlight.toggleSelection();
                    document.getElementById('tooltip').style.display = 'none';

            });

            $("#actual_verse").mouseup(function() {


                        var ele = document.getElementById('tooltip');
                        ele.style.display = 'block';


      });



    });





</script><style>/* 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;
    }

        /* 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 {
        font-weight: bold;
        background-color:#ff0000;
    }


</style></head><body><spanid='actual_verse'> Hello There Good Day Sam Was Here Hello There Good Day Sam Was Here Hello There Good Day Sam Was Here Hello There Good Day Sam Was Here Hello There Good Day Sam Was Here Hello There Good Day Sam Was Here Hello There Good Day Sam Was Here </span><divid='cal1'>&nbsp;</div><divid='cal2'>&nbsp;</div><divid='tooltip'><divid='blue_box'class='boxes'title='Blue'></div><divid='green_box'class='boxes'title='Green'></div><divid='orange_box'class='boxes'title='Orange'></div><divid='purple_box'class='boxes'title='Purple'></div><divid='red_box'class='boxes'title='Red'></div></div><br><br></body></html>

Post a Comment for "Why Does This Highlighter Not Always Work?"