List Fiddles

Get a list of fiddles for a user using jQuery and the jsFiddle api.

by nate

HTML

<script src="http://stevenlevithan.com/assets/misc/date.format.js"></script>
<ul id="fiddles"></ul>

CSS

#fiddles {
    color: #666;
    font-family: 'Lucida Grande', 'Lucida Sans', 'Lucida Sans Unicode', 'Myriad', Tahoma, Verdana, Arial, sans-serif;
    font-size: 12px;
}

#fiddles li {
    border-bottom: 1px solid #ddd;
    margin: 0;
    opacity: 0.7;
    padding: 1em 0;
}

#fiddles a {
    color: DodgerBlue;
    font-size: 14px;
    text-decoration: none;
}

#fiddles a:hover {
}

#fiddles .title {
    display: block;
}

#fiddles .created {
    color: #999;
    font-size: 10px;
}

JavaScript

// Store a reference to our fiddles container
var $fiddles = $('#fiddles');

$.ajax({
    dataType: 'jsonp',
    url: 'http://jsfiddle.net/api/user/nate/demo/list.json',
    success: function(data) {
        // Use console to inspect incoming data, if you like
        // console.log(data);
        
        // Iterate over each list item
        $(data.list).each(function(i, item) {
            // Create a list item, add title, description, and date created
            // (Use throw-away div pattern with .text().html() pattern to escape html)
            $('<li />', {
                html: '<span class="title"><a href="' + item.url + '">' + $('<div>').text(item.title).html() + '</a></span> <span class="description">' + $('<div>').text(item.description).html() + '</span> <span class="created">' + item.created + '</span>'
            }).appendTo($fiddles);
        });
        
        // Add some simple (and undeniably superfluous) hover effects
        $fiddles.children('li').hover(
            function() {
                $(this).stop().animate({ opacity: 1 }, 'fast');
            },
            function() {
                $(this).stop().animate({ opacity: 0.7 }, 'fast');
            }
        );
    }
});