Fire JS Bin - Surf

You can jump to the latest bin by adding /latest to your URL

Find

⟲

Replace

var sources = [{
  id: "twitter",
  shown: false,
  complete: false,
  success: false,
  entries: false,
  url: "http://letsbetrends.com/api/current_trends.atom",
  header: 'Trending <a href="http://twitter.com">Twitter</a> Topics',
  footer: 'Nifty data fetched via <a href="http://letsbetrends.com/">Let’s Be Trends</a>.',
  entryCallback: function (a) {
    var b = "http://search.twitter.com/search?q=" + escape(a.title);
    return '<h2><a href="' + b + '">' + a.title + "</a></h2><p>" + replaceURLWithHTMLLinks($(a.content).text()) + ' (<a href="' + b + '" class="more">View tweets</a>)</p>'
  }
},
{
  id: "news",
  shown: false,
  complete: false,
  success: false,
  entries: false,
  url: "http://news.google.com/news?pz=1&cf=all&ned=us&hl=en&topic=h&num=6&output=rss",
  header: 'Latest <a href="http://news.google.com">Google News</a> Stories'
},
{
  id: "digg",
  shown: false,
  complete: false,
  success: false,
  entries: false,
  url: "http://feeds.digg.com/digg/popular.rss",
  header: 'Popular <a href="http://digg.com">Digg</a> Stories'
},
{
  id: "youtube",
  shown: false,
  complete: false,
  success: false,
  entries: false,
  url: "http://gdata.youtube.com/feeds/base/standardfeeds/most_viewed?client=ytapi-youtube-browse&alt=rss&time=today",
  header: 'Popular <a href="http://youtube.com">YouTube</a> Videos'
}],
    time = {
    total: false,
    current: 0,
    step: false,
    nextStep: 0,
    interval: false
    },
    title, $footer;

<!doctype html>
<html>
  
  <head>
    <meta charset="UTF-8" />
    <title>Surf by Osmosis (and get on with your life)</title>
    <link type="text/css" rel="stylesheet" href="/attach/typekit.css" />
  </head>
  
  <body>
    <div id="main">
      <section id="home" class="current">
        <header>
          <h1>Surf by <span>Osmosis</span></h1>
        </header>
        <div class="body">
          <p>
            Your time is valuable, but the Web is distracting. Surf by Osmosis minimizes
            the time you spend staying in the loop by showing you some of the Web’s
            top content really quickly.
          </p>
          <form action="#" method="post" id="go">
            <p>
              <label for="minutes">How much time can you spare?</label>
            </p>
            <p>
              <select id="minutes">
                <option value="1">Just a minute</option>
                <option value="2">Two minutes</option>
                <option value="5">Five minutes</option>
                <option value="10">Ten minutes</option>
                <option value="15">Fifteen minutes</option>
              </select>
              <button>Go!</button>
            </p>
          </form>
        </div>
        <footer>
          <p>
            Created by <a href="http://tylersticka.com">Tyler Sticka</a>
            for <a href="http://10k.aneventapart.com/">10K Apart</a>
            . Made with <abbr title="HyperText Markup Language">HTML</abbr>
            5, <abbr title="Cascading StyleSheets">CSS</abbr>
            3, <a href="http://jquery.com/">jQuery</a>
            , <a href="http://code.google.com/apis/ajaxfeeds/">Google AJAX Feed API</a>
            and <a href="http://typekit.com/">Typekit</a>.
          </p>
        </footer>
      </section>
    </div>
    <div id="loading"><span style="width:2%">0%</span></div>
    <div id="status">
      <canvas id="clock" width="110" height="110"></canvas>
      <a href="#" id="skip">Skip</a>
    </div>
    <script src="http://www.google.com/jsapi"></script>
    <script>google.load('feeds', '1');</script>
    <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
  </body>

</html>

html, body, div, span, h1, h2, p, abbr, img, strong, b, i, ul, li, form, label, footer, header, section { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent }
footer, header, section { display:block }
input, select { vertical-align:middle }
html { background:#afc273 }
body { border-top:3px solid #697445; color:#666; font-family:Arial, sans-serif; font-size:16px; line-height:24px }
p, ul, h1 { padding-bottom:24px }
a { color:#3f97ff; text-decoration:none }
a:hover { text-decoration:underline }
p a { border-bottom:1px solid #bbb }
p a:hover { border-bottom-color:#3f97ff; text-decoration:none }
h1 { color:#999; font-family:Arial, sans-serif; font-size:48px; font-weight:400; line-height:48px }
h1 span { color:#666 }
#home h1 { font-size:60px; line-height:60px }
h2 { font-size:24px; line-height:28px; padding-bottom:4px }
abbr { border-bottom:1px dotted #999; cursor:help }
label { font-weight:700 }
#main { background-color:#fff; margin:40px auto; padding:40px 40px 30px; position:relative; width:640px; border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px }
section { display:none }
section.current { display:block }
.body { list-style:none none }
.body li { border-bottom:1px dotted #ccc; margin-bottom:24px }
.body li:last-child { border-bottom:0; margin-bottom:0 }
.body li:after { content:"."; display:block; clear:both; visibility:hidden; line-height:0; height:0 }
.img-container { float:left; margin:0 24px 24px 0 }
.more { white-space:nowrap }
footer { border-top:1px dotted #ccc; color:#777; font-size:12px; line-height:18px; padding-top:24px }
footer p { padding-bottom:18px }
#loading { background:#697445; border-bottom:1px solid #cedf99; display:none; height:8px; position:absolute; top:0; width:100% }
#loading span { background:#fff; display:block; height:100%; overflow:hidden; text-indent:-9999px }
#status { display:none; position:fixed; right:12px; top:12px }
#clock { margin-bottom:10px }
#skip { background:rgba(0, 0, 0, .6); color:#fff; display:block; font-family:Arial, sans-serif; font-size:18px; line-height:18px; margin:0 auto; outline:0; padding:10px 0; text-align:center; text-transform:uppercase; text-decoration:none; width:90px; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px }
#skip:hover { background-color:rgba(0, 0, 0, .4) }
#skip:after { content:'\2192' }
#skip, h1 { font-family: "ff-cocon-web-pro-1", "ff-cocon-web-pro-2", "Helvetica", "Arial", sans-serif; }

Pop out