Home/ Questions/Q 3672712
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-19T02:38:34+00:00

I’m using jQuery and Lettering.js to wrap each letter in an <h1> with a

  • 0

I’m using jQuery and Lettering.js to wrap each letter in an <h1> with a span and give it a unique ID. I’ve also set contenteditable=true on the <h1> so when I click on it I can edit the text. How would I select the <span> element that is either to the left or right of the cursor, so I could apply styling to it?

Here’s my code

<head>

    <style media="screen" type="text/css">
        body {text-align: center}
    </style>

    <script src="scripts/jquery.js" type="text/javascript" charset="utf-8"></script>
    <script src="scripts/lettering.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript" charset="utf-8">
        $(document).ready(function(){
             $("h1").lettering();
         });
    </script>

</head>

<body>

<h1 contenteditable="true" >Click me!</h1>

</body>

Would really appreciate any help or advice!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The following will work in all major browsers:

    function getCaretContainerElement() {
    if (typeof window.getSelection != "undefined") {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            var container = sel.getRangeAt(0).commonAncestorContainer;
            return container.nodeType == 1 ? container : container.parentNode;
        }
    } else if (typeof document.selection != "undefined" &&
               document.selection.type != "Control") {
        return document.selection.createRange().parentElement();
    }
    return null;
}

var h1 = document.getElementById("foo");

h1.onkeyup = h1.onmouseup = function() {
    var caretContainerEl = getCaretContainerElement();
    if (caretContainerEl) {
        // Do stuff here
        alert(caretContainerEl.id);
    }
};

    Here’s a live example: http://jsfiddle.net/BATGH/1/

    • 0