Beefy Boxes and Bandwidth Generously Provided by pair Networks
Don't ask to ask, just ask

comment on

( #3333=superdoc: print w/replies, xml ) Need Help??

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 * - jQuery * - 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/" ,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/" 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.

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

Use:  <p> text here (a paragraph) </p>
and:  <code> code here </code>
to format your post; it's "PerlMonks-approved HTML":

  • Posts are HTML formatted. Put <p> </p> tags around your paragraphs. Put <code> </code> tags around your code and data!
  • Titles consisting of a single word are discouraged, and in most cases are disallowed outright.
  • Read Where should I post X? if you're not absolutely sure you're posting in the right place.
  • Please read these before you post! —
  • Posts may use any of the Perl Monks Approved HTML tags:
    a, abbr, b, big, blockquote, br, caption, center, col, colgroup, dd, del, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, ins, li, ol, p, pre, readmore, small, span, spoiler, strike, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, wbr
  • You may need to use entities for some characters, as follows. (Exception: Within code tags, you can put the characters literally.)
            For:     Use:
    & &amp;
    < &lt;
    > &gt;
    [ &#91;
    ] &#93;
  • Link using PerlMonks shortcuts! What shortcuts can I use for linking?
  • See Writeup Formatting Tips and other pages linked from there for more info.
  • Log In?

    What's my password?
    Create A New User
    and the web crawler heard nothing...

    How do I use this? | Other CB clients
    Other Users?
    Others making s'mores by the fire in the courtyard of the Monastery: (6)
    As of 2020-08-13 16:24 GMT
    Find Nodes?
      Voting Booth?
      Which rocket would you take to Mars?

      Results (74 votes). Check out past polls.