Scrolling RSS Dashboard

b832d72f8b124eada198716493b366e9

This is a collection of RSS Feeds from Newsvine, Digg, Slashdot, and Metafilter. The headlines in the feeds are cycled by the Item Cycler on the left. Clicking on an headline renders the related content in the Text Slot on the right.

Parts List

• 1 × Counting Timer

  1. timer (see snippet below)

• 1 × Electric Glass

  1. glass (see snippet below)

• 1 × Item Cycler

  1. rss_headlines (see snippet below)

• 4 × RSS Retriever

  1. newsvine (see snippet below)
  2. digg (see snippet below)
  3. slashdot (see snippet below)
  4. metafilter (see snippet below)

• 1 × Text Slots

  1. article (see snippet below)

Parts Configuration

To try these parts as used, simply copy and paste the following snippet of HTML into a Constructible HTML file.

• article

  <style type="text/css">
  #article a.ExternalLink {
      font-size:9pt;
      color:#376670;
      margin-bottom:20px;
      display:block;
  }
  
  #article a.ExternalLink {
      padding-left:10px;
  }
  
  #article {
      top:2in;
      left:500px;
      font-family:helvetica, arial, verdana;
      width:500px;
  }
  
  div.Article h1 {
      color:#fff2c2;
      padding-bottom:0px;
      padding:0px 10px 0px 10px;
      margin:0px;
      font-size:14pt;
      line-height:170%;
  }
  
  div.Article h2 {
      padding:0px 10px 0px 10px;
  }
  
  div.Article p {
      padding:0px;
      padding-left:10px;
  }
  
   div.Article h2  {
      color:#44413b;
      font-size:8pt;
  }
  </style>
  
  <div spec="7A2FA5EDC6F44288A7C740F75E18ED49"
       script="http://js.constructibl.es/specs/TextSlots.js"
       properties="does_link_blank_anchors:true"
       id="article"
       class="Article">
   <h1 field="name">
   </h1>
  
   <h2 field="date">
   </h2>
  
   <p field="text_content">
   </p>
  
   <a class="ExternalLink">Read More...
   </a>
  
  </div>

• digg

  <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>

• glass

  <style type="text/css">
  #glass {
      top:2in;
      left:500px;
      width:500px;
      height:500px;
      background-color:#33302A;
      z-index:1;
  }
  </style>
  
  <div properties="clears_in_seconds:.1,
                   fogs_in_seconds:.1"
       script="http://js.constructibl.es/specs/ElectricGlass2.js"
       id="glass"
       spec="B6322BDCD73140A18873C2F3F86FFED2">
  </div>

• metafilter

  <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>

• newsvine

  <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>

• rss_headlines

  <style type="text/css">
  #rss_headlines {
      top:2in;
      left:1in;
      width:430px;
  }
  
  #rss_headlines ol {
      background-color:#33302a;
      width:80%;
  }
  
  #rss_headlines h1 {
      color:#547F8C;
  }
  
  #rss_headlines li {
      cursor:pointer;
  }
  
  div.RssBox {	   
      overflow:visible;
  }
  
  div.RssBox li {
      display:block;
      width:100%;
      margin:0px;
      padding:0px;
  }
  
  div.RssBox h1{
      height:30px;	   
      font-size:14pt;
      padding:10px 0px 10px 10px;
      margin:0px;
      color:#FFF2C2;
      font-family:helvetica, arial, verdana;
  }
  
  div.RssBox ol {
      padding:0px 0px 0px 10px;
      margin:0px;
      list-style-type:none;
      width:80%;
  }
  
  div.RssBox li {
      width:100%;
      margin:0px;
      padding:0px;
  }
  
  div.RssBox h3 {
  }
  
  div.RssBox li p {
      margin:0px;
      padding:0px 0px 25px 0px;
      font-size:9pt;
  }
  
  div.RssBox h2 a, div.RssBox h2{
  font-size:9pt;
  font-weight:bold;
  color:#7baab0;
  }
  
  div.RssBox h4, div.Article h2  {
      color:#44413b;
      font-size:8pt;
  }
  
  div.RssBox h2, 
  div.RssBox h3, 
  div.RssBox h4{
      margin:0px;
      padding:0px;
  }
  </style>
  
  <div class="RssBox"
       properties=""
       script="http://js.constructibl.es/specs/ItemCycler.js"
       id="rss_headlines"
       spec="19767F106F5646C8973F63A4011C32B6">
   <h1>Headlines
   </h1>
  
   <ol>
    <li>
     <h2 field="name">
     </h2>
  
     <h4 field="date">
     </h4>
  
    </li>
  
    <li>
     <h2 field="name">
     </h2>
  
     <h4 field="date">
     </h4>
  
    </li>
  
    <li>
     <h2 field="name">
     </h2>
  
     <h4 field="date">
     </h4>
  
    </li>
  
    <li>
     <h2 field="name">
     </h2>
  
     <h4 field="date">
     </h4>
  
    </li>
  
    <li>
     <h2 field="name">
     </h2>
  
     <h4 field="date">
     </h4>
  
    </li>
  
    <li>
     <h2 field="name">
     </h2>
  
     <h4 field="date">
     </h4>
  
    </li>
  
    <li>
     <h2 field="name">
     </h2>
  
     <h4 field="date">
     </h4>
  
    </li>
  
    <li>
     <h2 field="name">
     </h2>
  
     <h4 field="date">
     </h4>
  
    </li>
  
    <li>
     <h2 field="name">
     </h2>
  
     <h4 field="date">
     </h4>
  
    </li>
  
    <li>
     <h2 field="name">
     </h2>
  
     <h4 field="date">
     </h4>
  
    </li>
  
    <li>
     <h2 field="name">
     </h2>
  
     <h4 field="date">
     </h4>
  
    </li>
  
    <li>
     <h2 field="name">
     </h2>
  
     <h4 field="date">
     </h4>
  
    </li>
  
    <li>
     <h2 field="name">
     </h2>
  
     <h4 field="date">
     </h4>
  
    </li>
  
    <li>
     <h2 field="name">
     </h2>
  
     <h4 field="date">
     </h4>
  
    </li>
  
   </ol>
  
  </div>

• slashdot

  <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>

• timer

  <div properties="triggers_in_milliseconds:10000"
       script="http://js.constructibl.es/specs/FourPortCountingTimer.js"
       id="timer"
       spec="F77808F78DA04568AB3E4A9BAA90B30F">
  </div>

Technical Specifications

Inputs

__power__

Outputs

No outputs are specified.