Team:UGent/Templates/Header
From 2013.igem.org
(Difference between revisions)
(210 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
+ | <!-- ####### Banner UGent ####### --> | ||
+ | <table cellspacing=0 cellpadding=0 border =0> | ||
+ | |||
+ | <!-- ####### Remove iGem-banner and wiki-parts + LAYOUT ###### --> | ||
<html> | <html> | ||
- | < | + | <head> |
+ | <style> | ||
+ | #contentSub, #search-controls, .firstHeading, #catlinks, #p-logo{display:none;} | ||
+ | #top-section{border: none;height: 0px} | ||
+ | #content{border: none; width:1200px;} | ||
- | + | body{background-color:#ffffff} | |
+ | ul{list-style-image:url('https://static.igem.org/mediawiki/2013/5/50/UGent_2013_TandwielWIKI.png');font-family:"Verdana";font-size:13px;padding-right:50px; | ||
+ | padding-left:60px;text-align:justify;} | ||
+ | ul.a{list-style-image:url('https://static.igem.org/mediawiki/2013/a/aa/UGent_2013_TandwielWIKI2.png');font-family:"Verdana";font-size:11px;padding-right:50px; | ||
+ | padding-left:30px;text-align:justify;} | ||
+ | h1{font-family:"Verdana";font-size:15px;font-weight: bold;} | ||
+ | h2{font-family:"Verdana";font-size:15px;} | ||
+ | h3{font-family:"Verdana";font-size:13px;padding-left:50px;} | ||
+ | p{font-family:"Verdana";font-size:13px; text-align:justify;padding-right:50px; | ||
+ | padding-left:50px;} | ||
+ | p.font{font-family:"Verdana";font-size:11px; text-align:justify;padding-right:50px; | ||
+ | padding-left:50px;font-weight: bold;} | ||
+ | p.home{font-family:"Verdana";font-size:18px; text-align:center;padding-right:50px; | ||
+ | padding-left:50px;font-weight: bold;color:#18204b;} | ||
+ | p.padding{font-family:"Verdana";font-size:13px; text-align:justify padding-right:50px;padding-left:75px;} | ||
+ | p.padding2{font-family:"Verdana";font-size:13px; text-align:justify padding-right:50px;padding-left:106px;} | ||
+ | .center{margin:auto;width:95%;} | ||
- | < | + | </style> |
- | < | + | </head> |
- | + | </html> | |
- | + | ||
+ | <!-- ####### SlideShow ######## --> | ||
<html> | <html> | ||
+ | <head> | ||
- | + | <link rel="stylesheet" href="http://www.science.unitn.it/~igem/js/nivo/nivo-slider.css" type="text/css" media="screen"/> | |
- | </ | + | <link rel="stylesheet" href="http://www.science.unitn.it/~igem/js/nivo/themes/default/default.css" type="text/css" media="screen"/> |
+ | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> | ||
+ | <script src="http://www.science.unitn.it/~igem/js/nivo/jquery.nivo.slider.pack.js" type="text/javascript"></script> | ||
+ | <script> | ||
+ | jQuery(function($){ | ||
+ | $('#slider').nivoSlider({ | ||
+ | effect: 'fade', // Specify sets like: 'fold,fade,sliceDown' | ||
+ | pauseTime: 3000, | ||
+ | directionNavHide: true, | ||
+ | pauseOnHover: true | ||
+ | }); | ||
+ | }) | ||
+ | </script> | ||
+ | <style> | ||
+ | .theme-default .nivo-controlNav { | ||
+ | left: 13%; | ||
+ | } | ||
+ | </style> | ||
+ | </head> | ||
+ | </html> | ||
- | < | + | <!-- ####### Drop down ####### --> |
- | + | <html> | |
- | + | <head> | |
- | < | + | <script type="text/javascript"> |
- | < | + | // Copyright 2006-2007 javascript-array.com |
- | < | + | |
+ | var timeout = 50; | ||
+ | var closetimer = 0; | ||
+ | var ddmenuitem = 0; | ||
+ | |||
+ | // open hidden layer | ||
+ | function mopen(id) | ||
+ | { | ||
+ | // cancel close timer | ||
+ | mcancelclosetime(); | ||
+ | |||
+ | // close old layer | ||
+ | if(ddmenuitem) ddmenuitem.style.visibility = 'hidden'; | ||
+ | |||
+ | // get new layer and show it | ||
+ | ddmenuitem = document.getElementById(id); | ||
+ | ddmenuitem.style.visibility = 'visible'; | ||
+ | |||
+ | } | ||
+ | // close showed layer | ||
+ | function mclose() | ||
+ | { | ||
+ | if(ddmenuitem) ddmenuitem.style.visibility = 'hidden'; | ||
+ | } | ||
+ | |||
+ | // go close timer | ||
+ | function mclosetime() | ||
+ | { | ||
+ | closetimer = window.setTimeout(mclose, timeout); | ||
+ | } | ||
+ | |||
+ | // cancel close timer | ||
+ | function mcancelclosetime() | ||
+ | { | ||
+ | if(closetimer) | ||
+ | { | ||
+ | window.clearTimeout(closetimer); | ||
+ | closetimer = null; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | // close layer when click-out | ||
+ | document.onclick = mclose; | ||
+ | </script> | ||
+ | </head> | ||
+ | <style> | ||
+ | #sddm | ||
+ | { margin: 0; | ||
+ | padding: 0; | ||
+ | z-index: 40} | ||
+ | |||
+ | #sddm li | ||
+ | { margin: 0; | ||
+ | padding: 0; | ||
+ | list-style: none; | ||
+ | float: left; | ||
+ | font-family:"Verdana" | ||
+ | font-size:17px; | ||
+ | font-weight: bold;} | ||
+ | |||
+ | #sddm li a | ||
+ | { display: block; | ||
+ | margin: 0 1px 0 0; | ||
+ | padding: 15.3px 15.3px; | ||
+ | height: 20px; | ||
+ | width: auto; | ||
+ | background: #F9BD05 ; | ||
+ | color: #18204b ; | ||
+ | text-align: center; | ||
+ | vertical-align:middle; | ||
+ | text-decoration: none; | ||
+ | font-family:"Verdana" | ||
+ | font-size:17px; | ||
+ | font-weight: bold;} | ||
+ | |||
+ | #sddm li a img | ||
+ | { display: block; | ||
+ | margin: 0 1px 0 0; | ||
+ | padding: 0px 0px; | ||
+ | height: 20px; | ||
+ | width: auto; | ||
+ | background:#F9BD05 ; | ||
+ | color: #18204b; | ||
+ | text-align: center; | ||
+ | vertical-align:middle; | ||
+ | text-decoration: none; | ||
+ | font-family:"Verdana" | ||
+ | font-size:17px; | ||
+ | font-weight: bold;} | ||
+ | |||
+ | #sddm li a:hover | ||
+ | { background: #18204b; | ||
+ | color:#F9BD05 } | ||
+ | |||
+ | #sddm li img:hover | ||
+ | { background: #18204b; | ||
+ | color:#F9BD05 } | ||
+ | |||
+ | #sddm div | ||
+ | { position: absolute; | ||
+ | visibility: hidden; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | background: #EAEBD8; | ||
+ | border: 1px solid #18204b} | ||
+ | |||
+ | #sddm div a | ||
+ | { position: relative; | ||
+ | display: block; | ||
+ | margin: 0; | ||
+ | padding: 5px 10px; | ||
+ | width: auto; | ||
+ | white-space: nowrap; | ||
+ | text-align: left; | ||
+ | text-decoration: none; | ||
+ | background: #EAEBD8; | ||
+ | color: #18204b; | ||
+ | font-family:"Verdana" | ||
+ | font-size:17px; | ||
+ | font-weight: bold;} | ||
+ | |||
+ | #sddm div a:hover | ||
+ | { background: #18204b; | ||
+ | color: #F9BD05} | ||
+ | </style> | ||
+ | </html> | ||
+ | |||
+ | |||
+ | |||
+ | <!-- ####### Script read more sections ####### --> | ||
+ | <html> | ||
+ | <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> | ||
+ | <script type="text/javascript"> | ||
+ | $(document).ready(function(){ | ||
+ | |||
+ | //Hide (Collapse) the toggle containers on load | ||
+ | $(".toggle_container").hide(); | ||
+ | //Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state) | ||
+ | $("p.trigger").click(function(){ | ||
+ | $(this).toggleClass("activeToggle"); | ||
+ | var nextElem = $(this).next(); | ||
+ | while(nextElem!= null) { | ||
+ | if(!nextElem.is(".toggle_container")) { | ||
+ | nextElem = nextElem.next(); | ||
+ | } | ||
+ | else { | ||
+ | break; | ||
+ | } | ||
+ | } | ||
+ | if(nextElem.is(".toggle_container")) { | ||
+ | nextElem.slideToggle("slow"); | ||
+ | } | ||
+ | return false; //Prevent the browser jump to the link anchor | ||
+ | }); | ||
+ | $("a.toggle_close").click(function(){ | ||
+ | var nextParent = $(this).parent(); | ||
+ | while(nextParent!= null) { | ||
+ | if(!nextParent.is(".toggle_container")) { | ||
+ | nextParent = nextParent.parent(); | ||
+ | } | ||
+ | else { | ||
+ | break; | ||
+ | } | ||
+ | } | ||
+ | if(nextParent.is(".toggle_container")) { | ||
+ | nextParent.slideToggle("slow"); | ||
+ | |||
+ | |||
+ | var prevElem = nextParent.prev(); | ||
+ | while(prevElem!= null) { | ||
+ | if(!prevElem.is("p.trigger")) { | ||
+ | prevElem = prevElem.prev(); | ||
+ | } | ||
+ | else { | ||
+ | break; | ||
+ | } | ||
+ | } | ||
+ | if(prevElem.is("p.trigger")) { | ||
+ | prevElem.toggleClass("activeToggle"); | ||
+ | } | ||
+ | } | ||
+ | return false; //Prevent the browser jump to the link anchor | ||
+ | }); | ||
+ | }); | ||
+ | </script> | ||
+ | </html> | ||
+ | |||
+ | <!-- ####### Lay-out read more sections #######--> | ||
+ | <html> | ||
+ | <style> | ||
+ | p.activeToggle | ||
+ | { | ||
+ | padding-left: 17px; | ||
+ | background-image: url(''); | ||
+ | background-repeat: no-repeat; | ||
+ | background-position: center left; | ||
+ | } | ||
+ | a.toggle_close | ||
+ | { | ||
+ | padding-left: 17px; | ||
+ | background-image: url(''); | ||
+ | background-repeat: no-repeat; | ||
+ | background-position: center left; | ||
+ | float: left; | ||
+ | text-align: left; | ||
+ | } | ||
+ | div.toggle_container | ||
+ | { | ||
+ | border-left: 1px solid #F9BD05; | ||
+ | padding-left: 17px; | ||
+ | margin-left: 10px; | ||
+ | margin-bottom: 25px; | ||
+ | } | ||
+ | </style> | ||
</html> | </html> |