NobelistsHTML

From SIMILE Widgets
Jump to: navigation, search

Final Nobelists Sample Code

Here's the final code for the sample file nobelists.html. See a live demo of the Nobelists exhibit on the demo server.

<html>
  <head>
    <title>SIMILE Widgets | Exhibit | Examples | MIT Nobel Prize Winners</title>

    <link href="nobelists.js" type="application/json" rel="exhibit-data" />
<script src="http://api.simile-widgets.org/exhibit/3.0.0rc1/exhibit-api.js"></script>
    <script src="http://api.simile-widgets.org/exhibit/3.0.0rc1/extensions/time/time-extension.js?bundle=false"></script>    
    <style>
        body {
          font-size: 75%;
          margin: 0;
          padding: 0;
          font-family: "Lucida Grande","Tahoma","Helvetica","Arial",sans-serif;
          color: #222;
        }
        table, tr, td {
            font-size: inherit;
        }
        tr, td {
            vertical-align: top;
        }
        img, a img {
            border: none;
        }
        #main-content { background: white; }
        #title-panel { padding: 0.25in 0.5in; }
        #top-panels {
            padding:        0.5em 0.5in;
            border-top:     1px solid #BCB79E;
            border-bottom:  1px solid #BCB79E;
            background:     #FBF4D3;
        }
        
        .exhibit-tileView-body { list-style: none; }
        .exhibit-collectionView-group-count { display: none; }
        
        table.nobelist {
            border:     1px solid #ddd;
            padding:    0.5em;
            margin:     0.5em 0;
            display:    block;
        }
        div.name {
            font-weight: bold;
            font-size:   120%;
        }
        .relationship {
            color:  #888;
        }
        
        div.nobelist-thumbnail {
            float:      left;
            width:      13em;
            height:     10em;
            border:     1px solid #BCB79E;
            background: #F0FFF0;
            padding:    1em;
            margin:     0.5em;
            text-align: center;
        }
        div.nobelist-timeline-lens {
            padding:    1em;
            text-align: center;
        }
    </style>
    <script type="text/javascript">
        function deceaseRowStyler(itemID, database, tr, rowIndex) {
            var deceased = database.getObject(itemID, "deceased");
            if (deceased == "yes") {
                tr.style.backgroundColor = "#f88";
            }
        }
    </script>
  </head> 
  <body>
    <div id="main-content">
        <div id="title-panel">
          <h1>63 MIT-related Nobel Prize Winners</h1>
          <p>The information within this page has been retrieved from
          <a href="http://web.mit.edu/newsoffice/special/nobels.html" target="_blank">this MIT official source</a> while the thumbnails are included from <a href="http://nobelprize.org/" target="_blank">Nobelprize.org</a>. Here is the <a href="nobelists.js" target="_blank">Exhibit JSON data file</a>.
          </p>
        </div>
    
        <div id="top-panels">
            <table width="100%"><tr>
                <td><div ex:role="facet" ex:expression=".discipline" ex:facetLabel="Discipline"></div></td>
                <td><div ex:role="facet" ex:expression=".relationship" ex:facetLabel="Relationship"></div></td>
                <td><div ex:role="facet" ex:expression=".shared" ex:facetLabel="Shared?"></div></td>
                <td><div ex:role="facet" ex:expression=".deceased" ex:facetLabel="Deceased?"></div></td>
            </tr></table>
        </div>
        <div ex:role="viewPanel" style="padding: 1em 0.5in;">
            <table ex:role="lens" class="nobelist" style="display: none;"><tr>
                <td><img ex:src-content=".imageURL" /></td>
                <td>
                    <div ex:content=".label" class="name"></div>
                    <div>
                        <span ex:content=".discipline" class="discipline"></span>, 
                        <i ex:content=".nobel-year"></i>
                    </div>
                    <div ex:if-exists=".co-winner" class="co-winners">
                        Co-winners: <span ex:content=".co-winner"></span>
                    </div>
                    <div ex:content=".relationship-detail" class="relationship"></div>
                </td>
            </tr></table>
        
            <div ex:role="view"
                ex:viewClass="Thumbnail"
                ex:showAll="true"
                ex:orders=".discipline"
                ex:possibleOrders=".label, .last-name, 
.discipline, .relationship, .shared, 
.deceased, .nobel-year">
                <div ex:role="lens" class="nobelist-thumbnail" 
style="display: none;">
                    <img ex:src-content=".imageURL" />
                    <div><span ex:content=".label"></span></div>
                    <div>
                        <span ex:content=".discipline" class="discipline"></span>, 
                        <span ex:content=".nobel-year" class="year"></span>
                    </div>
                </div>
            </div>
            <div ex:role="view"
                ex:label="Details"
                ex:viewClass="Tile"
                ex:showAll="true"
                ex:orders=".discipline, .nobel-year"
                ex:possibleOrders=".label, .last-name, .discipline, .relationship, .shared, .deceased, .nobel-year">
            </div>
            <div ex:role="view"
                ex:viewClass="Timeline"
                ex:start=".nobel-year"
                ex:colorKey=".discipline"
                ex:bubbleWidth="150"
                ex:bubbleHeight="150">
                <div ex:role="lens" class="nobelist-timeline-lens" style="display: none;">
                    <img ex:src-content=".imageURL" />
                    <div><span ex:content=".label"></span></div>
                    <div>
                        <span ex:content=".discipline" class="discipline"></span>, 
                        <span ex:content=".nobel-year" class="year"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </body>
</html>
Personal tools
Namespaces
Variants
Actions
Navigation
Toolbox