Trending Topics Twitter Client

Get your tweets by locale, and trending topics within. Included is a standard twitter search aswell

by jdrefahl

HTML

<body>
    <div id="wrapper" class="shadow">
        <div id="searchHdr" style="padding: 20px;">
            <input id="query" type="text" value="What's happening?" />
            <input id="submit" type="button" value="Search" />
        </div>
        <div id="localesCont">
             <h2>Trending Locales</h2>

            <ul id="locales"></ul>
        </div>
        <div id="currentTrendsCont">
             <h2>Trending Topics</h2>

             <h3></h3>

            <ul id="currentTrends"></ul>
        </div>
        <div id="tweetsCont">
             <h2>Tweets</h2>

             <h3></h3>

            <div id="tweets"></div>
        </div>
    </div>
</body>

CSS

body {
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #000;
    background-color: #666;
}
#wrapper {
    width:1272px;
    height:566px;
}
#searchHdr {
    background-color: #000;
}
#localesCont {
    background-color: #999;
    height: 500px;
    width: 300px;
    float: left;
    padding-left: 20px;
    margin-bottom: 20px;
    overflow: auto;
}
#currentTrendsCont {
    background-color: #aaa;
    height: 500px;
    width: 400px;
    float: left;
    padding-left: 20px;
    margin-bottom: 20px;
    overflow: auto;
}
#tweetsCont {
    background-color: #ccc;
    height: 500px;
    width: 512px;
    float: left;
    padding-left: 20px;
    margin-bottom: 20px;
    overflow: auto;
}
#locales li, #currentTrends li {
    list-style: none;
}
.shadow {
    -moz-box-shadow: 3px 3px 4px #000;
    -webkit-box-shadow: 3px 3px 4px #000;
    box-shadow: 3px 3px 4px #000;
    /* For IE 8 */
    -ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}

JavaScript

function searchTwitter(query) {
    $.ajax({
        url: 'http://search.twitter.com/search.json?' + jQuery.param(query),
        dataType: 'jsonp',
        success: function (data) {
            var tweets = $('#tweets');
            tweets.html('');
            for (res in data['results']) {
                tweets.append('<div>' + data['results'][res]['from_user'] + ' wrote: <p>' + data['results'][res]['text'] + '</p></div><br />');
            }
        }
    });
}

$(document).ready(function () {

    function getTrendsByID(id) {
        $.ajax({
            url: 'http://api.twitter.com/1/trends/' + id + '.json',
            dataType: 'jsonp',
            success: function (data) {
                $.each(data[0].trends, function (i) {});
            }
        });
    };

    function getLocales() {
        $.ajax({
            url: 'https://api.twitter.com/1/trends/available.json',
            dataType: 'jsonp',
            success: function (data) {
                var locales = $('ul#locales');
                locales.html('');
                $.each(data, function (i) {
                    localeID[i] = data[i].woeid;
                    $('ul#locales').append('<li>' + data[i].name + '</li>');
                });
            }
        });

    };

    function getTrends(id) {
        $.ajax({
            url: 'https://api.twitter.com/1/trends/' + id + '.json',
            dataType: 'jsonp',
            success: function (data) {
                var trends = $('ul#currentTrends');
                trends.html('');
                $.each(data[0].trends, function (i) {
                    $('ul#currentTrends').append('<li>' + data[0].trends[i].name + '</li>');
                });
            }
        });
    };

    // Event Handlers
    $(document).on("click", "#locales li", function () {
        var $this = $(this);
        var localesHdr = $('#currentTrendsCont h3');
        var tweets = $('#tweets');
        var trendsHdr = $('#tweetsCont h3');
       ...