<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Create your own lifestream with the jQuery lifestream plug-in">
<meta name="keywords" content="jQuery, plugin, lifestream, jquery-lifestream, twitter, delicious, github, stackoverflow, flickr, lastfm, youtube">
<title>Your lifestream - made with jQuery Lifestream</title>
<style type="text/css">
@font-face {
font-family: 'AftasansRegular';
src: url('assets/aftasansthin-regular-webfont.eot');
src: url('assets/aftasansthin-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('assets/aftasansthin-regular-webfont.woff') format('woff'),
url('assets/aftasansthin-regular-webfont.ttf') format('truetype'),
url('assets/aftasansthin-regular-webfont.svg#AftasansRegular') format('svg');
font-weight: normal;
font-style: normal;
}
* {
margin: 0;
padding: 0;
}
body {
background:
radial-gradient(black 15%, transparent 16%) 0 0,
radial-gradient(black 15%, transparent 16%) 8px 8px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
background:
-webkit-radial-gradient(black 15%, transparent 16%) 0 0,
-webkit-radial-gradient(black 15%, transparent 16%) 8px 8px,
-webkit-radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
-webkit-radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
background:
-moz-radial-gradient(black 15%, transparent 16%) 0 0,
-moz-radial-gradient(black 15%, transparent 16%) 8px 8px,
-moz-radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
-moz-radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
background-color:#282828;
background-size:16px 16px;
color: #fff;
font: 16px/100% "AftasansRegular", Helvetica, Arial, sans-serif;
margin: 1.0em;
max-width: 1000px;
}
h1 { font-size: 3.8em; color: #fff; margin-bottom: 3px; }
h1 .small { font-size: 0.4em; }
h2 { font-size: 1.5em; color: #3908bc; clear: both;}
h3 { text-align: center; color: #3908bc; }
a { color: #F6DD97; text-decoration: none}
a:hover {text-decoration: underline;}
ul li { list-style-type: none;}
ol { margin-left: 1.5em;}
ol li {padding: 0.5em 0;}
#options {
float: right;
margin-left: 1em;
width: 21em;
}
#options label {
background-repeat: no-repeat;
background-position: left center;
color: rgb(255,255,255);
color: rgba(255,255,255,0.8);
clear: both;
cursor: pointer;
text-transform: capitalize;
float:left;
position: relative;
padding: 0.5em 0 0.5em 1.5em;
width: 7em;
}
#options input[type=text] {
color: rgb(255,255,255);
color: rgba(255,255,255,0.8);
background: rgb(0,0,0);
background: rgba(255,255,255,0.1);
border: 0;
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
box-shadow: 0 0 4px rgba(255,255,255,0.2);
float:left;
font: 1em "MuseoSans500", Helvetica, Arial, sans-serif;
padding: 0.2em 0.5em;
margin: 0.3em 0;
width: 9.5em;
}
#options input[type=text]:focus, #options input[type=text]:hover {
background: rgba(255,255,255,0.2);
}
#options a {
background: no-repeat center center url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAALGOfPtRkwAAAZNpQ0NQSUNDIFByb2ZpbGUAAHiclZE9S1tRGMd/54o4GOJyKdLFI33BIZZgECrtoncIhQxpyJAEl5t7rzFyzT2cnPgCfgQHwcWWQq1+ASedBPeqi+gkfgZB6FLkdjgtWZTqHx74PX8eeN7AOfWVih1guWN0pTgna/WGHLpkkDGGGQc/6KrZcrnEo/p1hQC4mPSVih+ve1AZXas3QLiA27I8AbhNyx8Bd9UoA6IMuMGiH4IIgZyuVjwQW0C2ZXkXyDYtHwDZlaBlQJwA+U7Y7oC4Bd6HUTcAZwIwgdIGnG/AZK3ekHa0ZBdmXsHAZt9r7sDRMYz+7Huvv8PIBzg873t3nxGAeHHRXShMASAyHgzepOndGxjahvutNP39I03v92DgGk6Wgp5e+XsX4RTgf7ndzeb2B2D7Psx2fwDysH8F1Q0oncGXr/B2AUbmoZyB6gxOYfpf2FsB8NLz43ZT+yYKZaU4J70kTnRX+UH0nK8/QSZaMwBeotZ1u7Vo5KxScSS9ZFn1TKRz8lMneJeTU/n8NMAfDPNxzOGn0hYAAAAgY0hSTQAAeiUAAHolAAAAAAAAeiUAAAAAAAB6JQAAAAAAAHolcjIeYAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAl1JREFUOI11U79PWlEYPdcHl3DvY+FOGvOaPBIXVyNGE6S85+6PoZudmUwc27nd/AuYTCQ84qDsmIoTJejcGBMKuJG0to0k3PvC16W8gNKz3XznnHz3+77DlFKYBhFhNBrltNa5eDz+BgCMMV3O+U0ikbhhjM3wY9MPrXWWiD5ns9m853kLjuMAAHq9Hq6ursatVuuaMfaBc/41EimloJSClHLfdd0f5XKZ5sEYQ+VymVzX/Sml3J/ooJRCKpXKuq77q91uExHRYDCgWq1GpVKJzs/PqdvtRkbtdptc1/2dSqU2lFJAOp22bNu+DoKAiIi01uT7Pi0uLtLq6irZtk2O49Dl5WVkEgQB2bZ9nU6nLQghcp7njcMwjAzq9Tr1+30aDod0dHREAGh3dzcyCMOQPM8bCyFyC8aYbd/3mWVZAIB4PA7P87C8vIxkMonRaAQAWFtbi+ZmWRZ832fGmG1IKU8n7b/E2dkZcc7p8PCQnp+fZ2pBEJCU8nRmjdO4u7tDsVjE5uYmSqUSOOdzeQta64dOp/OqcHFxAa019vb25oo7nQ601g8QQuQKhUI0xAnu7++p0WjQ4+Pjq6+FYUiFQmEshMhFa6xWqzOk4+NjSiaTdHJy8sqgWq1Ga7SEEDQej781m813W1tbiaWlJQDAYDAA5xz5fB4rKytR67e3tygWi3+Gw+H7WCzWnz7lg0wm81SpVMgYM/eUK5UKZTKZJynlwUTHptOotd4gok/r6+tvd3Z2mOM4ICL0ej3U63VqtVpfGGMfOefNiYb9J87bU3Fmxpjv/+LceBnnv3C2ynWz8FAEAAAAAElFTkSuQmCC);
display: block;
border-radius:8px;
margin: 0.5em;
height: 16px;
width: 16px;
float: left;
}
#options a:hover, #options a:focus {
-webkit-box-shadow: 0 0 8px rgba(255,255,255,0.8);
-moz-box-shadow: 0 0 8px rgba(255,255,255,0.8);
box-shadow: 0 0 8px rgba(255,255,255,0.8);
}
.button {
background: rgb(0,0,0);
background: rgba(255,255,255,0.2);
border: 0;
clear: both;
color: #fff;
cursor: pointer;
display: inline-block;
float: left;
font-weight: bold;
font-size: 1.1em;
margin-top: 0.7em;
padding: .5em 2em .55em;
text-align: center;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0,0,0,0.2);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 0 4px rgba(255,255,255,0.2);
-moz-box-shadow: 0 0 4px rgba(255,255,255,0.2);
box-shadow: 0 0 4px rgba(255,255,255,0.2);
width: 17.4em;
}
.button:hover {
text-decoration: none;
background: rgba(255,255,255,0.4);
}
.button:active {
position: relative;
top: 1px;
}
#empty, #lifestream {
float: left;
max-width: 40em;
}
#lifestream {
color: #d4d4d4;
font-size: 0.95em;
}
#lifestream a {
color: #f6dd97;
text-decoration: none;
}
#lifestream a:hover {
color: #fff5d8;
text-decoration: underline;
}
#lifestream ul {
margin: 0;
padding: 0;
}
#lifestream li {
line-height: 1.2em;
padding: 5px 3px 5px 25px;
background-repeat: no-repeat;
background-position: left center;
}
#lifestream li:hover {
color: #e9e9e9;
}
.ir { display: block;text-indent: -999em;overflow: hidden;background-repeat: no-repeat;text-align: left;direction: ltr;}
#footer {clear: both; padding: 2em 0 0em;}
#footer p {clear: both; padding-bottom: 1em;}
/* twitter */
.twitterbutton {
float: left;
margin-right: 1em;
}
.twitterbutton a {
background: no-repeat 0 0;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADcAAAA8CAMAAAD1wtK3AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QkY3QTZDMUM3RkEzMTFFMEIyNkZFOUNCNTU3MDIzRDYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QkY3QTZDMUQ3RkEzMTFFMEIyNkZFOUNCNTU3MDIzRDYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpCRjdBNkMxQTdGQTMxMUUwQjI2RkU5Q0I1NTcwMjNENiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpCRjdBNkMxQjdGQTMxMUUwQjI2RkU5Q0I1NTcwMjNENiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PscuP8YAAAHyUExURc7l9P///+jz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);
border-radius: 3px;
display: block;
height: 20px;
width: 55px;
}
.twitterbutton a:hover {background-position:0 -20px;}
.twitterbutton a:active {background-position:0 -40px;}
@media (max-width: 1005px) {
#lifestream {
max-width: 50%;
}
}
@media (max-width: 750px) {
#options, #lifestream, #empty {
max-width: 100%;
clear: both;
float: none;
overflow: hidden;
}
#options, #empty {
margin: 0 0 20px 0;
width: auto;
}
}
</style>
<link href="../css/lifestream.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" type="image/x-icon" href="../favicon.ico">
</head>
<body>
<div id="empty">
<ol>
<li>Fill in your username(s)</li>
<li>Hit create or <abbr title="ENTER key">↵</abbr></li>
</ol>
</div>
<div id="options"> </div>
<div id="lifestream"> </div>
<div id="footer">
<p class="twitterbutton ir">
<a href="http://twitter.com/share?original_referer=http%3A%2F%2Fdenbuzze.com&url=http%3A%2F%2Fchristianv.github.com%2Fjquery-lifestream%2Fme&text=My+lifestream&via=denbuzze" target="_blank">Tweet</a>
</p>
<iframe src="https://www.facebook.com/plugins/like.php?layout=button_count&href=http://christianv.github.com/jquery-lifestream/me" scrolling="no" frameborder="0" style="border:none; width:120px; height:25px"></iframe>
<p>Uses the <a href="http://christianv.github.com/jquery-lifestream">jQuery Lifestream Plug-in</a></p>
<p>Created by <a href="http://denbuzze.com">Christian Vuerings</a></p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="http://code.jquery.com/jquery-1.6.1.min.js"><\/script>');</script>
<script src="jquery.ba-bbq.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../jquery.lifestream.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function(){
var $empty = $("#empty"),
$form,
$lifestream = $("#lifestream"),
$options = $("#options"),
$twitterbutton = $(".twitterbutton a"),
help = {
"flickr": "http://idgettr.com/",
"foursquare": "http://www.cl.ly/7TEJ",
"googlereader": "http://groups.google.com/d/topic/google-reader-howdoi/BLfyLeG5QUk/discussion",
"stackoverflow": "http://f.cl.ly/items/0a3K2Z42442l3d030g0E/stackoverflow.png"
};
var bindSubmit = function(){
$form = $('form', $options);
$form.bind("submit", function(){
var output = {};
$("input[type=text]",$form).each(function(i, element){
output[element.id] = element.value;
})
$.bbq.pushState(output);
return false;
})
}
var generateform = function(){
var form = '<form method="post" action="index.html">';
// Get all the current available services
for(var i in $.fn.lifestream.feeds){
if($.fn.lifestream.feeds.hasOwnProperty(i)){
form += '<label for="' + i + '" class="lifestream-' + i + '">'
+ i + "</label>"
+ '<input type="text" name="' + i + '" id="' + i + '" />';
if(help[i]){
form += '<a href="' + help[i] + '" title="Find your '
+ i + ' id or username" target="_blank" class="ir">?</a>'
}
}
}
form += '<input type="submit" class="button" value="Create" />'
+ "</form>";
$options.html(form);
}
generateform();
bindSubmit();
var generateTwitter = function(isempty){
var output = {
"original_referer": "http://denbuzze.com",
"url": isempty ? "http://christianv.github.com/jquery-lifestream/me" : window.location.href,
"text": "My lifestream",
"via": "denbuzze"
}
$twitterbutton.attr("href", "http://twitter.com/share?" + $.param(output, true));
}
$(window).bind( "hashchange", function(e) {
var input = $.bbq.getState(),
list=[],
limit=1000,
showempty=true;
for(var i in input){
if(input.hasOwnProperty(i)){
$("#" + i, $form).val(input[i]);
list.push({
"service": i,
"user": input[i]
});
if(input[i]) {showempty = false};
}
}
generateTwitter(showempty);
if(showempty){
$empty.show();
$lifestream.hide();
}
else {
$empty.hide();
$lifestream.lifestream({
"limit": limit,
"list": list
});
$lifestream.show();
}
});
$(window).trigger( "hashchange" );
});
</script>
<script>
var _gaq=[["_setAccount","UA-190225-11"],["_trackPageview"],["_trackPageLoadTime"]];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
g.src=("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js";
s.parentNode.insertBefore(g,s)}(document,"script"));
</script>
</body>
</html>