Team:Waterloo/TemplatePage

From 2014.igem.org

(Difference between revisions)
 
(13 intermediate revisions not shown)
Line 4: Line 4:
<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>
-
<!--Back to top button-->
 
-
<a href="#TOP"><img id="toTop" src="https://static.igem.org/mediawiki/2014/a/ad/Waterloo_to-top-button.png"></a>
 
-
<h1>Heading</h1>
+
<h1>Heading</h1>
-
<!--Slideshow or image here-->
+
<!--Slideshow or image here-->
-
<div id="imgBox">
+
<div id="imgBox">
-
+
 
-
</div>
+
</div>
-
<!--Content below images-->
+
<!--Content below images-->
-
<div class="content">
+
<div class="content">
-
<ul class="tabs">
+
  <ul class="tabs">
-
<li><a class="anchor" href="#view0">Instructions Tab</a></li>
+
    <li><a href="#view0">Instructions Tab</a></li>
-
<li><a class="anchor" href="#view1">Tab 1</a></li>
+
    <li><a href="#view1">Tab 1</a></li>
-
<li><a class="anchor" href="#view2">Tab 2</a></li>
+
    <li><a href="#view2">Tab 2</a></li>
-
<li><a class="anchor" href="#view3">Tab 3</a></li>
+
    <li><a href="#view3">Tab 3</a></li>
-
</ul>
+
  </ul>
-
<div class="tabcontents">
+
  <div class="tabcontents">
-
                        <div id="view0">
+
    <div class="anchor" id="view0">
-
<div class="subheading">Instructions for Tabs<br><br></div>
+
      <h2>Instructions for Tabs</h2>
-
In the file, use the 'find' function to search for "Content below images." Below this line, the code for the different tabs begin.
+
      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.
+
      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'
+
-
</div>
+
-
<div id="view1">
+
-
<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>
+
-
+
-
<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));
+
-
  }
+
-
}
+
-
 
+
-
$(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/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"