Forked from: SorAmber's forked: Connect Twitter - 3 View Diff (1) forked: Connect Twitter - 3 tjoen Follow 2013-05-23 06:36:56 License: MIT License Fork0 Fav0 View1140 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 69 lines HTML 7 lines CSS 11 lines forked: Connect Twitter - 3 jQuery v1.6.2 // forked from SorAmber's "forked: Connect Twitter - 3" http://jsdo.it/SorAmber/bSZU // forked from SorAmber's "forked: Connect Twitter - 2" http://jsdo.it/SorAmber/7XDB // forked from SorAmber's "forked: Connect Twitter" http://jsdo.it/SorAmber/qnFK // forked from SorAmber's "Connect Twitter" http://jsdo.it/SorAmber/1cXW $(document).ready(function() { var cSet = [[168, 54, 0], [204, 98, 54], [250, 198, 80], [248, 238, 189], [130, 155, 49], [148, 205, 125], [67, 142, 168], [126, 186, 220], [33, 100, 190], [103, 101, 172], [165, 127, 203], [238, 190, 214]]; $("#b").click(function(){ var userName = $("#i").val(); if(userName !== "") { var url = 'http://api.twitter.com/1/statuses/user_timeline.json' + '?screen_name=' + userName + "&count=200" + "&callback=?"; if($("#states").html() !== "") { $("#states").html(""); } $.getJSON( url, function(data){ var j = 0; for(var i=0; i<data.length; i++) { var id = data[i].id_str; var text = data[i].text; var date = new Date(data[i].created_at); if (! text.match(/.*@.*/)) { var tweetURL = "http://twitter.com/" + userName + "/status/" + id; var rgbString = "rgb(" + cSet[j % 12][0] +", " + cSet[j % 12][1] +", " + cSet[j % 12][2] +")"; $("#states").append("<a id='" + id + "' href='" + tweetURL + "' target='_blank'></a>"); $("#" + id).append("<div class='tweet'></div>"); $("#" + id + " > .tweet").css("background-color", rgbString); $("#" + id + " > .tweet").css("-moz-box-shadow", "0px 0px 10px" + rgbString); $("#" + id + " > .tweet").css("-webkit-box-shadow", "0px 0px 10px " + rgbString); $("#" + id + " > .tweet").append("<div class='text'>" + text + "</div>"); $("#" + id + " > .tweet").append("<div class='time'>" + date + "</div>"); if(255 * 1.5 < cSet[j % 12][0] + cSet[j % 12][1] + cSet[j % 12][2]) { $("#" + id + " > .tweet > .text").css("color", "#222222"); $("#" + id + " > .tweet > .text").css("text-shadow", "0px 0px 3px #444444"); $("#" + id + " > .tweet > .time").css("color", "#444444"); $("#" + id + " > .tweet > .time").css("text-shadow", "0px 0px 2px #666666"); } else { $("#" + id + " > .tweet > .text").css("color", "#DDDDDD"); $("#" + id + " > .tweet > .text").css("text-shadow", "0px 0px 3px #BBBBBB"); $("#" + id + " > .tweet > .time").css("color", "#BBBBBB"); $("#" + id + " > .tweet > .time").css("text-shadow", "0px 0px 2px #999999"); } j++; } } $(".tweet").hover(function() { $(this).fadeTo("fast", 1.0); }, function() { $(this).fadeTo("fast", 0.5); }); }); } }); }); <div class="form"> <form> <input type="text" size="25" id="i" value="" placeholder="Input Your Twitter's ID"> <input type="button" size="10" id="b" value="GET" > </form> </div> <div id="states"></div> forked: Connect Twitter - 3 body { background-color: #222222; } div.form { background-color: #FFFFFF; margin-top: 10px; right: 10px; padding: 5px 10px 5px 10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; filter: alpha(opacity=80); -moz-opacity: 0.8; opacity: 0.8; position: fixed; z-index: 1; } a { text-decoration: none; } div.tweet { margin: 20px 5% 20px 5%; padding: 15px 20px 15px 20px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; filter: alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; } div.text { font: 16px sans-serif; } div.time { font: 12px sans-serif; text-align: right; } // forked from SorAmber's "forked: Connect Twitter - 3" http://jsdo.it/SorAmber/bSZU // forked from SorAmber's "forked: Connect Twitter - 2" http://jsdo.it/SorAmber/7XDB // forked from SorAmber's "forked: Connect Twitter" http://jsdo.it/SorAmber/qnFK // forked from SorAmber's "Connect Twitter" http://jsdo.it/SorAmber/1cXW $(document).ready(function() { var cSet = [[168, 54, 0], [204, 98, 54], [250, 198, 80], [248, 238, 189], [130, 155, 49], [148, 205, 125], [67, 142, 168], [126, 186, 220], [33, 100, 190], [103, 101, 172], [165, 127, 203], [238, 190, 214]]; $("#b").click(function(){ var userName = $("#i").val(); if(userName !== "") { var url = 'http://api.twitter.com/1/statuses/user_timeline.json' + '?screen_name=' + userName + "&count=200" + "&callback=?"; if($("#states").html() !== "") { $("#states").html(""); } $.getJSON( url, function(data){ var j = 0; for(var i=0; i<data.length; i++) { var id = data[i].id_str; var text = data[i].text; var date = new Date(data[i].created_at); if (! text.match(/.*@.*/)) { var tweetURL = "http://twitter.com/" + userName + "/status/" + id; var rgbString = "rgb(" + cSet[j % 12][0] +", " + cSet[j % 12][1] +", " + cSet[j % 12][2] +")"; $("#states").append("<a id='" + id + "' href='" + tweetURL + "' target='_blank'></a>"); $("#" + id).append("<div class='tweet'></div>"); $("#" + id + " > .tweet").css("background-color", rgbString); $("#" + id + " > .tweet").css("-moz-box-shadow", "0px 0px 10px" + rgbString); $("#" + id + " > .tweet").css("-webkit-box-shadow", "0px 0px 10px " + rgbString); $("#" + id + " > .tweet").append("<div class='text'>" + text + "</div>"); $("#" + id + " > .tweet").append("<div class='time'>" + date + "</div>"); if(255 * 1.5 < cSet[j % 12][0] + cSet[j % 12][1] + cSet[j % 12][2]) { $("#" + id + " > .tweet > .text").css("color", "#222222"); $("#" + id + " > .tweet > .text").css("text-shadow", "0px 0px 3px #444444"); $("#" + id + " > .tweet > .time").css("color", "#444444"); $("#" + id + " > .tweet > .time").css("text-shadow", "0px 0px 2px #666666"); } else { $("#" + id + " > .tweet > .text").css("color", "#DDDDDD"); $("#" + id + " > .tweet > .text").css("text-shadow", "0px 0px 3px #BBBBBB"); $("#" + id + " > .tweet > .time").css("color", "#BBBBBB"); $("#" + id + " > .tweet > .time").css("text-shadow", "0px 0px 2px #999999"); } j++; } } $(".tweet").hover(function() { $(this).fadeTo("fast", 1.0); }, function() { $(this).fadeTo("fast", 0.5); }); }); } }); }); <div class="form"> <form> <input type="text" size="25" id="i" value="" placeholder="Input Your Twitter's ID"> <input type="button" size="10" id="b" value="GET" > </form> </div> <div id="states"></div> body { background-color: #222222; } div.form { background-color: #FFFFFF; margin-top: 10px; right: 10px; padding: 5px 10px 5px 10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; filter: alpha(opacity=80); -moz-opacity: 0.8; opacity: 0.8; position: fixed; z-index: 1; } a { text-decoration: none; } div.tweet { margin: 20px 5% 20px 5%; padding: 15px 20px 15px 20px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; filter: alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; } div.text { font: 16px sans-serif; } div.time { font: 12px sans-serif; text-align: right; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author tjoen Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/p506/js"></script> html5_elements&api JQuery library&test Twitter Discussion Questions on this code? Tags JQuery Twitter html5_elements&api library&test
