This is a collection of RSS Feeds from Newsvine, Digg, Slashdot, and Metafilter. The headlines are sorted horizontally according to their post date and time. The lower band is sorted by hours, and the upper is sorted by minutes. Dragging either band will shift the Timline.
To try these parts as used, simply copy and paste the following snippet of HTML into a Constructible HTML file.
<div is_proxy="true"
script="http://js.constructibl.es/specs/YahooPipesRssTunnel.js"
id="digg"
spec="9AE5F78771774127B5DDBD225501EDC7">
<a href="http://digg.com/rss/index.xml"
rel="rpc">
</a>
</div>
<div is_proxy="true"
script="http://js.constructibl.es/specs/YahooPipesRssTunnel.js"
id="metafilter"
spec="9AE5F78771774127B5DDBD225501EDC7">
<a href="http://xml.metafilter.com/rss.xml"
rel="rpc">
</a>
</div>
<div is_proxy="true"
script="http://js.constructibl.es/specs/YahooPipesRssTunnel.js"
id="newsvine"
spec="9AE5F78771774127B5DDBD225501EDC7">
<a href="http://www.newsvine.com/_feeds/rss2/index"
rel="rpc">
</a>
</div>
<div is_proxy="true"
script="http://js.constructibl.es/specs/YahooPipesRssTunnel.js"
id="slashdot"
spec="9AE5F78771774127B5DDBD225501EDC7">
<a href="http://rss.slashdot.org/Slashdot/slashdot"
rel="rpc">
</a>
</div><style type="text/css">
#timeline {
position:absolute;
height:600px;
width:1100px;
left:100px;
top:3in;
height:500px;
font-family:arial;
font-size:8pt;
line-height:100%;
}
#timeline { color: #7baab0; }
#timeline .timeline-band-0 .timeline-ether-bg { background-color: #13100a; }
#timeline .timeline-band-1 .timeline-ether-bg { background-color: #23201A; }
#timeline .timeline-band-2 .timeline-ether-bg { background-color: #222; }
#timeline .timeline-band-3 .timeline-ether-bg { background-color: #444; }
#timeline .t-highlight1 { background-color: #003; }
#timeline .p-highlight1 { background-color: #300; }
#timeline .timeline-highlight-label-start .label_t-highlight1 { color: #f00; }
#timeline .timeline-highlight-label-end .label_t-highlight1 { color: #115; }
#timeline .timeline-band-events .important { color: #c00; }
#timeline .timeline-band-events .small-important { background: #c00; }
#timeline .timeline-date-label-em { color: #fff; }
#timeline .timeline-ether-lines { border-color: #555; border-style: solid; }
#timeline .timeline-ether-highlight { background: #555; }
#timeline .timeline-event-tape,
#timeline .timeline-small-event-tape { background: #f60; }
#timeline .timeline-ether-weekends { background: #111; }
</style>
<div properties="divides_the_primary_timeline_in:'minutes',
divides_the_secondary_timeline_in:'hours'"
script="http://js.constructibl.es/specs/SIMILE_Timeline3.js"
id="timeline"
spec="5D464DFF647C4EC9BD947269A0893664"><!--
Please include the following tag in your <head></head>
<script src="http://api.simile-widgets.org/timeline/2.3.1/timeline-api.js?bundle=true"></script>
-->
</div>Was this example helpful? Do you have any questions? Tell us about it below!