Alexander Dahl avatar Alexander Dahl committed 06d4f7a Draft

start of chapter 08

Comments (0)

Files changed (4)

+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
+<head>
+    <title>2010 Race Finishers</title>
+    <link href="styles/page295.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+    <h2>2010 Race Finishers!</h2>
+
+    <div id="main">
+        <ul class="idTabs">
+            <li><a href="#about">About the Race</a></li>
+            <li><a href="#finishers">All Finishers</a></li>
+        </ul>
+        <div id="about">
+            <h4>About the race</h4>
+            <p>This race is to raise awareness of something or other!</p>
+        </div>
+        <div id="finishers">
+            <h4>All Finishers</h4>
+            <ul id="finishers_all">
+                <li>Name: Bob Hope. Time: 25:30</li>
+                <li>Name: John Smith. Time: 25:31</li>
+                <li>Name: Jane Smith. Time:  25:44</li>
+            </ul>
+        </div>
+    </div>
+
+    <h4>Congratulations to all our finishers!</h4>
+    <p>Last Updated: <em id="updatedTime"></em></p>
+
+    <script src="scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
+    <script src="scripts/page295.js" type="text/javascript"></script>
+    <script src="scripts/jquery.idTabs.min.js" type="text/javascript"></script>
+</body>
+</html>

scripts/jquery.idTabs.min.js

+/* idTabs ~ Sean Catchpole - Version 2.2 - MIT/GPL */
+(function(){var dep={"jQuery":"http://code.jquery.com/jquery-latest.min.js"};var init=function(){(function($){$.fn.idTabs=function(){var s={};for(var i=0;i<arguments.length;++i){var a=arguments[i];switch(a.constructor){case Object:$.extend(s,a);break;case Boolean:s.change=a;break;case Number:s.start=a;break;case Function:s.click=a;break;case String:if(a.charAt(0)=='.')s.selected=a;else if(a.charAt(0)=='!')s.event=a;else s.start=a;break;}}
+if(typeof s['return']=="function")
+s.change=s['return'];return this.each(function(){$.idTabs(this,s);});}
+$.idTabs=function(tabs,options){var meta=($.metadata)?$(tabs).metadata():{};var s=$.extend({},$.idTabs.settings,meta,options);if(s.selected.charAt(0)=='.')s.selected=s.selected.substr(1);if(s.event.charAt(0)=='!')s.event=s.event.substr(1);if(s.start==null)s.start=-1;var showId=function(){if($(this).is('.'+s.selected))
+return s.change;var id="#"+this.href.split('#')[1];var aList=[];var idList=[];$("a",tabs).each(function(){if(this.href.match(/#/)){aList.push(this);idList.push("#"+this.href.split('#')[1]);}});if(s.click&&!s.click.apply(this,[id,idList,tabs,s]))return s.change;for(i in aList)$(aList[i]).removeClass(s.selected);for(i in idList)$(idList[i]).hide();$(this).addClass(s.selected);$(id).show();return s.change;}
+var list=$("a[href*='#']",tabs).unbind(s.event,showId).bind(s.event,showId);list.each(function(){$("#"+this.href.split('#')[1]).hide();});var test=false;if((test=list.filter('.'+s.selected)).length);else if(typeof s.start=="number"&&(test=list.eq(s.start)).length);else if(typeof s.start=="string"&&(test=list.filter("[href*='#"+s.start+"']")).length);if(test){test.removeClass(s.selected);test.trigger(s.event);}
+return s;}
+$.idTabs.settings={start:0,change:false,click:null,selected:".selected",event:"!click"};$.idTabs.version="2.2";$(function(){$(".idTabs").idTabs();});})(jQuery);}
+var check=function(o,s){s=s.split('.');while(o&&s.length)o=o[s.shift()];return o;}
+var head=document.getElementsByTagName("head")[0];var add=function(url){var s=document.createElement("script");s.type="text/javascript";s.src=url;head.appendChild(s);}
+var s=document.getElementsByTagName('script');var src=s[s.length-1].src;var ok=true;for(d in dep){if(check(this,d))continue;ok=false;add(dep[d]);}if(ok)return init();add(src);})();

scripts/page295.js

+function getTime(){
+    var a_p = "";
+    var d = new Date();
+    var curr_hour = d.getHours();
+
+    (curr_hour < 12) ? a_p = "AM" : a_p = "PM";
+    (curr_hour == 0) ? curr_hour = 12 : curr_hour = curr_hour;
+    (curr_hour > 12) ? curr_hour = curr_hour - 12 : curr_hour = curr_hour;
+
+    var curr_min = d.getMinutes().toString();
+    var curr_sec = d.getSeconds().toString();
+
+    if (curr_min.length == 1) { curr_min = "0" + curr_min; }
+    if (curr_sec.length == 1) { curr_sec = "0" + curr_sec; }
+
+    $('#updatedTime').html(curr_hour + ":" + curr_min + ":" + curr_sec + " " + a_p );
+}
+
+$(document).ready(function(){
+    getTime();
+});

styles/page295.css

+body {
+    background-color:   #000;
+    color:              white;
+}
+
+/* Style for tabs */
+#main {
+    background: #181818;
+    color:      #111;
+    padding:    15px 20px;
+    width:      500px;
+    border:     1px solid #222;
+    margin:     8px auto;
+}
+
+#main > li, #main > ul > li {
+    list-style: none;
+    float:      left;
+}
+
+#main ul a {
+    display:            block;
+    padding:            6px 10px;
+    text-decoration:    none!important;
+    margin:             1px;
+    margin-left:        0;
+    color:              #FFF;
+    background:         #444;
+}
+
+#main ul a:hover {
+    color:      #FFF;
+    background: #111;
+}
+
+#main ul a.selected {
+    margin-bottom:  0;
+    color:          #000;
+    background:     snow;
+    border-bottom:  1px solid snow;
+    cursor:         default;
+}
+
+#main div {
+    padding:        10px 10px 8px 10px;
+    padding-top:    3px;
+    margin-top:     -15px;
+    clear:          left;
+    background:     snow;
+    height:         300px ;
+}
+
+#main div a {
+    color:          #000;
+    font-weight:    bold;
+}
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.