View
Theme
Font Style
7pt
8pt
9pt
10pt
11pt
Line Style
100%
110%
120%
130%
140%
Bold Keyword
Default
Inspector
Kkaefer
Eclipse
SQ Light
Lesser
Dark
Cobalt
Monokai
Rubyblue
Night
SQ Dark
Ambiance
Blackboard
Line Num.
Wrap Lines
Preview
Redraw
JS Tab
HTML Tab
CSS Tab
Live Tab
Prev. Tab
Next Tab
Browser
History…
Help
Edit
Settings
Auto Complete
Match Brackets
Match Highlight
Strip Whitespace
Auto Close Brackets
Auto Close Quotes
Show Print Margin
Undo
Redo
Delete
Select Line
Select All
Find & Replace
Find
Find in Repo.
Find Next
Find Previous
Replace Single
Replace All
Wrap Search
Revert
As Template
Diff Revision
Format
Compress
Text
Zen Coding
Indent
Tab Width
1
2
3
4
5
6
7
8
Indent Unit
1
2
3
4
5
6
7
8
Smart Indent
Use Tabs
Visible Tabs
Shift Left
Shift Right
Put Indent
Number
Increment by 1
Decrement by 1
Increment by 0.1
Decrement by 0.1
Increment by 10
Decrement by 10
Simple Math
Comment
Line
Move Up
Move Down
Copy Up
Copy Down
Go to Line…
Remove Line
Next Point
Prev. Point
Help
Share
Login
You can jump to the latest bin by adding
/latest
to your URL
×
z
Find
→
←
⟲
Replace
⊗
All
Replace
var o = { s: 'select * from ', q: [{ type: "Flickr_search", yql: 'flickr.photos.search where has_geo="true" and text="', val: ["London", "Paris", "NYC", "sunset", "Rhubarb", "Sydney", "Moscow", "Rio", "San Fransisco"], limit: 5, met: [{ w: 20, h: 100, x: 0, y: 0 }, { w: 80, h: 30, x: 20, y: 0 }, { w: 40, h: 35, x: 20, y: 30 }, { w: 40, h: 70, x: 60, y: 30 }, { w: 40, h: 35, x: 20, y: 65 }] }, { type: "Flickr_set", yql: 'flickr.photosets.photos where photoset_id="', val: ["72157624572915823", "72057594134622617", "72157622403813905", "72157623439899259", "72157605333173562", "72157604815385311", "72157624223934291", "72157623532961460", "72157608995490471"], limit: 5, met: [{ w: 20, h: 100, x: 0, y: 0 }, { w: 80, h: 30, x: 20, y: 0 }, { w: 40, h: 35, x: 20, y: 30 }, { w: 40, h: 70, x: 60, y: 30 }, { w: 40, h: 35, x: 20, y: 65 }] }, { type: "Twitter_search", yql: 'twitter.search where q="', val: ["olvado", "madebymany", "food", "drink", "aea10k", "fun", "OMG", "bpl", "rhubarb"], limit: 10, met: [{ w: 100, h: 30, x: 0, y: 0 }, { w: 33.3, h: 25, x: 0, y: 30 }, { w: 33.3, h: 25, x: 33.3, y: 30 }, { w: 33.3, h: 25, x: 66.7, y: 30 }, { w: 33.3, h: 22.5, x: 0, y: 55 }, { w: 33.3, h: 22.5, x: 33.3, y: 55 }, { w: 33.3, h: 22.5, x: 66.7, y: 55 }, { w: 33.3, h: 22.5, x: 0, y: 77.5 }, { w: 33.3, h: 22.5, x: 33.3, y: 77.5 }, { w: 33.3, h: 22.5, x: 66.6, y: 77.5 }] }], lyt: [{ x: -1, y: -1 }, { x: 0, y: -1 }, { x: 1, y: -1 }, { x: -1, y: 0 }, { x: 0, y: 0 }, { x: 1, y: 0 }, { x: -1, y: 1 }, { x: 0, y: 1 }, { x: 1, y: 1 }] }; jQuery(function ($) { ff.go(); }); var ff = { go: function () { ff.db.stp(function () { ff.bld.opts(); }); }, pos: { xy: function (g, el, i) { var p = el.parent(), x = (p.width() + g) * o.lyt[i].x, y = (p.height() + g) * o.lyt[i].y; var pos = { x: x, y: y } return pos; }, an: function (g, it) { it.each(function (i) { var pos = ff.pos.xy(g, $(this), i); $(this).animate({ left: pos.x, top: pos.y }); }); }, el: function (el, m) { p = el.parent(); el.css({ width: (m.w / 100) * p.width(), height: (m.h / 100) * p.height(), left: (m.x / 100) * p.width(), top: (m.y / 100) * p.height() }); }, img: function (el) { var p = el.parent(); el.css({ 'margin-left': (p.width() - el.width()) / 2, 'margin-top': (p.height() - el.height()) / 2 }); } }, db: { stp: function (cb) { if (o.rst || !localStorage.v) { localStorage.clear(); localStorage.v = '0.0.1.min'; for (i = 0; i < o.q.length; i++) { ff.db.wa('query_' + i, o.q[i]); } o.count = o.lyt.length; o.cfg = []; for (i = 0; i < o.count; i++) { var q = o.q[0]; ff.db.cfg(q.type, q.val[i], q.limit, q.met); } ff.db.wa('cfg', o.cfg); ff.db.wa('count', o.count); ff.db.wa('layout', o.lyt); } else { o.count = ff.db.ra('count'); o.lyt = ff.db.ra('layout'); o.cfg = ff.db.ra('cfg'); } cb(); }, cfg: function (t, v, l, m) { o.cfg.push({ type: t, val: v, limit: l, met: m }); }, wa: function (k, a) { a = JSON.stringify(a); localStorage.setItem(k, a); }, ra: function (key) { key = JSON.parse(localStorage.getItem(key)); return key; } }, bld: { opts: function () { var cfg = $(o.cfg), ol = $('#opts ol').appendTo($('#opts article')); cfg.each(function (i) { var li = $('<li class="item">').appendTo(ol), fs = $('<fieldset>').appendTo(li).append('<legend>Pane ' + (i + 1)), sel = $('<select>').addClass('type').attr('id', 'type_' + i).appendTo(fs), inp = $('<input>').addClass('query').attr('id', 'query_' + i).val(o.cfg[i].val).appendTo(fs); $(o.q).each(function (c) { var option = $('<option>').val(c).text(this.type.replace('_', ' ')).appendTo(sel); }); sel.val(o.cfg[i].type); }); ff.pos.an(20, $('.item')); $('.type').change(function () { var i = $('.type').index(this), input = $('.query'), q = ff.db.ra('query_' + $(this).val()); $(input[i]).val(q.val[i]); }); var cfg = $('<button id="cfg">').text('Config').appendTo($('#ct')), sv = $('<button>').text('Launch').insertAfter(ol).bind('click', function () { ff.bld.clo(); }); }, clo: function (cb) { var opts = $('#opts'), stg = $('#stg'); $('#cfg').animate({ top: -3 }).bind('click', function () { opts.fadeIn(200); $('#stg').css({ 'opacity': .7 }); $('.can').unbind(); ff.bld.opo(); }); stg.css({ 'opacity': 1 }).html(''); o.cfg = []; $('.item', opts).each(function (i) { var type = $('select', this).val(); if (type == 2) { var can = $('<section>'); } else { var can = $('<article>'); } can.addClass('can').appendTo(stg); ff.db.cfg(type, $('input', this).val(), o.q[type].limit, o.q[type].met); ff.db.wa('cfg', o.cfg); var cfg = o.cfg[i], t = $('<h2>').text(o.q[cfg.type].type.replace('_', ' ') + ': ' + cfg.val).appendTo(can); }) opts.fadeOut(200); var can = $('.can'); $(can[4]).addClass('atv'); ff.bld.can($(can[4]), 4); can.not('atv').hover(function () { var i = can.index(this); ff.bld.can($(this), i); }) ff.pos.an(35, can); can.bind('click', function () { var c = $(this), pos = c.position(), xm = -pos.top, ym = -pos.left, i = can.index(this); can.removeClass('atv'); $(can[i]).addClass('atv'); can.each(function () { var c = $(this), p = c.position(), x = p.top + xm, y = p.left + ym; c.animate({ top: x, left: y }, 1200); }); }); $('body').removeClass('opt'); }, opo: function () { $('#cfg').animate({ top: -30 }).unbind('click'); $('#opts').fadeIn(200); $('body').addClass('opt'); }, can: function (can, i) { if ($('article,figure,.er', can).length == 0) { var cfg = o.cfg[i], q = ff.bld.fd.q(o.q[cfg.type].yql + cfg.val + '" limit ' + cfg.limit); if (o.q[cfg.type].type == "Twitter_search") { q += "&env=store://datatables.org/alltableswithkeys"; } ff.bld.fd.get(q, function (r, s) { if (s) { if (r.photo) { $(r.photo).each(function (c) { var pid = this.id; ff.bld.fd.flkr.p(this, function (img) { ff.bld.fig(img, function (fig) { can.append(fig); ff.pos.el(fig, o.cfg[i].met[c]); $(img).load(function () { fig.fadeIn(); ff.pos.img($(this)); }); fig.hover(function () { if ($('figcaption', this).length == 0) { var q = ff.bld.fd.flkr.c(pid); ff.bld.fd.get(q, function (d) { var c = $('<figcaption>').appendTo(fig), t = d.photo.title ? d.photo.title : "Photo" l = $('<a href="' + d.photo.urls.url.content + '" target="_blank">').text(t).appendTo(c); u = $('<cite>').text(' by ' + d.photo.owner.username).appendTo(l); }); } }); }); }); }); } else if (r.results) { $(r.results).each(function (c) { ff.bld.fd.twit(this, function (el) { can.append(el); ff.pos.el(el, o.cfg[i].met[c]); }); }); } } else { can.append(r); } }); } }, fig: function (img, cb) { var fig = $('<figure>'); fig.hide().append(img); cb(fig); }, fd: { q: function (q) { var q = o.s + q, yql = "http://query.yahooapis.com/v1/public/yql?q=" + encodeURIComponent(q) + "&format=json"; return yql; }, get: function (query, cb) { $.getJSON(query, function (d) { if (!d || !d.query.results) { var r = $('<h2 class="er">:(</h2>'), s = false; } else { var r = d.query.results, s = true; } cb(r, s); }); }, flkr: { p: function (photo, img) { var isrc = 'http://farm' + photo.farm + '.static.flickr.com/' + photo.server + '/' + photo.id + '_' + photo.secret + '.jpg' img($('<img>').attr('src', isrc)); }, c: function (id) { var q = ff.bld.fd.q('flickr.photos.info where photo_id="' + id + '"'); return q; } }, twit: function (twt, cb) { var b = ff.bld.fd.fmt(twt.text), el = $('<article>'), u = $('<cite>').html('<a target="_blank" href="http://twitter.com/' + twt.from_user + '">' + twt.from_user + '</a>').appendTo(el), d = $('<time>').text(twt.created_at).appendTo(u), t = $('<p>').html(b).prependTo(el), a = $('<img>').attr('src', twt.profile_image_url).prependTo(u); cb(el); }, fmt: function (b) { b = b.replace(/(ftp|http|https|file):\/\/[\S]+(\b|$)/gim, '<a href="$&" target="_blank">$&</a>'); b = b.replace(/([^\/])(www[\S]+(\b|$))/gim, '$1<a href="http://$2" target="_blank">$2</a>'); return b; } } } }
<!DOCTYPE html> <html> <head> <meta content='text/html; charset=utf-8' http-equiv='Content-Type'> <title>10k Feed Board</title> </head> <body> <header><h1>10k Feed Board</h1></header> <section id="ct"> <section id="stg"></section> <aside id="opts"> <article> <fieldset> <legend>Configuration</legend> <ol></ol> </fieldset> </article> </aside> </section> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script> </body> </html>
html, body, div, p, ul, ol, h1, h2, header, aside, section, article, figure { display:block; margin:0; padding:0; list-style:none; } html, body, section, #opts { top:0; left:0; } html, body, section, #opts, .can, .item { width:100%; height:100%; } html, body, section, #opts, #ct, .can, .can article, .can figure, .can figcaption, .item, .can h2 { position:absolute; } button, .item, .can, .can h2 { box-shadow:2px 2px 10px rgba(0, 0, 0, .4); -moz-box-shadow:2px 2px 10px rgba(0, 0, 0, .4); -webkit-box-shadow:2px 2px 10px rgba(0, 0, 0, .4); } body { font:14px Arial; overflow:hidden; position:relative; } a { color:#EF8200; } .er { text-align:center; padding:100px; font-size:32px; } #ct { top:11%; left:11%; width:78%; height:78%; } header { width:78%; margin:auto; color:#ccc; } h1 { font-size:60px; letter-spacing:-2px; } #stg { position:relative; z-index:0; } .can { opacity:.4; background:#f3f3f3; border:1px solid#8f8f8f; } .can h2 { display:none; background:#f3f3f3; bottom:-25px; left:-1px; height:15px; font-size:14px; color:#333; padding:5px 10px; z-index:0; width:auto; border:1px solid#8f8f8f; border-top:0; } .atv h2, .atv { border-color:#f3f3f3; } .atv h2, .can:hover h2 { display:block; } .can:hover { opacity:1; cursor:pointer; } .opt.can { opacity:.4; cursor:default; } .can article, .atv { background:#f3f3f3; opacity:1; } .atv:hover { cursor:default; } .can article, .can figure { overflow:hidden; z-index:1; } .can figure img { min-width:100%; min-height:100%; } .can figcaption { bottom:0; left:0; width:100%; line-height:1.3; background:rgba(0, 0, 0, 0.6); z-index:10; display:none; } .atv figure:hover figcaption { display:block; } .can figcaption a { display:block; color:#fff; padding:3px 10px; } .can figure:nth-child(2) { border-right:2px solid#fff; z-index:5; } .can figure:nth-child(3) { border-bottom:2px solid#fff; z-index:4; } .can figure:nth-child(4) { border-bottom:2px solid#fff; z-index:2; } .can figure:nth-child(5) { border-left:2px solid#fff; z-index:3; margin-left:-2px; } .can figure:nth-child(6) { border-right:2px solid#fff; z-index:1; } .can article p { font-family:Georgia; padding:10px 10px 3px; } .can article img { width:20px; height:20px; vertical-align:middle; margin-right:5px; border:1px solid#999; } .can article cite { display:block; padding:3px 10px; } .can time { margin-left:5px; } #opts>article { margin:30px; } fieldset, legend { border:0; margin:0; padding:0; } legend { font-weight:bold; font-size:24px; } #opts ol { margin:0 0 250px; width:320px; height:85px; position:relative; top:120px; left:340px; } .item { border:1px solid#8f8f8f; background:#f1f1f1; } .item fieldset { padding:5px 10px; } .item legend { font-size:14px; color:#333; padding-top:15px; } .item p { padding:0 0 5px; } input, select { font:14px Arial; } input { width:160px; border:1px solid#666; padding:3px; margin-left:5px; } label { width:50px; } button { border:2px solid#F9B320; background:#FBD378; font:14px Arial; color:#333; padding:2px 5px; margin-right:5px; cursor:pointer; } button:hover { background:#F9B320; } #cfg { position:fixed; top:-30px; right:11%; padding-top:3px; font-size:16px; opacity:.4; z-index:9; } #cfg:hover { opacity:1; } .can article:nth-child(2) p { font-size:32px; padding:10px 75px 10px 10px; } .can article:nth-child(1n+3) p { font-size:18px; border-top:2px solid#fff; } .can article:nth-child(1n+6) p { font-size: 15px; }
Pop out
Help
About
×
×