Team:UT-Tokyo/Templates/BeginContent

From 2011.igem.org

Revision as of 18:21, 24 August 2011 by Hiro3726 (Talk | contribs)

<link href='http://fonts.googleapis.com/css?family=Maven+Pro:500,700' rel='stylesheet' type='text/css'>

<style type="text/css">

/* @group general settings */ body { 

 background-color: #575757;

}

  1. globalWrapper { 
 box-shadow: 0px 0px 30px #000;
 width: 975px;
 margin-left: auto;
 margin-right: auto;
 padding-bottom: 0;
 background-color: #383838;

}

  1. content { 
 background-color: #383838;
 width: 975px;
 border-style: none;
 color: #ddd;
 font: 15px/32px "Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
 padding: 0;

}

  1. bodyContent h1, #pageContent h2, #pageContent h3, #pageContent h4, #pageContent h5, #pageContent h6, #pageContent p, #pageContent table { 
 margin: 0 0 0 10px; padding: 0; border-style: none;

}

  1. bodyContent h1 { 
 color: #ffffff;
 font: 700 36px "Maven Pro", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;

}

  1. pageContent h2 { 
 color: #96e036;
 font: 700 28px "Maven Pro", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
 margin-top: 26px;
 margin-bottom: 10px;

}

  1. pageContent p { 
 margin-bottom: 10px;

}

/* @end */

/* @group fix nasty default header settings */ .firstHeading { 

 display: none;

}

  1. top-section { 
 background-color: #383838;
 border-style: none;
 width:975px;
 height:20px;

}

  1. p-logo { 
 display: none;

}

  1. search-controls { 
 display: none;

}

.left-menu { 

 position: absolute;
 top:0px;
 left:0px;
 color: #ddd;

} .left-menu:hover { 

 color: white;
 background-color: #383838

} .right-menu { 

 position: absolute;
 top:0px;
 right:0px;

}

.right-menu li a { 

 background-color: #383838;

}

  1. menubar a:active,#menubar a:hover,#menubar a:link,#menubar a:visited { 
 color: #fff;

} /* @end */


/* @group header */ h1#pageTitle { 

 font: 700 42px "Maven Pro", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;

}

  1. headerLogo { 
 position: absolute;
 float: right;
 width: 350px;
 top: 0;
 right: 0;

}

  1. headerLogo img { 
 left: 0;
 top: -10px;
 position: absolute;
 float: left;

}

  1. headerLogo h1 {

float: right; margin-left: auto; padding-right: 10px; }

/* @end */

/* @group getting rid of nasty footer etc... */

  1. contentSub { 
 display: none;

}

  1. catlinks { 
 display: none;

}

  1. pageContent { 
 padding-bottom: 15px;

width: 965px; padding-left: 5px; padding-right: 5px;

}

  1. footer-box { 
 background-color: #383838;
 border-style: none;
 padding-top: 10px;
 border-top: 1px solid #777;

}

  1. footer-box a { 
 color: #fff;

}

/* @end */

  1. header { 
 height: 55px;
 width: 975px;

}

  1. navi { 
 height: 180px;
 width: 975px;

}

  1. navi #menu { 
 position: absolute;
 top:55px; /* same as the height of #header */
 left:0;
 right:0;
 margin: auto;
 width:975px; /* Make sure your images are the same size */
 height:180px; /* Make sure your images are the same size */
 z-index: 999;

}

  1. navi #menu #hauptMenu {

/* background: #333 url(gradation.png) no-repeat scroll left top;*/ background-image: url(http://igem-ut.net/2011/gradation.png); background-repeat: repeat-y; width: 200px; height: 180px; position: absolute; top: 0; left: 0; }

  1. navi #menu #projectMenu { 
 width: 300px;
 height: 120px;
 position: absolute;
 top: 25px;
 left: 200px;
 background-image: url(http://igem-ut.net/2011/projectMenuBg.png);
 background-repeat: no-repeat;
 display: none;

}

  1. navi #menu #projectMenu #projectMenu1 { 
 position: absolute;
 top: 6px;
 left: 10px;

}

  1. navi #menu #projectMenu #projectMenu2 { 
 position: absolute;
 top: 6px;
 left: 140px;

}

  1. navi #menu ul { 
 margin: 0;

}

  1. navi #menu ul li { 
 font: 500 18px "Maven Pro", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
 list-style: none;
 display: block;
 width: 180px;
 height: 23px;
 line-height: 27px;
 padding-left: 14px;
 margin: 0;
 padding-bottom: 3px;
 cursor: pointer;

}

  1. navi #menu ul li a{ 
 color: #fff;
 width: 180px;
 display: block;
 text-decoration: none;

}

  1. navi #menu #projectMenu ul li { 
 height: 20px;
 padding-bottom: 7px;
 margin-left: 10px;
 width: 120px;

}

  1. navi #menu #projectMenu ul li:hover { 
 background-image: url(http://igem-ut.net/2011/trans.png);

}

/* The Nivo Slider styles */ .nivoSlider { 

 position: relative;
 height: 180px;
 width: 975px;

} .nivoSlider img { position:absolute; top:0px; left:0px; } /* If an image is wrapped in a link */ .nivoSlider a.nivo-imageLink { position:absolute; top:0px; left:0px; width:100%; height:100%; border:0; padding:0; margin:0; z-index:6; display:none; } /* The slices and boxes in the Slider */ .nivo-slice { display:block; position:absolute; z-index:5; height:100%; } .nivo-box { display:block; position:absolute; z-index:5; }

</style> <script type="text/javascript"> 

 var _gaq = _gaq || [];
 _gaq.push(['_setAccount', 'UA-25315936-1']);
 _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 src="http://www.google.com/jsapi" type="text/javascript"></script> <script type="text/javascript"> 

 google.load("jquery", "1");

</script> <script src="http://igem-ut.net/2011/jquery.nivo.slider_mod.js" type="text/javascript"></script> <script src="http://igem-ut.net/2011/jquery.blockUI.js" type="text/javascript"></script>

<script type="text/javascript">

var UT_Tokyo = UT_Tokyo || {};

(function(UT_Tokyo) {

// code stolen from http://neave.com/ var ua = navigator.userAgent.toLowerCase();

UT_Tokyo.isIE6 = /msie [1-6]\./.test(ua); UT_Tokyo.isIE7 = /msie 7\./.test(ua); UT_Tokyo.isIE8 = /msie 8\./.test(ua); if (UT_Tokyo.isIE6 && UT_Tokyo.isIE8) { UT_Tokyo.isIE6 = false; } UT_Tokyo.isIE9 = /msie 9\./.test(ua); UT_Tokyo.isIE7or8 = UT_Tokyo.isIE7 || UT_Tokyo.isIE8; UT_Tokyo.isChrome = /chrome/.test(ua); UT_Tokyo.isFF = /firefox/.test(ua); UT_Tokyo.isOpera = /opera/.test(ua) && !(/opera mini/.test(ua)); UT_Tokyo.isMac = (/mac os/i).test(ua); UT_Tokyo.isAndroid = /android/.test(ua); UT_Tokyo.isiPad = /iPad/.test(navigator.platform); UT_Tokyo.isTouch = !!('ontouchstart' in window); UT_Tokyo.hasStorage = !!(window.sessionStorage && sessionStorage.getItem); UT_Tokyo.hasHistory = !!(window.history && history.pushState); UT_Tokyo.hasCanvas = !!window.CanvasRenderingContext2D; UT_Tokyo.hasWebGL = !!window.WebGLRenderingContext;

UT_Tokyo.useAjaxLoading = !!(document.location.href.match('Team:UT-Tokyo/?$'));

UT_Tokyo.menuMap = UT_Tokyo.menuMap || {}; UT_Tokyo.currentMenuEntry = UT_Tokyo.currentMenuEntry != null ? UT_Tokyo.currentMenuEntry : -1;

UT_Tokyo.transit = function(toUrl) { 

 // toUrl must start with '2011.igem.org/Team:UT-Tokyo'
 fullPageName = toUrl.match('2011.igem.org/(Team:UT-Tokyo.*)$');
 if (!fullPageName) {
   console.log('invalid url');
   return;
 }
 $('#pageContent').block();
 $.get(toUrl, function(html){
   var $new_page = $(html);
   // content
   $('#pageContent').html($('#pageContent', $new_page).html());
   
   // title
   var matches = html.match(/<title>(.*?)<\/title>/);
   document.title = matches[1];
   
   // title on the header
   $('#pageTitle').html($('#pageTitle', $new_page).html());
   
   // menu
   this.initMenu(fullPageName);
   
   // unblock
   $('#pageContent').unblock();
 });

};

UT_Tokyo.menuIndexFromFullPageName = function(fullPageName) { 

 if (fullPageName.match('Team:UT-Tokyo/?$')) return 0;
 else if (fullPageName.match('Team:UT-Tokyo/Team')) return 1;
 else if (fullPageName.match('Team:UT-Tokyo/Project')) return 2;
 else if (fullPageName.match('Team:UT-Tokyo/Acknowledgment')) return 3;
 else if (fullPageName.match('Team:UT-Tokyo/Safety')) return 4;
 else if (fullPageName.match('Team:UT-Tokyo/Parts')) return 5;
 else if (fullPageName.match('Team:UT-Tokyo/Data')) return 6;
 else return 0; // invalid!

};

UT_Tokyo.registerMenuItem = function(idx, item) { 

 this.menuMap[idx] = item;

};

UT_Tokyo.selectMenuEntry = function(idx) { 

 $('#slider').nivoToggle(idx);
 $('#navi').mouseleave(function() {
   $('#slider').nivoToggle(idx);
 });
 $(this.menuMap[idx]).css('background-image', 'url(trans.png)');
 this.currentMenuEntry = idx;

};

UT_Tokyo.hoverMenuEntry = function(idx) { 

 $(this.menuMap[idx]).css('background-image', 'url(trans.png)');
 if (idx == 2) {
   $('#projectMenu').fadeIn(200);
 } else {
   $(this.menuMap[2]).css('background-image', 'none');
   $('#projectMenu').fadeOut(200);
 }
 $('#slider').nivoToggle(idx);

};

UT_Tokyo.leaveMenuEntry = function(idx) { 

 if (idx != this.currentMenuEntry && idx != 2) {
   $(this.menuMap[idx]).css('background-image', 'none');
 }

};

UT_Tokyo.initMenu = function(fullPageName) { 

 var idx = this.menuIndexFromFullPageName(fullPageName);
 this.selectMenuEntry(idx);

};

}(UT_Tokyo));

// setting slider and event handlers $(document).ready(function () { 

 $('#slider').nivoSlider({
   directionNav: false,
   controlNav: false,
   manualAdvance: true,
   animSpeed: 200,
 });
 
 $('#navi #menu #hauptMenu ul li').each(function(idx) {
   UT_Tokyo.registerMenuItem(idx, this);
   $(this).mouseenter(function() {
     UT_Tokyo.hoverMenuEntry(idx, this);
   });
   $(this).mouseleave(function() {
     UT_Tokyo.leaveMenuEntry(idx, this);
   });
 });
 
 //if (UT_Tokyo.useAjaxLoading) {
   $('#navi #menu ul li a').click(function(e) {
   alert(this.attr('href'));
     UT_Tokyo.transit(this.attr('href'));
     e.preventDefault();
     return false;
   });
 //}
 
 UT_Tokyo.initMenu('{{{fullpagename}}}');

}); </script>

Retrieved from "http://2011.igem.org/Team:UT-Tokyo/Templates/BeginContent"