How to get the caret coordination in pix on the UI by JS

By W.ZH

The issue of this topic is to want to know the key caret position on the web UI, (not the mouse cursor ). Such as for my example , I have a text area to collect the input text, but I also want to show a piece of context menu at the position of the caret to do something for the text editor. So knowing the exact x and y position of caret is very import to match the text word in the area.

And I found this one should be the best after searching.

https://github.com/component/textarea-caret-position

Here is the example I created:

getCaretCoordinates will give you the top and left px of the caret relative to the textarea itself.  So we just need to find the offset of the parent element of the textArea and then easily caculate out the px position of the caret on a screen.

HTML code side:

111

 

JS code to detect the ctrl+Space key pressed and also find out the caret coordination.  You can replace my menu show part of code ( #mm) by whatever you want to do…

        // crtl+ space keys will show the context menu 
            $('#currArea').keyup(function (event) {
                if (event.keyCode == 32 && event.ctrlKey) {
                    // find the x and y for the caret
                    
                    var element = document.getElementById("currArea");
                    var tagParentOffsets = $('#currAnnoParent').offset();
                    
                    // use a plug to find the top and left 
                    var coordinates = getCaretCoordinates(element, element.selectionEnd, { debug: !true });

                    $('#mm').menu('show', {
                        top:  tagParentOffsets.top + element.offsetTop - element.scrollTop + coordinates.top + 'px',
                        left: tagParentOffsets.left + element.offsetLeft - element.scrollLeft + coordinates.left + 'px'
                    });
                }
            });
Advertisements

How to find two DB difference script in MySQL

By W.Zh

In MySql , it is often you want to find two version of DB to create the script , especially for DB migrate and schema upgrade. Here is the way to use the Workbench to create the SQL file for it:

  1. On the Workbench, Going to model mode(Left bottom corner to create one Model if do not have), only in model mode you can access it.
  2. Menu –> Database -> Synchronize with any source–> Select Database Updates:
    Check : “Source”- Live Database Server
    “Destination”-Live Database Server
    “Send Updates to:” –> Alter Script Files:

    If you just want to save DB diff to sql, not immediately to sync one DB to another DB, such as find schema change between Staging and Dev server . Then remember to select     “Send Updates to:”, instead of directly sync to target DB.

  3. Then after first step. just follow the wizard to step by step to get your diff files.