Question

I use jquery, php and html in my web application. I want to add a highlighting facility to allow users to highlight any text by selecting text then press a ‘highlight’ button .. how can I do it ?

<span id="text">
highlighted text
</span>
<button type="submit" name="highlight"></button>

When a user press this button, I wanna highlight any text that was selected, then save changing on text for any user. I’d also like the user to be able to select the highlight color.

Answer 1

This is a long text, maybe your answer, but this did not fit the comment zone;

First, some arguments, in order to help you decide what you should develop, what technologies to use;

jQuery or JavaScript ?

JavaScript, because if you use jQuery, the website from where you want to highlight, may not have jQuery;

Even if there is jQuery, it may be another version, and things will get messy, for you and on the website;

JavaScrpt is a common language, and you can use the Singleton concept;

Bookmarklet or Extension ?

Bookmarklet, because is very easy to inject data in a DOM.

If you develop a extension, thats a lot of work; you would have to develop the extension for Chrome, Mozilla, Internet Exploder as i call it (explorer), safari … and thats a lot of work;

Each browser has its own bugs, methods when extensions are involved, so use bookmarklet;

your app is simple, but there is a lot of code involved;

First, the Bookmarklet its a simple button, so it appears :))

This button, when clicked, it injects data into the DOM;

And this is where the app starts;

Your app will communicate with a server, thru javascript requests, within the webpage that you are viewing;

Also, you will have to attach/detach event listeners, for mouse down for example;

Also, all this highlighter process needs to be started; some parameters may be involved here, in order to know where to set the data in your form, by using unique id’s;

Is this hat you want ?

If yes, i will post code, soon;

And did i mentioned that you have a limitation of aproximatly 2096 characters when using the GEt method ?

And you also have to use JSON.stringify method when passing data from javascript to the server;

this is a tipycal bookmark button that uses javascript:

javascript:(function(){cas=document.createElement('SCRIPT');cas.type='text/javascript';cas.src=(window.location.protocol)+'<?= str_replace('http:', '', Yii::app()->createAbsoluteUrl('/api/v1/GetBookmarklet', array(), 'http')); ?>?version=<?= Yii::app()->getModule('api')->params['button_version']; ?>&url='+encodeURIComponent(location.href)+'&userAgent='+(JSON.stringify(navigator.userAgent))+((document.doctype)?('&doctype='+(document.doctype.name)):'')+'&x='+(Math.random());document.getElementsByTagName('head')[0].appendChild(cas);})();

i used Yii MCV to generate this button, so ignore stuff with Yii…

my bookmarklet code is to big, but this is a short short version:
ps: this code does not work, because it is partial, its just for you to see what you want to do, and how its done; this is just the js part, the php part, where you catch and process the data, its up to you

<?php if (false) { ?><script><?php } ?>
    var Bookmarklet = Bookmarklet ? Bookmarklet : function(){

        var assetsURL = 'images and others url/ 3rd party url';
    var apiURL = 'server url';

    var imgsList = new Array();
    var ImgsListImgID = 0;
    //all the images found on the webpage
    var images = 0;
    var imgsListHeightWidth = [];
        var isHighlighting = false;

    var versionStatus;

        var flag1 = false;
        var flag2 = false;

        var precedentObj = null;

        var overlay,
        current,
        handler;

        var extractHL;
        var name=false,price=false,image=false;

    //do we save logs ?
    var consoleLog = true;

    var version_popup;

        var f  = function ()
        {

            var script = document.createElement("script");
            script.type = 'text/javascript';
            script.src = assetsURL+'/sizzle.js';
            var header = document.getElementsByTagName("head");
            header[0].appendChild(script);

            var popupdividreset = "reset";
            var DOCreset = document.getElementById(popupdividreset);

            if(DOCreset != null){
                return false;
            }

            var popupdivid = "details";
            var DOC = document.getElementById(popupdivid);

            if(DOC != null){
                return false;
            }

            //load css file, force a reload/recache
            addCSS(assetsURL+'/style.css?x=<?= $this->module->params['interface_version']; ?>');

            var divreset = document.createElement("div");
            divreset.id = popupdividreset;

            var div = document.createElement("div");
            div.id = popupdivid;

            //this will highlight the DOM element that you are hovering
            var divhighlight = document.createElement("div");
            divhighlight.id = "overlayhighlight";

            var divOutside = document.createElement("div");
            divOutside.id = "Overlay";

            var str = '<div id="divempty"></div>';

            str += divForm( 'none', div.id, images );              
            str += divLogin( 'none', div.id);            
            str += divDetails( 'none', div.id);
            str += divSuccess( 'none', div.id);
            str += divBroken( 'none', div.id);

            div.innerHTML = str;
            divreset.appendChild(div);
            document.body.insertBefore(divreset, document.body.firstChild);

            divOutside.innerHTML = "";
            document.body.insertBefore(divOutside, document.body.firstChild);

            //inserting the DOM div blank element imediatly after body tag
            divhighlight.innerHTML = "";
            document.body.insertBefore(divhighlight, document.body.firstChild);


            };

            function addCSS(url){
                var headID = document.getElementsByTagName("head")[0];
                var cssNode = document.createElement('link');
                cssNode.type = 'text/css';
                cssNode.rel = 'stylesheet';
                cssNode.href = url;
                cssNode.media = 'screen';
                headID.appendChild(cssNode);
            };





            function divForm( displayTarget, div_id, images )
            {

                return '<?php $this->renderHTMLtoJS('form', array('js' => array('displayTarget', 'div_id', 'images', 'assetsURL'), 'product' => $product, 'follower' => $follower)); ?>';

            };

            function createElementScript(src)
            {

                var script = document.createElement("script");
                script.type = 'text/javascript';
                script.src = src;
                //console.log("SRC: "+src);
                var header = document.getElementsByTagName("head");
                header[0].appendChild(script);

            };

            function hideAllDivs() {
                var a = ['ParrentLogin','ParrentDetails','ParrentForm'];
                for (x in a) {
                    var d=document.getElementById(a[x]);
                    if (d) {
                        d.style.display='none';
                    }
                }
            };

            function divGallery( displayTarget, div_id )
            {
                return '<?php $this->renderHTMLtoJS('gallery', array('js' => array('displayTarget', 'div_id', 'assetsURL'))); ?>';

            };

            f.prototype = {



                init : function() {
                            this.showDiv('ParrentForm');
                },

                showDiv: function(divId) {
                    var d=document.getElementById(divId);
                    if (d) {
                        hideAllDivs();
                        d.style.display=document.getElementById("divempty").style.display;
                    }
                },

                actionSubmit : function(formID,e)
                {
                    //alert(formID+'click');
                    if( formID == 1 )Bookmarklet.outBound("login");
                    if( formID == 2 )Bookmarklet.outBound("follow");
                    e.preventDefault();
                },
                toggleItem : function(id){
                    var item = document.getElementById(id);
                    if(item){
                        var parent = item.parentNode;
                        parent.removeChild(item);
                    }
                },
                hideDivs : function(){
                    hideAllDivs();
                },
                //all the data that has been send from the server to the bookmarlet passed thru this method
                //inBound has 2 parameters, because we need to know the action and the result value
                inBound : function(action,data)
                {

                    try {
                        //console.log(data);
                        if (parseInt(data.code) <0 ) {
                            //system error
                            alert('Internal error!');
                            return;
                        }
                        switch(action)
                        {
                            case 'bookmarklet':
                                alert('Bookmarklet error');
                                break;
                            case 'follow':
                                if(data.code!=0)
                                {
                                    document.getElementById('form_error').innerHTML = data.message;
                                }
                                else
                                {
                                    this.showDiv('ParrentSuccess');
                                }
                                break;
                            default:
                                alert('Unknown inBound action: '+action);
                                break;
                        }
                    } catch (err) {
                        if (consoleLog) {
                            //console.log(err.toString());
                        }
                        alert('Something went wrong, server returned invalid message!');
                    }
                },//end f inBound()
                //method used to transfer the data from the bookmarklet to the server
                //outBound needs to know only the action, the parameters will be contructed, ex. : ?action=x&...
                outBound : function(action)
                {
                    try {
                        switch(action)
                        {//start switch
                            case 'follow':
                                    createElementScript(apiURL+"/Follow?input="+encodeURIComponent(s));
                                break;
                            default:
                                alert('Unknown outBound action: '+action);
                                break;
                        }//end switch
                    }
                    catch (err) {
                        if (consoleLog) {
                            //console.log(err.toString());
                        }
                        alert('Something went wrong, couldn\'t prepare data!');
                    }


                }//end f outBound()
            }
            return f;
        }();
        var Bookmarklet = new Bookmarklet();    
        Bookmarklet.init();