SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Mar 2008
    Location
    Asheville, NC
    Posts
    183
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    insert element next to each character

    hi, all.

    I'm trying to create a script that will get the position of simple characters on the screen.

    after some research I concluded that the only way is appending a HTML element next to each character and find the position of that element. the script I'm working on adds an element to next to the char and gets it coordinates, then removes the element.

    I'm using ranges to accomplish this, but something is not working (script is optimized for Firefox only).

    I'm getting error 'Index or size is negative or greater than the allowed amount" code: "1'.

    I'm using normalize() to avoid that the node tree is affected by me inserting the HTML elements.

    here is the code, any idea???

    Code JavaScript:
    var numChildren = textDiv.childNodes.length;
     
    for (var i=0; i<numChildren;i++) {
     
    if (textDiv.childNodes[i].nodeType == 3) {
     
    var myNode = textDiv.childNodes[i];
    var numChars = myNode.nodeValue.length;
     
    for (var j=0; j<numChars; j++) {
     
    var range = document.createRange();
     
    range.setStart(myNode, j);
    range.setEnd(myNode, (j+1));
     
    var myKey = document.createElement('key');
    range.insertNode(myKey);
     
     
    // get key back
    var keys = document.getElementsByTagName('key');
    var tempKey = keys[0];
     
    // use key to get char coordinates
    var keyPos = findPos(tempKey);
     
    // save coords
    keyPosX = keyPos[0];
    keyPosY = keyPos[1];
    keyHeight = tempKey.offsetHeight;
     
    // remove node
    textDiv.removeChild(tempKey);
     
    // restore nodes
    textDiv.normalize();
     
    // some housekeeping
    range.detach();
     
    } // for chars
     
    } // if mode is text
     
    } // for each childnode

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Other useful techniques that I've heard about are to surround the character you're interested in with a span element. It may be viable to look at what other people have done with that solution.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Zealot
    Join Date
    Mar 2008
    Location
    Asheville, NC
    Posts
    183
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    Other useful techniques that I've heard about are to surround the character you're interested in with a span element. It may be viable to look at what other people have done with that solution.
    yes, I actually started with that approach, which is definitely the easiest. however for my case it wasn't the best solution.

    I'm kinda counfused though as i have to walk the DOM, adding elements that change the nodes, and then walk it back, normalize() seems like it's not really working...


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •