CDE
CDE
pvdz.ee
pvdz.ee
pvdz.ee
Note: Twitter broke this demo a long time ago. Sorry :)
var cdeAjax, query='CDE'; function getTwitter() { // ajax waiting cdeAjax = CDE.div().bgc('black').c('white').p(3).add( CDE.img('img/twit/ajax-loader_bw.gif', 'Please wait..').vam(), CDE.txt(" Loading data from Twitter.com ...") ).centerFade(); // fetch data CDE.ljs('https://search.twitter.com/search.json?callback=twitterCallback&q='+query); } function twitterCallback(json){ var cde, key, val, outer; // remove ajax warning cdeAjax.fadeDel(false,true,true); cde = CDE.div().id('divTwitter').add( // add stylesheet for popup CDE.css( '#divTwitter { background-color: black; color: white; padding: 5px; }'+ // .bgc('black').c('white').p(5) '#divTwitter #divTop { text-align: center; }'+ // .tac() '#divTwitter #divTop input { border: 1px solid white; text-align: center; width: 75px; background-color: black; }'+ // .sb('white').tac().w(75).bgc('black') '#divTwitter #divContent { text-align: left; }'+ // .tal() '#divTwitter input { color: white; }'+ '#divTwitter a { color: red; }'+ ''), // top. whenever you type in the search box the query gets updated CDE.div().id('divTop').add( CDE.txt("Twitter search for "), CDE.inp('text').val(query).on('keyup', function(evt,key){ query = this.value; if(key == 13) { cde.fadeDel(false,true,true); getTwitter(); } }, 'keyboard'), // this updates the search query whenever you type CDE.txt(" ("), CDE.lnk("search", function(){ cde.fadeDel(false,true,true); getTwitter(); }), CDE.txt(", "), CDE.lnk("close", function(){ cde.fadeDel(false, true, true); }), CDE.txt(")") ) ); // process response if (json && json.results) { // create new div for results outer = CDE.div(); // add all twitter results for (key in json.results) { val = json.results[key]; if (val && 'text' in val) { cde.add(CDE.br()); if (val.from_user) cde.add(CDE.a("@"+val.from_user, 'https://twitter.com/'+val.from_user, true).gc('twit')); // target=blank cde.add(CDE.txt(' '+val.text).gc('twit')); } } // and ... cue tweets cde.add(outer).centerFade(); } }