comment on

So, this is a bit tougher than I thought but I'm only giving up early b/c I only had an hour to look at it. I believe the following approach will get you there if you're willing to bang on it and solve the click depth problem. The missing parts aren't hard I think, I just don't know them or have time to figure them out tonight.

First the JS.

NEEDs jquery.js and jquery.dimensions.js
    * http://jquery.com/ - jQuery
    * http://brandonaaron.net/docs/dimensions/ - jQuery Dimensions Plu
+gin 1.1


<script type="text/javascript">
// <![CDATA[
$(document).ready(function() {
  $("*").bind("click",
              function(){
                  var info = $(this).position();
                  info["height"] = $(this).height();
                  info["width"] = $(this).width();
                  info["lineage"] = $(this).parents()
                             .map(function () {
                                   return this.tagName;
                                  })
                             .get().reverse().join(" + ");
                  $.ajax({url:"/cgi/position.pl"
                         ,data:info
                         ,dataType:"json"
                         ,type:"POST"
                         ,success: function(data){
                            $("#tag").append(data.status + " ")
                          }
                        });
               });
});
// ]]>
</script>
[download]

So that buys you the info, something like this for anything clicked is sent up to our Perl script. Called "/cgi/position.pl" here.

height  19
left    199
lineage HTML + BODY + DIV + UL
top     74
width   648
[download]

The problem is two-fold. First it doesn't show which element[0] was which in the lineage. This could be gotten via the jQuery but I can't sling a one liner with it so I left it out. :(

Second, clicks propagate to parents. If you click on a link it will also receive the click for the paragraph the link is in, the div the paragraph is in, the body the div is in, and the html the body is in. I don't know how to solve that but the jQuery list is very friendly, I'm sure someone does.

Then the Perl skeleton.

use strict;
use warnings;
use CGI qw(:standard);
use JSON::XS;

if ( request_method() eq "GET" )
{
    print
        header(-content_type => "text/html; charset=utf-8"),
            "This is not a human readable resource.";
}
elsif ( request_method() eq "POST" )
{
    # Open a file to save the POSTed info here!
    # Perhaps handle errors to return to Ajax.
    print
        header(-content_type => "application/json; charset=utf-8"),
            to_json( { status => "OK" } );
}
[download]

I left out the arg and file handling. They should be pretty trivial.

Sorry I couldn't bat out a closer to finished stub. Good luck.

In reply to Re: Webpage Element Information by Your Mother
in thread Webpage Element Information by artist

Are you posting in the right place? Check out Where do I post X? to know for sure.
Posts may use any of the Perl Monks Approved HTML tags. Currently these include the following:
<code> <a> <b> <big> <blockquote> <br /> <dd> <dl> <dt> <em> <font> <h1> <h2> <h3> <h4> <h5> <h6> <hr /> <i> <li> <nbsp> <ol> <p> <small> <strike> <strong> <sub> <sup> <table> <td> <th> <tr> <tt> <u> <ul>
Snippets of code should be wrapped in <code> tags not <pre> tags. In fact, <pre> tags should generally be avoided. If they must be used, extreme care should be taken to ensure that their contents do not have long lines (<70 chars), in order to prevent horizontal scrolling (and possible janitor intervention).
Want more info? How to link or How to display code and escape characters are good places to start.


We don't bite newbies here... much
	PerlMonks