Beefy Boxes and Bandwidth Generously Provided by pair Networks
No such thing as a small change
 
PerlMonks  

Re: Webpage Element Information

by Your Mother (Bishop)
on Nov 15, 2007 at 03:36 UTC ( #650906=note: print w/replies, xml ) Need Help??


in reply to Webpage Element Information

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>

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

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" } ); }

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.

Replies are listed 'Best First'.
Re^2: Webpage Element Information
by erroneousBollock (Curate) on Nov 15, 2007 at 04:37 UTC
    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.
    The event will only have a single target attribute, so you can always test for equality in the handler. When you do handle the event at the target node, you can stop propagation of the event like so:

    [event].cancelBubble = true; if ([event].stopPropagation) [event].stopPropagation();

    -David

      That's great and works on Safari and FF at least. Amended jQuery block.

      // <![CDATA[ $(document).ready(function() { $("*").bind("click", function(evt){ 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 + " ") } }); evt.cancelBubble = true; // NEW! if (evt.stopPropagation) evt.stopPropagation(); }); }); // ]]>

Log In?
Username:
Password:

What's my password?
Create A New User
Node Status?
node history
Node Type: note [id://650906]
help
Chatterbox?
and the web crawler heard nothing...

How do I use this? | Other CB clients
Other Users?
Others about the Monastery: (7)
As of 2020-08-06 08:06 GMT
Sections?
Information?
Find Nodes?
Leftovers?
    Voting Booth?
    Which rocket would you take to Mars?










    Results (39 votes). Check out past polls.

    Notices?