Team:Waterloo/TemplatePage

From 2014.igem.org

(Difference between revisions)
 
(20 intermediate revisions not shown)
Line 1: Line 1:
-
{{Template:Team:Waterloo/CSS/baseWiki}}
+
{{Team:Waterloo/CSS/baseWiki}}
-
{{Template:Team:Waterloo/CSS/WaterlooTeam}}
+
{{Team:Waterloo/CSS/WaterlooTeam}}
 +
{{Team:Waterloo/TopBar}}
<html>
<html>
-
<title>Waterloo iGem 2014 Team</title>
 
-
<meta charset="UTF-8">
 
<style>
<style>
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear {display: none;} /*-- hides default wiki settings --*/
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear {display: none;} /*-- hides default wiki settings --*/
</style>
</style>
-
<div id="topbar">
+
<h1>Heading</h1>
-
<!--Headings shown on a large screen-->
+
-
<ul id="headings">
+
-
<li><img src="https://static.igem.org/mediawiki/2014/4/49/Waterloo_Igem-logo-small.png" height=50px></li>
+
-
<li><a class="barheading" onclick="toggleNavPanel('subs1')">Project <span class="navarrow">&#9662;</span></a></li>
+
-
<li><a class="barheading">Lab Book</a></li>
+
-
<li><a class="barheading">Outreach</a></li>
+
-
<li><a class="barheading">Accomplishments</a></li>
+
-
<li><a class="barheading" href="file:///home/lisaw/Desktop/Website/WaterlooTeam.html">Team</a></li>
+
-
<li><a class="barheading">Sponsors</a></li>
+
-
<li><a href="https://2014.igem.org" target="_blank">
+
-
<img src="https://static.igem.org/mediawiki/2014/d/d9/Waterloo_Igemlogo_whiteletters_grey.png" style="height: 50px;"></a></li>
+
-
</ul>
+
-
<div class="sections_panel" id="subs1" style="width: 300px;">
+
-
<div>
+
-
<ul class="projSubs">
+
-
<li><a class="subheading">Overview</a></li>
+
-
<li><a class="subheading">YFP Integration</a></li>
+
-
<li><a class="subheading">CRISPRi</a></li>
+
-
<li><a class="subheading">sRNA</a></li>
+
-
<li><a class="subheading">Conjugation</a></li>
+
-
<li><a class="subheading">Antibiotic Silencing</a></li>
+
-
<li><a class="subheading">Appendix</a></li>
+
-
</ul>
+
-
</div>
+
-
</div>
+
-
<!--Headings shown on a small screen-->
+
-
<ul id="shortheadings">
+
-
<li style="width: 20%"><img src="https://static.igem.org/mediawiki/2014/4/49/Waterloo_Igem-logo-small.png" height=50px></li>
+
-
<li style="width: 40%"><a class="barheading" onclick="toggleNavPanel('subs2')" style="line-height:150%;">Navigate <span class="navarrow">&#9662;</span></a></li>
+
-
<li style="width: 40%"><table style="margin: auto; margin-right: 10%;">
+
-
<tr><td><a href="https://www.facebook.com/WaterlooiGEM" target="_blank">
+
-
<img class="icons" id="fb" src="https://static.igem.org/mediawiki/2014/6/60/Waterloo_Facebook_black.png"
+
-
onmouseover="onHover(this.id,'https://static.igem.org/mediawiki/2014/f/f3/Waterloo_Facebook_colour.png')"
+
-
onmouseout="offHover(this.id,'https://static.igem.org/mediawiki/2014/6/60/Waterloo_Facebook_black.png')"/>
+
-
</a></td>
+
-
<td><a href="https://twitter.com/Waterloo_iGEM" target="_blank">
+
-
<img class="icons" id="tw" src="https://static.igem.org/mediawiki/2014/5/56/Waterloo_Twitter_black_64-03.png"
+
-
onmouseover="onHover(this.id,'https://static.igem.org/mediawiki/2014/8/84/Waterloo_Twitter_colour_64-03.png')"
+
-
onmouseout="offHover(this.id,'https://static.igem.org/mediawiki/2014/5/56/Waterloo_Twitter_black_64-03.png')"/>
+
-
</a></td>
+
-
<td><a href="http://www.youtube.com/user/WaterlooiGEM?feature=watch" target="_blank">
+
-
<img class="icons" id="yt" src="https://static.igem.org/mediawiki/2014/b/bd/Waterloo_Youtube_black.png"
+
-
onmouseover="onHover(this.id,'https://static.igem.org/mediawiki/2014/f/f0/Waterloo_Youtube_colour.png')"
+
-
onmouseout="offHover(this.id,'https://static.igem.org/mediawiki/2014/b/bd/Waterloo_Youtube_black.png')"/>
+
-
</a></td>
+
-
<td>
+
-
<a href="https://2014.igem.org" target="_blank">
+
-
<img src="https://static.igem.org/mediawiki/2014/d/d9/Waterloo_Igemlogo_whiteletters_grey.png" style="height: 50px;"></a>
+
-
</td></tr>
+
-
</table></li>
+
-
</ul>
+
-
<div class="sections_panel" id="subs2" style="width: 500px;">
+
-
<div>
+
-
<table id="navMenu">
+
-
<tr>
+
-
<td rowspan=5><div class="navItems" style="margin-left: 0px;">Project</div>
+
-
<ul class="projSubs">
+
-
<li><a class="subheading">Overview</a></li>
+
-
<li><a class="subheading">YFP Integration</a></li>
+
-
<li><a class="subheading">CRISPRi</a></li>
+
-
<li><a class="subheading">sRNA</a></li>
+
-
<li><a class="subheading">Conjugation</a></li>
+
-
<li><a class="subheading">Antibiotic Silencing</a></li>
+
-
<li><a class="subheading">Appendix</a></li>
+
-
</ul></td>
+
-
<td><div class="navItems">Lab Book</div></td>
+
-
</tr>
+
-
<tr>
+
-
<td><div class="navItems">Outreach</div></td>
+
-
</tr>
+
-
<tr>
+
-
<td><div class="navItems">Accomplishments</div></td>
+
-
</tr>
+
-
<tr>
+
-
<td><div class="navItems">Team</div></td>
+
-
</tr>
+
-
<tr>
+
-
<td><div class="navItems">Sponsors</div></td>
+
-
</tr>
+
-
</table>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
<!--Back to top button-->
+
-
<a name="TOP"></a>
+
-
<a href="#TOP"><img class="toTop" src="https://static.igem.org/mediawiki/2014/a/ad/Waterloo_to-top-button.png"></a>
+
-
<div class="empty">
+
-
+
-
</div>
+
-
<div class="heading">
+
<!--Slideshow or image here-->
-
Heading
+
<div id="imgBox">
-
</div>
+
 
-
 
+
</div>
-
<!--Slideshow or image here-->
+
<!--Content below images-->
-
<div id="imgBox">
+
<div class="content">
-
+
  <ul class="tabs">
-
</div>
+
    <li><a href="#view0">Instructions Tab</a></li>
-
<!--Content below images-->
+
    <li><a href="#view1">Tab 1</a></li>
-
<div class="content">
+
    <li><a href="#view2">Tab 2</a></li>
-
<ul class="tabs">
+
    <li><a href="#view3">Tab 3</a></li>
-
<li><a href="#view1">Features</a>
+
  </ul>
-
</li> <li><a href="#view2">How to Use</a></li>
+
  <div class="tabcontents">
-
<li><a href="#view3">Source Code</a></li>
+
    <div class="anchor" id="view0">
-
</ul>
+
      <h2>Instructions for Tabs</h2>
-
<div class="tabcontents">
+
       In the file, use the 'find' function to search for "Content below images." Below this line, the code for the different tabs begin.
-
<div id="view1">
+
      Between the 'ul' tags, there is a list with the tab names. Change the tabs to list them in order. Under the '/ul' tag and within the 'tabcontents' div, include other divs with the ids in the list of tabs. Between these divs, add the information that you would like displayed when the corresponding tab is selected.
-
<div class="subheading">Subheading<br><br></div>
+
-
content 1 <br>
+
-
content 1 <br>
+
-
<iframe src="http://mapsengine.google.com/map/embed?mid=ztrZ1qkPPbZo.kq_MwB1YDonc" width="640" height="480"></iframe>
+
-
content 1 <br>
+
-
content 1 <br>
+
-
content 1 <br>
+
-
content 1 <br>
+
-
content 1 <br>
+
-
content 1 <br>
+
-
content 1 <br>
+
-
content 1 <br>
+
-
</div>
+
-
<div id="view2">
+
-
<div class="subheading">Subheading<br><br></div>
+
-
content 2 <br>
+
-
content 2 <br>
+
-
content 2 <br>
+
-
content 2 <br>
+
-
content 2 <br>
+
-
content 2 <br>
+
-
content 2 <br>
+
-
content 2 <br>
+
-
content 2 <br>
+
-
content 2 <br>
+
-
content 2 <br>
+
-
content 2 <br>
+
-
content 2 <br>
+
-
content 2 <br>
+
-
content 2 <br>
+
-
content 2 <br>
+
-
content 2 <br>
+
-
content 2 <br>
+
-
content 2 <br>
+
-
content 2 <br>
+
-
content 2 <br>
+
-
content 2 <br>
+
-
content 2 <br>
+
-
content 2 <br>
+
-
content 2 <br>
+
-
content 2 <br>
+
-
content 2 <br>
+
-
content 2 <br>
+
-
content 2 <br>
+
-
content 2 <br>
+
-
content 2 <br>
+
-
content 2 <br>
+
-
content 2 <br>
+
-
content 2 <br>
+
-
content 2 <br>
+
-
content 2 <br>
+
-
content 2 <br>
+
-
content 2 <br>
+
-
content 2 <br>
+
-
content 2 <br>
+
-
content 2 <br>
+
-
content 2 <br>
+
-
content 2 <br>
+
-
content 2 <br>
+
-
</div>
+
-
<div id="view3">
+
-
<div class="subheading">Subheading<br><br></div>
+
-
content 3 <br>
+
-
content 3 <br>
+
-
content 3 <br>
+
-
content 3 <br>
+
-
content 3 <br>
+
-
content 3 <br>
+
-
content 3 <br>
+
-
content 3 <br>
+
-
content 3 <br>
+
-
content 3 <br>
+
-
content 3 <br>
+
-
content 3 <br>
+
-
</div>
+
-
</div>
+
-
 
+
-
<!--Wiki footer-->
+
-
<div class="footerBorder">
+
-
<div id="footer">
+
-
<img class="logoFoot" src="https://static.igem.org/mediawiki/2014/4/49/Waterloo_Igem-logo-small.png">
+
-
<table style="margin-left: 100px; width: 157px; text-align: center;">
+
-
<tr><td><a href="https://www.facebook.com/WaterlooiGEM" target="_blank">
+
-
<img class="icons" src="https://static.igem.org/mediawiki/2014/f/f3/Waterloo_Facebook_colour.png">
+
-
</a></td>
+
-
<td><a href="https://twitter.com/Waterloo_iGEM" target="_blank">
+
-
<img class="icons" src="https://static.igem.org/mediawiki/2014/8/84/Waterloo_Twitter_colour_64-03.png">
+
-
</a></td>
+
-
<td><a href="http://www.youtube.com/user/WaterlooiGEM?feature=watch" target="_blank">
+
-
<img class="icons" src="https://static.igem.org/mediawiki/2014/f/f0/Waterloo_Youtube_colour.png">
+
-
</a></td>
+
-
</tr>
+
-
</table>
+
-
<div id="siteMap1">
+
-
<ul class= "flist">
+
-
<li class= "footHeadings">Project</li>
+
-
<li>Overview</li>
+
-
<li>YFP Integration</li>
+
-
<li>CRISPRi</li>
+
-
<li>sRNA</li>
+
-
<li>Conjugation</li>
+
-
<li>Antibiotic Silencing</li>
+
-
<li>Appendix</li>
+
-
</ul>
+
-
</div>
+
-
<div id="siteMap2">
+
-
<ul class= "flist">
+
-
<li class= "footHeadings">Lab Book</li>
+
-
<li style="height: 3px;"></li>
+
-
<li class= "footHeadings">Outreach</li>
+
-
<li>SJAM</li>
+
-
<li>Shad Valley</li>
+
-
<li>Youtube Lab Series</li>
+
-
<li style="height: 10px;"></li>
+
-
<li class= "footHeadings">Team</li>
+
-
</ul>
+
-
</div>
+
-
<div id="siteMap3">
+
-
<ul class= "flist">
+
-
<li class= "footHeadings">Accomplishments</li>
+
-
<li>Judging</li>
+
-
<li>Biobricks</li>
+
-
<li>Collaborations</li>
+
-
<li>Attributions</li>
+
-
<li style="height: 10px;"></li>
+
-
<li class= "footHeadings">Sponsors</li>
+
-
</ul>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
+
-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+
-
<script type="text/javascript">
+
-
 
+
-
//Align headings
+
-
function alignHeadings(){
+
-
  var remainingWidth = $("div#topbar").width();
+
-
  if (remainingWidth <= "1000"){
+
-
    $("ul#headings >li").css("display", "none");
+
-
    $("ul#shortheadings >li").css("display", "block");
+
-
    //console.log("working");
+
-
  }
+
-
  else {
+
-
    var allheadings = $("ul#headings >li");
+
-
    allheadings.css("display", "block");
+
-
    $("ul#shortheadings >li").css("display", "none");
+
-
    allheadings.width(remainingWidth / (allheadings.length + 0.5))
+
-
       .css({"text-align":"center","line-height":"150%"});
+
-
    //$("button").css("width", allheadings.width());
+
-
    console.log($(remainingWidth));
+
-
  }
+
-
}
+
-
 
+
-
 
+
-
(function(){var g=function(a){if(a&&a.stopPropagation)a.stopPropagation();else window.event.cancelBubble=true;var b=a?a:window.event;b.preventDefault&&b.preventDefault()},d=function(a,c,b){if(a.addEventListener)a.addEventListener(c,b,false);else a.attachEvent&&a.attachEvent("on"+c,b)},a=function(c,a){var b=new RegExp("(^| )"+a+"( |$)");return b.test(c.className)?true:false},j=function(b,c,d){if(!a(b,c))if(b.className=="")b.className=c;else if(d)b.className=c+" "+b.className;else b.className+=" "+c},h=function(a,b){var c=new RegExp("(^| )"+b+"( |$)");a.className=a.className.replace(c,"$1");a.className=a.className.replace(/ $/,"")},e=function(){var b=window.location.pathname;if(b.indexOf("/")!=-1)b=b.split("/");var a=b[b.length-1]||"root";if(a.indexOf(".")!=-1)a=a.substring(0,a.indexOf("."));if(a>20)a=a.substring(a.length-19);return a},c="mi"+e(),b=function(b,a){this.g(b,a)};b.prototype={h:function(){var b=new RegExp(c+this.a+"=(\\d+)"),a=document.cookie.match(b);return a?a[1]:this.i()},i:function(){for(var b=0,c=this.b.length;b<c;b++)if(a(this.b[b].parentNode,"selected"))return b;return 0},j:function(b,d){var c=document.getElementById(b.TargetId);if(!c)return;this.l(c);for(var a=0;a<this.b.length;a++)if(this.b[a]==b){j(b.parentNode,"selected");d&&this.d&&this.k(this.a,a)}else h(this.b[a].parentNode,"selected")},k:function(a,b){document.cookie=c+a+"="+b+"; path=/"},l:function(b){for(var a=0;a<this.c.length;a++)this.c[a].style.display=this.c[a].id==b.id?"block":"none"},m:function(){this.c=[];for(var c=this,a=0;a<this.b.length;a++){var b=document.getElementById(this.b[a].TargetId);if(b){this.c.push(b);d(this.b[a],"click",function(b){var a=this;if(a===window)a=window.event.srcElement;c.j(a,1);g(b);return false})}}},g:function(f,h){this.a=h;this.b=[];for(var e=f.getElementsByTagName("a"),i=/#([^?]+)/,a,b,c=0;c<e.length;c++){b=e[c];a=b.getAttribute("href");if(a.indexOf("#")==-1)continue;else{var d=a.match(i);if(d){a=d[1];b.TargetId=a;this.b.push(b)}else continue}}var g=f.getAttribute("data-persist")||"";this.d=g.toLowerCase()=="true"?1:0;this.m();this.n()},n:function(){var a=this.d?parseInt(this.h()):this.i();if(a>=this.b.length)a=0;this.j(this.b[a],0)}};var k=[],i=function(e){var b=false;function a(){if(b)return;b=true;setTimeout(e,4)}if(document.addEventListener)document.addEventListener("DOMContentLoaded",a,false);else if(document.attachEvent){try{var f=window.frameElement!=null}catch(g){}if(document.documentElement.doScroll&&!f){function c(){if(b)return;try{document.documentElement.doScroll("left");a()}catch(d){setTimeout(c,10)}}c()}document.attachEvent("onreadystatechange",function(){document.readyState==="complete"&&a()})}d(window,"load",a)},f=function(){for(var d=document.getElementsByTagName("ul"),c=0,e=d.length;c<e;c++)a(d[c],"tabs")&&k.push(new b(d[c],c))};i(f);return{}})
+
-
 
+
-
 
+
-
$(document).ready(alignHeadings);
+
-
$(window).resize(alignHeadings);
+
-
</script>
+
 +
      Note: The epidemiology map is shown in 'Tab 1'
 +
    </div>
 +
    <div class="anchor" id="view1">
 +
      <h2>Tab 1</h2>
 +
      <p>
 +
        content 1 <br>
 +
        content 1 <br>
 +
        <iframe src="http://mapsengine.google.com/map/embed?mid=ztrZ1qkPPbZo.kq_MwB1YDonc" width="640" height="480"></iframe>
 +
        content 1 <br>
 +
        content 1 <br>
 +
        content 1 <br>
 +
        content 1 <br>
 +
        content 1 <br>
 +
        content 1 <br>
 +
        content 1 <br>
 +
        content 1 <br>
 +
      </p>
 +
    </div>
 +
    <div class="anchor" id="view2">
 +
      <h2>Tab 2</h2>
 +
      <p>
 +
        content 2 <br>
 +
        content 2 <br>
 +
        content 2 <br>
 +
        content 2 <br>
 +
        content 2 <br>
 +
        content 2 <br>
 +
        content 2 <br>
 +
        content 2 <br>
 +
        content 2 <br>
 +
        content 2 <br>
 +
        content 2 <br>
 +
        content 2 <br>
 +
        content 2 <br>
 +
        content 2 <br>
 +
        content 2 <br>
 +
        content 2 <br>
 +
        content 2 <br>
 +
        content 2 <br>
 +
        content 2 <br>
 +
        content 2 <br>
 +
        content 2 <br>
 +
        content 2 <br>
 +
        content 2 <br>
 +
        content 2 <br>
 +
        content 2 <br>
 +
        content 2 <br>
 +
        content 2 <br>
 +
        content 2 <br>
 +
        content 2 <br>
 +
        content 2 <br>
 +
        content 2 <br>
 +
        content 2 <br>
 +
        content 2 <br>
 +
        content 2 <br>
 +
        content 2 <br>
 +
        content 2 <br>
 +
        content 2 <br>
 +
        content 2 <br>
 +
        content 2 <br>
 +
        content 2 <br>
 +
        content 2 <br>
 +
        content 2 <br>
 +
        content 2 <br>
 +
        content 2 <br>
 +
      </p>
 +
    </div>
 +
    <div class="anchor" id="view3">
 +
      <h2>Tab 3</h2>
 +
      <p>
 +
        content 3 <br>
 +
        content 3 <br>
 +
        content 3 <br>
 +
        content 3 <br>
 +
        content 3 <br>
 +
        content 3 <br>
 +
        content 3 <br>
 +
        content 3 <br>
 +
        content 3 <br>
 +
        content 3 <br>
 +
        content 3 <br>
 +
        content 3 <br>
 +
      </p>
 +
    </div>
 +
  </div>
 +
</div>
</html>
</html>
 +
{{Template:Team:Waterloo/Footbar}}
{{Template:Team:Waterloo/JS/WaterlooTeam}}
{{Template:Team:Waterloo/JS/WaterlooTeam}}
{{Template:Team:Waterloo/JS/baseWiki}}
{{Template:Team:Waterloo/JS/baseWiki}}

Latest revision as of 01:17, 17 October 2014

Heading

Instructions for Tabs

In the file, use the 'find' function to search for "Content below images." Below this line, the code for the different tabs begin. Between the 'ul' tags, there is a list with the tab names. Change the tabs to list them in order. Under the '/ul' tag and within the 'tabcontents' div, include other divs with the ids in the list of tabs. Between these divs, add the information that you would like displayed when the corresponding tab is selected. Note: The epidemiology map is shown in 'Tab 1'

Tab 1

content 1
content 1
content 1
content 1
content 1
content 1
content 1
content 1
content 1
content 1

Tab 2

content 2
content 2
content 2
content 2
content 2
content 2
content 2
content 2
content 2
content 2
content 2
content 2
content 2
content 2
content 2
content 2
content 2
content 2
content 2
content 2
content 2
content 2
content 2
content 2
content 2
content 2
content 2
content 2
content 2
content 2
content 2
content 2
content 2
content 2
content 2
content 2
content 2
content 2
content 2
content 2
content 2
content 2
content 2
content 2

Tab 3

content 3
content 3
content 3
content 3
content 3
content 3
content 3
content 3
content 3
content 3
content 3
content 3

Retrieved from "http://2014.igem.org/Team:Waterloo/TemplatePage"