/ Published in: JavaScript
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
/// <reference path="http://ajax.microsoft.com/ajax/jQuery/jquery-1.3.2.min-vsdoc.js"/> window._emailRegex = /^[a-zA-Z][\w\.-]*[a-zA-Z0-9]@[a-zA-Z0-9][\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]$/i; var currentSearch = false; function clearSearchFlag() { currentSearch = false; } $(function() { //set the incarnate service URL var IncarnateServiceURL = "http://incarnate.visitmix.com/incarnate.svc/"; //list the services you want to use for incarnation //note that you can get the list of services supported by the instance of the incarnate service //you are using by calling incarnate.svc/providers (json) or incarnate.svc/providers.xml var providers = ["Twitter", "MySpace", "Facebook", "Gravatar", "YouTube", "XBoxLive"]; var avatars = []; //index is state variable for paging var index = 0; //global variable for the username to be incarnated var searchTerm; //for jQuery fades var fadeDuration = 300; //listen for focus on the button $("#IncarnateButton").focus(function() { if (currentSearch == true) return; setTimeout("clearSearchFlag();", 1000); currentSearch = true; $("#IncarnateLoader").show(); Incarnate(); }); //listen for click $("#IncarnateButton").click(function() { //focus event fights w/ button click so we need semaphore if (currentSearch == true) return; setTimeout("clearSearchFlag();", 1000); currentSearch = true; $("#IncarnateLoader").show(); Incarnate(); }); //if enter was hit, do the call $("#IncarnateUserName").keyup(function(event) { if (event.keyCode == 13) { if (currentSearch == true) return; setTimeout("clearSearchFlag();", 1000); currentSearch = true; $("#IncarnateLoader").show(); Incarnate(); } }); // //Doesn't work on all browsers, which is why we have the close button $("body").focus(function() { $("#IncarnateResultsContainer").fadeOut(fadeDuration); }); function Incarnate() { //clear out all state index = 0; avatars = []; //don't search for empty string if ($("#IncarnateUserName").val() == "") { $("#IncarnateResultsContainer").fadeOut(fadeDuration); return; } //hold term in variable searchTerm = $("#IncarnateUserName").val() //if they gave us an email, do gravatar if (window._emailRegex.test(searchTerm)) { //do gravatar $.getJSON(IncarnateServiceURL + "GetHash?email=" + searchTerm + "&callback=?", function(data) { //populate img tag $("#IncarnateImg").attr("src", "http://gravatar.com/avatar.php?gravatar_id=" + data + "&d=http%3A%2F%2Fwww.visitmix.com%2FContent%2Fimg%2Fdefault_gravatar.gif"); //populate hidden field for form submit $("#IncarnateImgSrc").attr("value", "http://gravatar.com/avatar.php?gravatar_id=" + data + "&d=http%3A%2F%2Fwww.visitmix.com%2FContent%2Fimg%2Fdefault_gravatar.gif"); $("#IncarnateLoader").hide(); }); return; } if (searchTerm.indexOf("@") > 0) { $("#IncarnateResultsContainer").hide(); return; } //clear out the container $("#IncarnateResultsContainer").empty(); //add the cancel UI for the container var cancelDiv = $('<div style="height:16px;margin:2px 2px 0 0;"><img style="margin-left:8px;" src="http://incarnate.blob.core.windows.net/images/lockup_small.png"/><span style="float:right;cursor:pointer; "><img src="http://incarnate.visitmix.com/images/close.png"/></span></div>'); cancelDiv.click(function() { $("#IncarnateResultsContainer").hide(); }); $("#IncarnateResultsContainer").append(cancelDiv); //use incarnate service $(providers).each(function(name, value) { $.getJSON(IncarnateServiceURL + value + "/" + searchTerm + "?callback=?", function(data) { if (data != null) { if (searchTerm == $("#IncarnateUserName").val()) { $("#IncarnateResultsContainer").fadeIn(fadeDuration); $("#IncarnateLoader").hide(); var vCardDiv = $('<div class="IncarnateResult" style="clear:both;display:none;min-height:48px"></div>'); vCardDiv.append('<img style="float:left;border:1px solid #333;margin:10px;" width="48" src="' + data + '" />'); vCardDiv.append('<img style="margin-top:10px;float:left;border:none;" src="http://incarnate.blob.core.windows.net/images/' + value + '.png"/>'); vCardDiv.click(function() { //clear all values $("#IncarnateImgSrc").attr("value", data); $("#IncarnateImg").attr("src", data); $("#IncarnateResultsContainer").fadeOut(fadeDuration); }); vCardDiv.hover(function() { vCardDiv.css({ 'clear': 'both', 'background-color': '#99ccff', 'overflow':'hidden' }); }, function() { vCardDiv.css({ 'clear': 'both', 'background-color': 'transparent' }); } ); $("#IncarnateResultsContainer").append(vCardDiv); vCardDiv.fadeIn(fadeDuration); } } }); }); } });
URL: http://incarnate.visitmix.com