Team:Waterloo/TemplatePage
From 2014.igem.org
Line 4: | Line 4: | ||
<html> | <html> | ||
- | |||
- | |||
<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> | ||
- | |||
- | |||
- | + | <h1>Heading</h1> | |
- | + | <!--Slideshow or image here--> | |
- | + | <div id="imgBox"> | |
- | + | ||
- | + | </div> | |
- | + | <!--Content below images--> | |
- | + | <div class="content"> | |
- | + | <ul class="tabs"> | |
- | + | <li><a href="#view0">Instructions Tab</a></li> | |
- | + | <li><a href="#view1">Tab 1</a></li> | |
- | + | <li><a href="#view2">Tab 2</a></li> | |
- | + | <li><a href="#view3">Tab 3</a></li> | |
- | + | </ul> | |
- | + | <div class="tabcontents"> | |
- | + | <div class="anchor" id="view0"> | |
- | + | <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. | |
- | + | 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 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> | |
- | + | ||
- | + | ||
- | + | ||
- | //Align headings | + | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> |
- | function alignHeadings(){ | + | <script type="text/javascript"> |
+ | |||
+ | //Align headings | ||
+ | function alignHeadings(){ | ||
var remainingWidth = $("div#topbar").width(); | var remainingWidth = $("div#topbar").width(); | ||
var allheadings = $("ul#headings >li"); | var allheadings = $("ul#headings >li"); | ||
Line 130: | Line 126: | ||
allheadings.width(remainingWidth / (allheadings.length + 0.5)) | allheadings.width(remainingWidth / (allheadings.length + 0.5)) | ||
.css({"text-align":"center","line-height":"150%"}); | .css({"text-align":"center","line-height":"150%"}); | ||
- | } | + | } |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
+ | $(document).ready(alignHeadings); | ||
+ | $(window).resize(alignHeadings); | ||
+ | </script> | ||
</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}} |
Revision as of 00:08, 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