Team:UNAM-Genomics Mexico/Templates/Notebook
From 2011.igem.org
(Difference between revisions)
(7 intermediate revisions not shown) | |||
Line 2: | Line 2: | ||
<!-- | <!-- | ||
- | @VERSION 1.2. | + | @VERSION 1.2.3 |
@NAME /Templates/Notebook | @NAME /Templates/Notebook | ||
@DESC This is a wiki template designed to contain the background layout and menu of all our page. | @DESC This is a wiki template designed to contain the background layout and menu of all our page. | ||
--> | --> | ||
<head> | <head> | ||
- | + | <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> | |
+ | <link href="basic_layout.css" rel="stylesheet" type="text/css"></link> | ||
+ | <link href="basic_layout.js" rel="" type=""></link> | ||
+ | <title>UNAM-Genomics_Mexico</title> | ||
+ | <script type="text/javascript"> | ||
+ | |||
+ | var _gaq = _gaq || []; | ||
+ | _gaq.push(['_setAccount', 'UA-19624614-2']); | ||
+ | _gaq.push(['_trackPageview']); | ||
+ | |||
+ | (function() { | ||
+ | var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; | ||
+ | ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; | ||
+ | var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); | ||
+ | })(); | ||
+ | |||
+ | </script> | ||
+ | <script type="text/javascript"> | ||
+ | new Control.Tabs('tabs_example_three',{ | ||
+ | hover: true | ||
+ | }); | ||
+ | </script> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <script type="text/javascript"> | ||
+ | //Constants containing the menu cell positions (yeah, they're deffined as variables thx to IE) | ||
+ | var RowPositions = new Array( "cat", "link", "mar"); | ||
+ | var ColPositions = new Array( "alpha", "beta", "gamma", "delta", "epsilon", "zeta"); | ||
+ | var OddPositions = new Array( "alpha", "gamma", "epsilon"); | ||
+ | |||
+ | var currColEvenness = ""; | ||
+ | |||
+ | //Constants containing the images for the table cells (odd/even/active Category/Link/Margin) | ||
+ | // odd Cells | ||
+ | var oCCellBg = "url(https://static.igem.org/mediawiki/2011/9/95/Darkgrey_cardboard_332x196_UGM.png)"; | ||
+ | var oLCellBg = "url(https://static.igem.org/mediawiki/2011/e/e6/Stained_grey_cardboard_332x196_UGM.png)"; | ||
+ | var oMCellBg = "url(https://static.igem.org/mediawiki/2011/9/95/Darkgrey_cardboard_332x196_UGM.png)"; | ||
+ | // even Cells | ||
+ | var eCCellBg = "url(https://static.igem.org/mediawiki/2011/a/ae/Burnt_cardboard_332x196_UGM.png)"; | ||
+ | var eLCellBg = "url(https://static.igem.org/mediawiki/2011/6/66/Cardboard_332x196_UGM.png)"; | ||
+ | var eMCellBg = "url(https://static.igem.org/mediawiki/2011/a/ae/Burnt_cardboard_332x196_UGM.png)"; | ||
+ | // active Cells | ||
+ | var aCCellBg = "url(https://static.igem.org/mediawiki/2011/e/e8/Green_paper_UGM.png)"; | ||
+ | var aLCellBg = "url(https://static.igem.org/mediawiki/2011/0/03/Light_green_paper_UGM.png)"; | ||
+ | var aMCellBg = "url(https://static.igem.org/mediawiki/2011/e/e8/Green_paper_UGM.png)"; | ||
+ | |||
+ | //Receive a cell id and return it's prefix (which describes it's row) or it's suffix (it's col) | ||
+ | function GetCellRow(currentId){ | ||
+ | var pattern, i; | ||
+ | for( i=0; i < RowPositions.length; i++){ | ||
+ | pattern = new RegExp("^" + RowPositions[i]); | ||
+ | if( pattern.test(currentId)){ | ||
+ | return( RowPositions[i]); | ||
+ | } | ||
+ | } | ||
+ | return( false); | ||
+ | } | ||
+ | function GetCellCol(currentId){ | ||
+ | var pattern, i; | ||
+ | for( i=0; i < ColPositions.length; i++){ | ||
+ | pattern = new RegExp(ColPositions[i] + "$"); | ||
+ | if( pattern.test(currentId)){ | ||
+ | return( ColPositions[i]); | ||
+ | } | ||
+ | } | ||
+ | return( false); | ||
+ | } | ||
+ | |||
+ | //Classiffy column suffixes in odd or even suffixes | ||
+ | function ColEvenness(column){ | ||
+ | var i; | ||
+ | for( i=0; i < OddPositions.length; i++){ | ||
+ | if( column == OddPositions[i]){ | ||
+ | return( "odd"); | ||
+ | } | ||
+ | } | ||
+ | return( "even"); | ||
+ | } | ||
+ | |||
+ | //Function for lightening cells according to their position | ||
+ | function LightenCell(row, column){ | ||
+ | var cell = document.getElementById( row + column); | ||
+ | switch (row){ | ||
+ | case "cat": | ||
+ | cell.style.backgroundImage = aCCellBg; | ||
+ | break; | ||
+ | case "link": | ||
+ | cell.style.backgroundImage = aLCellBg; | ||
+ | break; | ||
+ | case "mar": | ||
+ | cell.style.backgroundImage = aMCellBg; | ||
+ | break; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | //Function to Lighten the current menu table column | ||
+ | function LightenMenu(currentCell){ | ||
+ | var column = GetCellCol( currentCell.id ); | ||
+ | LightenCell( "cat", column); | ||
+ | LightenCell("link", column); | ||
+ | LightenCell( "mar", column); | ||
+ | currColEvenness = ColEvenness(column); | ||
+ | } | ||
+ | |||
+ | //Function for darkening cells according to their position and evenness | ||
+ | function DarkenCell(row, column){ | ||
+ | var cell = document.getElementById( row + column); | ||
+ | if( currColEvenness == "odd"){ | ||
+ | switch (row){ | ||
+ | case "cat": | ||
+ | cell.style.backgroundImage = oCCellBg; | ||
+ | break; | ||
+ | case "link": | ||
+ | cell.style.backgroundImage = oLCellBg; | ||
+ | break; | ||
+ | case "mar": | ||
+ | cell.style.backgroundImage = oMCellBg; | ||
+ | break; | ||
+ | } | ||
+ | } else if( currColEvenness == "even"){ | ||
+ | switch (row){ | ||
+ | case "cat": | ||
+ | cell.style.backgroundImage = eCCellBg; | ||
+ | break; | ||
+ | case "link": | ||
+ | cell.style.backgroundImage = eLCellBg; | ||
+ | break; | ||
+ | case "mar": | ||
+ | cell.style.backgroundImage = eMCellBg; | ||
+ | break; | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | |||
+ | //Function to Darken the current menu table column | ||
+ | function DarkenMenu(currentCell){ | ||
+ | var column = GetCellCol( currentCell.id ); | ||
+ | DarkenCell( "cat", column); | ||
+ | DarkenCell("link", column); | ||
+ | DarkenCell( "mar", column); | ||
+ | currColEvenness = ""; | ||
+ | } | ||
+ | </script> | ||
<style> | <style> | ||
Line 40: | Line 184: | ||
color: #000000; | color: #000000; | ||
text-align:justify; | text-align:justify; | ||
- | line-height: | + | line-height: 1.2em; |
font-size:100%; | font-size:100%; | ||
font-family: "Maiandra GD", Garamond, "Tempus Sans ITC", Papyrus, "Kristen ITC", | font-family: "Maiandra GD", Garamond, "Tempus Sans ITC", Papyrus, "Kristen ITC", | ||
Line 55: | Line 199: | ||
color: #000000; | color: #000000; | ||
text-align:justify; | text-align:justify; | ||
- | line-height: | + | line-height: 1.2em; |
font-size:100%; | font-size:100%; | ||
font-family: "Maiandra GD", Garamond, "Tempus Sans ITC", Papyrus, "Kristen ITC", | font-family: "Maiandra GD", Garamond, "Tempus Sans ITC", Papyrus, "Kristen ITC", | ||
Line 89: | Line 233: | ||
***********************************/ | ***********************************/ | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
/******************************* | /******************************* | ||
Line 280: | Line 302: | ||
color: white; | color: white; | ||
} | } | ||
+ | .tabbed_images { | ||
+ | list-style:none; | ||
+ | margin:0; | ||
+ | padding:0; | ||
+ | clear:both; | ||
+ | } | ||
+ | |||
+ | .tabbed_images li { | ||
+ | list-style:none; | ||
+ | float:left; | ||
+ | margin:0; | ||
+ | padding:0; | ||
+ | } | ||
+ | |||
+ | .tabbed_images li a { | ||
+ | border:1px solid #ccc; | ||
+ | display:block; | ||
+ | float:left; | ||
+ | margin:0 10px 0 0; | ||
+ | } | ||
+ | |||
+ | .tabbed_images li a.active, | ||
+ | .tabbed_images li a:hover { | ||
+ | border:1px solid #333; | ||
+ | } | ||
+ | |||
+ | .tabbed_images li a img { | ||
+ | border:none; | ||
+ | padding:2px; | ||
+ | margin:0; | ||
+ | margin-bottom:-5px; | ||
+ | } | ||
+ | #image_1, | ||
+ | #image_2, | ||
+ | #image_3, | ||
+ | #image_4, | ||
+ | #image_5 { | ||
+ | margin-top:10px; | ||
+ | padding:2px; | ||
+ | border:1px solid #ccc; | ||
</style> | </style> | ||
</head> | </head> | ||
<body> | <body> | ||
- | + | <ul class="tabbed_images" id="tabs_example_three"> | |
+ | <li><a href="#image_1"><img src="/stylesheets/sample_images/tabs_example_1_small.jpg"/></a></li> | ||
+ | <li><a href="#image_2"><img src="/stylesheets/sample_images/tabs_example_2_small.jpg"/></a></li> | ||
+ | <li><a href="#image_3"><img src="/stylesheets/sample_images/tabs_example_3_small.jpg"/></a></li> | ||
+ | <li><a href="#image_4"><img src="/stylesheets/sample_images/tabs_example_4_small.jpg"/></a></li> | ||
+ | </ul> | ||
+ | <img src="/stylesheets/sample_images/tabs_example_1_big.jpg" id="image_1"/> | ||
+ | <img src="/stylesheets/sample_images/tabs_example_2_big.jpg" id="image_2"/> | ||
+ | <img src="/stylesheets/sample_images/tabs_example_3_big.jpg" id="image_3"/> | ||
+ | <img src="/stylesheets/sample_images/tabs_example_4_big.jpg" id="image_4"/> <!--BEG Menu Table code--> | ||
</body> | </body> |
Latest revision as of 04:09, 25 September 2011
{{{content}}}