in reply to Re^7: Position on Web Page
in thread Position on Web Page

Something like the following will do the trick.

The code is nasty hack, and is definitely not cross-browser compatible... it should, however, give you an idea of how to implement this in general.

-David.

Working (firefox only) example.

  <html>
    <head>
      <script type="text/javascript">
  
        // attach the event handler 'fn' to the node 'obj'
        // so that it fires when event 'type' occurs.
        function addEvent( obj, type, fn ) {
          if ( obj.attachEvent ) { 
            obj['e'+type+fn] = fn; 
            obj[type+fn] = function(){
              obj['e'+type+fn]( window.event );
            };
            obj.attachEvent( 'on'+type, obj[type+fn] );
          } else
            obj.addEventListener( type, fn, false );
        }
  
        {
          var setupDone = false;
          var pointer, textnode;
          var offsets = {left: 0, top: 0};
          var lock = 0;
  
          // starting at node n, find a text (nodeType == 3) node 
          // whose nodeValue matches re
          var matching_textnodes = function(n,re) {
            if (!n) n = document.body;
            var subs, nodes = [];
            for (var c=0; c<n.childNodes.length; c++) {
              if (n.childNodes[c].nodeType == 3) {
                if (re.test(n.childNodes[c].nodeValue)) 
                  nodes.push(n.childNodes[c]);  
              }
              if (n.childNodes[c].nodeType == 1) {
                subs = matching_textnodes(n.childNodes[c], re);
                for (var i=0; i<subs.length; i++) 
                  nodes.push(subs[i]);
              }
            }
            return nodes;
          };
  
          // find text in the page, split it out, wrap in SPAN tag
          var isolate_text = function(text) { 
            try {
              var mnodes = matching_textnodes(
                document.body, new RegExp(text));
              if (mnodes.length < 1) return null;
              var found = mnodes[0];
              var sre = new RegExp('^(.*?)('+text+')(.*)$');
              var matches = sre.exec(found.nodeValue);
              var before = document.createTextNode(matches[1]);
              var after  = document.createTextNode(matches[3]);
              var target = document.createTextNode(matches[2]);
              var wrap   = document.createElement('SPAN');
              wrap.appendChild(target);
              var pnode = found.parentNode;
              pnode.insertBefore(before,found);
              pnode.insertBefore(wrap,found);
              pnode.insertBefore(after,found);
              pnode.removeChild(found);
              return wrap;
            } catch(e) {
              alert('ERROR: '+e);
            }
          };
  
          // get the absolute position of the node obj
          var findPos = function (obj) {
            var curleft = curtop = 0;
            if (obj.offsetParent) {
              curleft = obj.offsetLeft
              curtop = obj.offsetTop
              while (obj = obj.offsetParent) {
                curleft += obj.offsetLeft
                curtop += obj.offsetTop
              }
            }
            return [curleft,curtop];
          };
  
          // get the computed value of style attribute 
          // styleProp for node x
          var getStyle = function(x,styleProp) {
            if (x.currentStyle) 
              var y = x.currentStyle[styleProp];
            else if (window.getComputedStyle) var y = 
              document.defaultView.getComputedStyle(x,null)
                      .getPropertyValue(styleProp);
            return y;
          };
  
          // build the "pointer" HTML, find "FOOBAR" text in 
          // the page, isolate it, compute "pointer" offsets.
          var setupPointer = function() {
            try {
              pointer = document.createElement('DIV');
              var text = document.createTextNode('====>');
              pointer.appendChild(text);
              document.body.appendChild(pointer);
              pointer.style.fontSize = '35px';
              pointer.style.color = 'green';
              pointer.style.fontWeight = 'bold';
              pointer.style.position = 'absolute';
              textnode = isolate_text('FOOBAR');
              offsets.left = 
                parseInt(getStyle(pointer, 'width'), 10);
              offsets.top = 
                (parseInt(getStyle(pointer, 'height'), 10) / 2) - 10;
            } catch(e) {
              alert('ERROR: '+e);
            }
            setupDone = true;
          };
  
          // position the the "pointer" to point to 
          // the "FOOBAR" text node.
          function positionPointer() {
            if (lock == 1) return;
            lock = 1;
            if (!setupDone) setupPointer();
            var pos = findPos(textnode);
            pointer.style.left = pos[0] - offsets.left;
            pointer.style.top  = pos[1] - offsets.top;
            lock = 0;
          }
        }
  
        // RE-COMPUTE POINTER POSITION FOR ALL THESE EVENT-TYPES
        addEvent(window, 'load', positionPointer);
        addEvent(window, 'resize', positionPointer);
        addEvent(window, 'DOMContentLoaded', positionPointer);
  
      </script>
    </head>
    <body>
      <table width="80%">
        <tr>
          <td valign="top" align="left">asdf asdfa asdf asdsd asdfa 
           dfas asdfa sdf asdf asdf asdf asdf asasdf asdfa asdf asasd 
           asdfa dfas asdfa sdf asdf asdf asdf asdf asasdf asdfa asdf 
           asdfsd asdfa dfas asdfa sdf asdf asdf asdf asdf asasdf afa
           asdf asdfasd asdfa dfas asdfa sdf asdf asdf asdf asdf asdf 
           asdfa asdf asdfasd asdfa dfas asdfa sdf asdf asdf adf asdf 
           asasdf asdfa asdf asdfasd asdfa dfas asdfa sdf asdf asdf 
           asdf asdf as
          </td>
          <td valign="top" align="left">asdf asdfa asdf asdfasd 
           asdfa dfas asdfaasdf asdfa asdf asdfasd asdfa dfas asd
           falkj lkjlkjasdflkj lkj asdflkj lkjas FOOBAR asdflkj
           asdlkjsadfk asdfasdf asdfa asdf asdfasd asdfa dfas asdfa
           sdf asdf asdf asdf asdf asadf asdfa asdf asdsd asda dfas
           asdfa sdf asdf asdf asdf asdf asasdf asdfa asdf asdfasd 
           asdfa dfas asdfa sdf asdf asdf asdf asdf asasdf asdfa 
           asdf asdfasd asdfa dfas asdfa sdf asdf asdf asdf asdf 
           asasdf asdfa asdf asdfasd asdfa dfas asdfa sdf asdf asdf
           asdf asdf asasdf asdfa asdf asdfasd asdfa dfas asdfa sdf
           asdf asdf asdf asdf as
          </td>
        </tr>
      </table>
    </body>
  <html>

[download]

Replies are listed 'Best First'.
Re^9: Position on Web Page
by user2000 (Sexton) on Aug 21, 2007 at 17:30 UTC
    Hi, Thankyou for the code you have written. But it may not necessarily be on text only. It could be anywhere on the page. I appreciate all the efforts you are all taking to solve my problem :) Thank you very much for all your reples. Anant
[reply]
      I wrote it to look for text because that's what you said you were having trouble targeting.

      Normally, you can just compute the offsets of a node recursively to find it's position (most cases), but text nodes (nodeType == 3) are computed at page-reflow time and do not contain positioning attributes.

      All I did was to find the text you were looking for, split it apart from the surrounding text and then wrap it in a <span> tag... which has positioning attributes and so can be tracked as per any other node.

      No single method of searching/targeting the page content will work for everything, so you need to understand the types of content you will be serving and then adapt your "pointer" targeting correspondingly.

      Basically, my goal was to help you understand the nature of the problem, and a reasonable approach to its solution... but you will definitely need to work on it yourself (possibly do some reading about javascript and DOM) before anyone can help you more.

      I can help you with your version of the code if you like... but this thread is a little long and off-topic, so perhaps the CB and your public scratchpad might be better venues ?

      -David

[reply]
[d/l]

In Section Seekers of Perl Wisdom