Twitter API JSONP

by bizamajig

HTML

<div id="tweetFeed"></div>

CSS

#tweetFeed {
    margin: 185px 25px 25px 25px;
    height: -webkit-calc(100% - 155px);
    height: -moz-calc(100% - 155px);
    height: calc(100% - 155px);
    width: -webkit-calc(100% - 50px);
    width: -moz-calc(100% - 50px);
    width: calc(100% - 50px);
    position: relative;
}
.tweetCloud {
    width: -webkit-calc(100% - 8px);
    width: -moz-calc(100% - 8px);
    width: calc(100% - 8px);
    margin: 9px 4px 9px 4px;
    position: relative;
    background: #FFF;
    border: solid 1px;
    border-color: #CCC;
    border-radius: 5px;
    z-index: 4;
}
#tweetArrow {
    height: 10px;
    width: 10px;
    margin: -10px 0px 0px 20px;
    position: absolute;
    /*background: url("http://i.imgur.com/l8M5cyH.png");*/
    z-index: 5;
}
#tweetText {
    width: -webkit-calc(100% - 10px);
    width: -moz-calc(100% - 10px);
    width: calc(100% - 10px);
    margin: 5px;
    font-family:'Droid Sans', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #888;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    -o-user-select: text;
    user-select: text;
}

JavaScript

$(document).ready(function () {

    var k = "http://api.twitter.com/1/statuses/user_timeline.json?screen_name=Twitter&include_rts=1&count=5&jsoncallback=";

    $.ajax({
        dataType: 'jsonp',
        url: k,
        success: function (data) {
            console.log(data);
            $.each(data, function (i, item) {
                $("#tweetFeed").append("<div class='tweetCloud'><div id='tweetArrow'></div><div id='tweetText'>" + item.text + "</div></div>");
            })
        }
    });
});