Fun with screen-scraping HTML5 w/YQL & rendering XML w/jQuery

by deanpeters

HTML

<script src="https://raw.github.com/josefvanniekerk/jQuery-xml2json/master/js/xml2json.js"></script>
<h2>Fun with screen-scraping HTML5 w/YQL &amp; rendering XML w/jQuery</h2>
<p>Depending on your IP, this may or may-not work (Yahoo! blocking, etc ... )</p>
<!-- content area for story page  -->
        <div data-role="page" id="story">
        
            <div data-role="header"> 
                <h1>Story Page</h1>
            </div><!-- /header -->
        
            <div data-role="content" id="storyContent">    
            </div><!-- /content -->
            
            <div data-role="footer" data-theme="d">
                <h4>Page Footer</h4>
            </div><!-- /footer -->
        </div><!-- /page #story -->   

<script type="text/javascript">
  var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-442503-9']);
    _gaq.push(['_setDomainName', 'deanpeters.com']);
    _gaq.push(['_setCampNameKey', 'jsfiddle']);    
    _gaq.push(['_setCampMediumKey', navigator.userAgent ]);
    _gaq.push(['_setCampSourceKey', 'internet']);   
    _gaq.push(['_setCampTermKey', 'javascript']);       
    _gaq.push(['_setCampContentKey', document.title ]);
    _gaq.push(['_trackPageview']);

     (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
    
</script>

CSS

p { display:block; margin: 10px; }

JavaScript

(function($){
    if(!$.Feeds){
        $.Feeds = new Object();
    };
    
    $.Feeds.RenderStory = function(el, options){
        // To avoid scope issues, use 'base' instead of 'this'
        // to reference this class from internal events and functions.
        var base = this;
        
        // Access to jQuery and DOM versions of element
        base.$el = $(el);
        base.el = el;
        
        // Add a reverse reference to the DOM object
        base.$el.data("Feeds.RenderStory", base);
        
        base.init = function(){
            base.options = $.extend({},$.Feeds.RenderStory.defaultOptions, options);
            
            // Put your initialization code here
            base.renderStory();
        };
        
        // Sample Function, Uncomment to use
        // base.functionName = function(paramaters){
        // 
        // };
        base.renderStory = function(url) {
            url = (url || base.options.url || base.defaultOptions.url);
          
            // figure out what to do on fail
            $.when( base.getStory(url)).then(function( xml ){ 
                    title = $(xml).find("query results div h1");
                    paragraphs = $(xml).find("query results div p");
                    images = $(xml).find("query results img");
                    var img = $("");
                
                    if( images && images[0]) {
                        imgSrc = $(images[0]).attr("style").replace("background-image:url('", "").replace("');", "");
                        img = $('<img src="' + imgSrc + '" />');
                    }
                    console.log("title =>", title);
                    $(base.el).append(title).append(img).append(paragraphs);
            });

        };
            
        base.getStory = function(url) {
            url = (url || base.options.url || base.defaultOptions.url);

            return $.ajax({
                type: "GET",
                url: base.getQuery(myUri),
    ...