jQuery.boxFx test case : Stream Twitter w/ JSONP

More infos : https://github.com/molokoloco/jQuery.boxFx

by erick

HTML

<script src="https://raw.github.com/molokoloco/jQuery.boxFx/master/js/modernizr.min.js"></script>
<script src="https://raw.github.com/molokoloco/jQuery.boxFx/master/js/jquery.boxFx.tools.js"></script>
<script src="https://raw.github.com/molokoloco/jQuery.boxFx/master/js/jquery.boxFx.js"></script>
<div id="boxFxZone1">
    <!--// Here come the Seeds //-->
</div>

<p style="text-align:center">
    <a href="javascript:void(0);" id="start">Start</a> |
    <a href="javascript:void(0);" id="stop">Stop</a> |
    <a href="javascript:void(0);" id="reset" title="Clear elements cache">Reset</a> 
    [<a href="https://github.com/molokoloco/jQuery.boxFx">Code on Github</a>]
</p>

CSS

* {
    font:11px trebuchet,verdana;
    color:white;
}

body {
    background:#666666;
}

#boxFxZone1 {
    position:relative; /* particule seeds childs are abs. positionned inside */
    width:500px;
    height:500px;
    background:#333333; /* Solid color for perfs */
    border:1px solid black;
    outline:1px solid grey;
    overflow:hidden; /* Crop particule visibility inside box ? */
    margin: 25px auto; /* centered in our page div */
}

#boxFxZone1 > div {
    position:absolute;
    width:300px;
    height:60;
    color:orange;
    background:yellow;
    padding: 5px;
}

#boxFxZone1 > div:hover {
    -webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    -ms-animation-play-state:paused;
    -o-animation-play-state:paused;
        animation-play-state:paused;
    cursor:wait;
}

#boxFxZone1 a {
    color:orange;
}

#boxFxZone1 img {
    float:right;
    border:1px solid white;
    width:48px;
    height:48px;
} WebRep

JavaScript

$(document).ready(function(){ // PAGE DOM READY, CUSTOM SCRIPT EXAMPLE
    
    ///////////////////////////////////////////////////////////////////////////////
    // Data for filling the template is provided by a function with asynchronous JSONP inside
    // Ex. : http://jsfiddle.net/molokoloco/Ebc27/ - http://stackoverflow.com/q/8190016/174449
    ///////////////////////////////////////////////////////////////////////////////
    
    var twitsObj = null,
        twitsCurrent = 0,
        jsonReq = null,
        reqQueue = [];
    
    // I want each call to "streamNewTweet()" to give back a new tweet...
    var streamNewTweet = function(_self) { // Plugin inject 'self' context when calling streamNewTweet(), must give it back
        // db('streamNewTweet', _self, twitsCurrent);
        var dfd = $.Deferred(); // http://api.jquery.com/category/deferred-object/
        if (!jsonReq) { // Let's do our first request
            jsonReq = $.ajax({
                //cache: false,
                dataType: 'jsonp',
                url: 'http://search.twitter.com/search.json', // Here our distant webservice
                data: {q: 'html5'},
                success: function(data) {
                    twitsObj = $.map(data.results, function(obj) { // Map all tweets to 'options.seeds' {template}
                        var tweet = obj.text;
                        tweet = tweet.replace(/((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi,'<a href="$1">$1</a>');
                        tweet = tweet.replace(/(^|\s)#(\w+)/g,'$1<a href="http://search.twitter.com/search?q=%23$2">#$2</a>');
                        tweet = tweet.replace(/(^|\s)@(\w+)/g,'$1<a href="http://twitter.com/$2">@$2</a>');
                        return {
                            username: obj.from_user,
                            tweet: tweet,
                            avatar: obj.profile_image_url
                        };
                    });
       ...