Team:Michigan/Test Css

From 2012.igem.org

(Difference between revisions)
 
(145 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
-
<script>
 
-
$("#slideshow > div:gt(0)").hide();
 
-
setInterval(function() {
 
-
  $('#slideshow > div:first')
 
-
    .fadeOut(1000)
 
-
    .next()
 
-
    .fadeIn(1000)
 
-
    .end()
 
-
    .appendTo('#slideshow');
 
-
},  6000);
 
-
var ddsmoothmenu={
+
<script type="text/javascript">
-
//Specify full URL to down and right arrow images (23 is padding-right added to top level LIs with drop downs):
+
$(function(){
-
arrowimages: {down:['downarrowclass', 'down.gif', 23], right:['rightarrowclass', 'right.gif']},
+
$('.slideshow img:gt(0)')
-
transition: {overtime:300, outtime:300}, //duration of slide in/ out animation, in milliseconds
+
        .hide();
-
shadow: {enable:true, offsetx:5, offsety:5}, //enable shadow?
+
setInterval(function(){
-
showhidedelay: {showdelay: 100, hidedelay: 200}, //set delay in milliseconds before sub menus appear and disappear, respectively
+
        $('.slideshow :first-child')
 +
        .fadeOut()
 +
        .next('img')
 +
        .fadeIn()
 +
        .end()
 +
        .appendTo('.slideshow');}, 6000);
 +
});
-
///////Stop configuring beyond here///////////////////////////
 
-
detectwebkit: navigator.userAgent.toLowerCase().indexOf("applewebkit")!=-1, //detect WebKit browsers (Safari, Chrome etc)
 
-
detectie6: document.all && !window.XMLHttpRequest,
 
-
css3support: window.msPerformance || (!document.all && document.querySelector), //detect browsers that support CSS3 box shadows (ie9+ or FF3.5+, Safari3+, Chrome etc)
 
-
ismobile:navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i) != null, //boolean check for popular mobile browsers
 
-
 
-
getajaxmenu:function($, setting){ //function to fetch external page containing the panel DIVs
 
-
var $menucontainer=$('#'+setting.contentsource[0]) //reference empty div on page that will hold menu
 
-
$menucontainer.html("Loading Menu...")
 
-
$.ajax({
 
-
url: setting.contentsource[1], //path to external menu file
 
-
async: true,
 
-
error:function(ajaxrequest){
 
-
$menucontainer.html('Error fetching content. Server Response: '+ajaxrequest.responseText)
 
-
},
 
-
success:function(content){
 
-
$menucontainer.html(content)
 
-
ddsmoothmenu.buildmenu($, setting)
 
-
}
 
-
})
 
-
},
 
-
 
-
 
-
buildmenu:function($, setting){
 
-
var smoothmenu=ddsmoothmenu
 
-
var $mainmenu=$("#"+setting.mainmenuid+">ul") //reference main menu UL
 
-
$mainmenu.parent().get(0).className=setting.classname || "ddsmoothmenu"
 
-
var $headers=$mainmenu.find("ul").parent()
 
-
$headers.hover(
 
-
function(e){
 
-
$(this).children('a:eq(0)').addClass('selected')
 
-
},
 
-
function(e){
 
-
$(this).children('a:eq(0)').removeClass('selected')
 
-
}
 
-
)
 
-
$headers.each(function(i){ //loop through each LI header
 
-
var $curobj=$(this).css({zIndex: 100-i}) //reference current LI header
 
-
var $subul=$(this).find('ul:eq(0)').css({display:'block'})
 
-
$subul.data('timers', {})
 
-
this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()}
 
-
this.istopheader=$curobj.parents("ul").length==1? true : false //is top level header?
 
-
$subul.css({top:this.istopheader && setting.orientation!='v'? this._dimensions.h+"px" : 0})
 
-
$curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: smoothmenu.arrowimages.down[2]} : {}).append( //add arrow images
 
-
'<img src="'+ (this.istopheader && setting.orientation!='v'? smoothmenu.arrowimages.down[1] : smoothmenu.arrowimages.right[1])
 
-
+'" class="' + (this.istopheader && setting.orientation!='v'? smoothmenu.arrowimages.down[0] : smoothmenu.arrowimages.right[0])
 
-
+ '" style="border:0;" />'
 
-
)
 
-
if (smoothmenu.shadow.enable && !smoothmenu.css3support){ //if shadows enabled and browser doesn't support CSS3 box shadows
 
-
this._shadowoffset={x:(this.istopheader?$subul.offset().left+smoothmenu.shadow.offsetx : this._dimensions.w), y:(this.istopheader? $subul.offset().top+smoothmenu.shadow.offsety : $curobj.position().top)} //store this shadow's offsets
 
-
if (this.istopheader)
 
-
$parentshadow=$(document.body)
 
-
else{
 
-
var $parentLi=$curobj.parents("li:eq(0)")
 
-
$parentshadow=$parentLi.get(0).$shadow
 
-
}
 
-
this.$shadow=$('<div class="ddshadow'+(this.istopheader? ' toplevelshadow' : '')+'"></div>').prependTo($parentshadow).css({left:this._shadowoffset.x+'px', top:this._shadowoffset.y+'px'})  //insert shadow DIV and set it to parent node for the next shadow div
 
-
}
 
-
$curobj.hover(
 
-
function(e){
 
-
var $targetul=$subul //reference UL to reveal
 
-
var header=$curobj.get(0) //reference header LI as DOM object
 
-
clearTimeout($targetul.data('timers').hidetimer)
 
-
$targetul.data('timers').showtimer=setTimeout(function(){
 
-
header._offsets={left:$curobj.offset().left, top:$curobj.offset().top}
 
-
var menuleft=header.istopheader && setting.orientation!='v'? 0 : header._dimensions.w
 
-
menuleft=(header._offsets.left+menuleft+header._dimensions.subulw>$(window).width())? (header.istopheader && setting.orientation!='v'? -header._dimensions.subulw+header._dimensions.w : -header._dimensions.w) : menuleft //calculate this sub menu's offsets from its parent
 
-
if ($targetul.queue().length<=1){ //if 1 or less queued animations
 
-
$targetul.css({left:menuleft+"px", width:header._dimensions.subulw+'px'}).animate({height:'show',opacity:'show'}, ddsmoothmenu.transition.overtime)
 
-
if (smoothmenu.shadow.enable && !smoothmenu.css3support){
 
-
var shadowleft=header.istopheader? $targetul.offset().left+ddsmoothmenu.shadow.offsetx : menuleft
 
-
var shadowtop=header.istopheader?$targetul.offset().top+smoothmenu.shadow.offsety : header._shadowoffset.y
 
-
if (!header.istopheader && ddsmoothmenu.detectwebkit){ //in WebKit browsers, restore shadow's opacity to full
 
-
header.$shadow.css({opacity:1})
 
-
}
 
-
header.$shadow.css({overflow:'', width:header._dimensions.subulw+'px', left:shadowleft+'px', top:shadowtop+'px'}).animate({height:header._dimensions.subulh+'px'}, ddsmoothmenu.transition.overtime)
 
-
}
 
-
}
 
-
}, ddsmoothmenu.showhidedelay.showdelay)
 
-
},
 
-
function(e){
 
-
var $targetul=$subul
 
-
var header=$curobj.get(0)
 
-
clearTimeout($targetul.data('timers').showtimer)
 
-
$targetul.data('timers').hidetimer=setTimeout(function(){
 
-
$targetul.animate({height:'hide', opacity:'hide'}, ddsmoothmenu.transition.outtime)
 
-
if (smoothmenu.shadow.enable && !smoothmenu.css3support){
 
-
if (ddsmoothmenu.detectwebkit){ //in WebKit browsers, set first child shadow's opacity to 0, as "overflow:hidden" doesn't work in them
 
-
header.$shadow.children('div:eq(0)').css({opacity:0})
 
-
}
 
-
header.$shadow.css({overflow:'hidden'}).animate({height:0}, ddsmoothmenu.transition.outtime)
 
-
}
 
-
}, ddsmoothmenu.showhidedelay.hidedelay)
 
-
}
 
-
) //end hover
 
-
}) //end $headers.each()
 
-
if (smoothmenu.shadow.enable && smoothmenu.css3support){ //if shadows enabled and browser supports CSS3 shadows
 
-
var $toplevelul=$('#'+setting.mainmenuid+' ul li ul')
 
-
var css3shadow=parseInt(smoothmenu.shadow.offsetx)+"px "+parseInt(smoothmenu.shadow.offsety)+"px 5px #aaa" //construct CSS3 box-shadow value
 
-
var shadowprop=["boxShadow", "MozBoxShadow", "WebkitBoxShadow", "MsBoxShadow"] //possible vendor specific CSS3 shadow properties
 
-
for (var i=0; i<shadowprop.length; i++){
 
-
$toplevelul.css(shadowprop[i], css3shadow)
 
-
}
 
-
}
 
-
$mainmenu.find("ul").css({display:'none', visibility:'visible'})
 
-
},
 
-
 
-
init:function(setting){
 
-
if (typeof setting.customtheme=="object" && setting.customtheme.length==2){ //override default menu colors (default/hover) with custom set?
 
-
var mainmenuid='#'+setting.mainmenuid
 
-
var mainselector=(setting.orientation=="v")? mainmenuid : mainmenuid+', '+mainmenuid
 
-
document.write('<style type="text/css">\n'
 
-
+mainselector+' ul li a {background:'+setting.customtheme[0]+';}\n'
 
-
+mainmenuid+' ul li a:hover {background:'+setting.customtheme[1]+';}\n'
 
-
+'</style>')
 
-
}
 
-
this.shadow.enable=(document.all && !window.XMLHttpRequest)? false : this.shadow.enable //in IE6, always disable shadow
 
-
jQuery(document).ready(function($){ //ajax menu?
 
-
if (typeof setting.contentsource=="object"){ //if external ajax menu
 
-
ddsmoothmenu.getajaxmenu($, setting)
 
-
}
 
-
else{ //else if markup menu
 
-
ddsmoothmenu.buildmenu($, setting)
 
-
}
 
-
})
 
-
}
 
-
 
-
}
 
</script>
</script>
-
 
+
<head>
<style type="text/css">
<style type="text/css">
-
.ddsmoothmenu{
+
div#navigation{
-
font: bold 12px Verdana;
+
/* Old browsers */
-
background: #414141; /*background of menu bar (default state)*/
+
border-radius: 0px;
-
width: 100%;
+
padding:90px 0 0 0;
}
}
 +
#navigation ul, #navigation li{ list-style:none; padding:0; margin:0; display:inline; }
 +
#navigation ul li{
 +
        float:left;
 +
        position:relative;
-
.ddsmoothmenu ul{
 
-
z-index:100;
 
-
margin: 0;
 
-
padding: 0;
 
-
list-style-type: none;
 
}
}
-
/*Top level list items*/
+
#navigation ul li a{  
-
.ddsmoothmenu ul li{
+
-
position: relative;
+
-
display: inline;
+
-
float: left;
+
-
}
+
-
/*Top level menu link items style*/
+
display:block;
-
.ddsmoothmenu ul li a{
+
padding:7px 12px;  
-
display: block;
+
margin-left:auto;
-
background: #414141; /*background of menu items (default state)*/
+
        margin-right:auto;
-
color: white;
+
font-size:18px;  
-
padding: 8px 10px;
+
white-space:nowrap;  
-
border-right: 1px solid #778;
+
border-radius:1px;
-
color: #2d2b2b;
+
-
text-decoration: none;
+
-
}
+
-
* html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
 
-
display: inline-block;
 
}
}
-
 
+
#navigation ul li a:hover{}
-
.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{
+
#navigation ul li ul li a{
-
color: white;
+
width: 75px;
}
}
-
 
+
#navigation ul ul li a:hover{
-
.ddsmoothmenu ul li a.selected{ /*CSS class that's dynamically added to the currently active menu items' LI A element*/
+
        background:#063257;
-
background: black;  
+
background-repeat:repeat-x;
-
color: white;
+
        color:#fff080;
 +
background-size:200%;
}
}
 +
#navigation ul ul{
 +
position:absolute;
 +
height:-99999px;
 +
margin-left:auto;
 +
        margin-right:auto;
 +
opacity: 0; /* Hide sub level */
 +
-webkit-transition: opacity .5s ease-in-out;
 +
-moz-transition: opacity .5s ease-in-out;
 +
-o-transition: opacity .5s ease-in-out;
 +
z-index:497;
 +
background:#fff080;
 +
padding: 0px;
 +
border:1px solid #063257;
 +
border-top:1px solid #063257;
 +
box-shadow:#111 0 3px 4px;
 +
border-bottom-left-radius:2px;
 +
border-bottom-right-radius:2px;
-
.ddsmoothmenu ul li a:hover{
 
-
background: black; /*background of menu items during onmouseover (hover state)*/
 
-
color: white;
 
-
}
 
-
 
-
/*1st sub level menu*/
 
-
.ddsmoothmenu ul li ul{
 
-
position: absolute;
 
-
left: 0;
 
-
display: none; /*collapse all sub menus to begin with*/
 
-
visibility: hidden;
 
}
}
 +
#navigation ul ul ul {
 +
margin-left:auto;
 +
        margin-right:auto;
-
/*Sub level menu list items (undo style from Top level List Items)*/
 
-
.ddsmoothmenu ul li ul li{
 
-
display: list-item;
 
-
float: none;
 
-
}
 
-
/*All subsequent sub menu levels vertical offset after 1st level sub menu */
+
opacity: 0;
-
.ddsmoothmenu ul li ul li ul{
+
-webkit-transition: opacity .5s ease-in-out; /* Hide sub levels */
-
top: 0;
+
-moz-transition: opacity .5s ease-in-out;
 +
-o-transition: opacity .5s ease-in-out;
 +
border-radius:6px;
 +
border:1px solid #444;
}
}
 +
#navigation ul li:hover>ul{ opacity: 1; position:absolute; top:100%; left:0; }
 +
#navigation ul ul li:hover>ul{ position:absolute; top:0; left:100%; opacity: 1; z-index:497;}
-
/* Sub level menu links style */
 
-
.ddsmoothmenu ul li ul li a{
 
-
font: normal 13px Verdana;
 
-
width: 160px; /*width of sub menus*/
 
-
padding: 5px;
 
-
margin: 0;
 
-
border-top-width: 0;
 
-
border-bottom: 1px solid gray;
 
-
}
 
-
/* Holly Hack for IE \*/
+
.slideshow img { position:absolute; left:10; top:10; }
-
* html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/
+
-
 
+
-
 
+
-
/* ######### CSS classes applied to down and right arrow images  ######### */
+
-
 
+
-
.downarrowclass{
+
-
position: absolute;
+
-
top: 12px;
+
-
right: 7px;
+
-
}
+
-
 
+
-
.rightarrowclass{
+
-
position: absolute;
+
-
top: 6px;
+
-
right: 5px;
+
-
}
+
-
 
+
-
/* ######### CSS for shadow added to sub menus  ######### */
+
-
 
+
-
.ddshadow{ /*shadow for NON CSS3 capable browsers*/
+
-
position: absolute;
+
-
left: 0;
+
-
top: 0;
+
-
width: 0;
+
-
height: 0;
+
-
background: silver;
+
-
}
+
-
 
+
-
.toplevelshadow{ /*shadow opacity for NON CSS3 capable browsers. Doesn't work in IE*/
+
-
opacity: 0.8;
+
-
}
+
-
#slideshow {  
+
.slideshow {  
     margin: -375px 0px 0px 400px;  
     margin: -375px 0px 0px 400px;  
     position: absolute;  
     position: absolute;  
Line 275: Line 102:
}
}
-
#slideshow > div {
 
-
    position: absolute;
 
-
    top: 5px;
 
-
    left: 5px;
 
-
    right: 5px;
 
-
    bottom: 5px;
 
-
}
 
#footer-box {
#footer-box {
Line 358: Line 178:
width:962px;
width:962px;
margin:0 auto ;
margin:0 auto ;
-
height:126px;
+
height:124px;
padding:0px 0px 0;
padding:0px 0px 0;
}
}
Line 435: Line 255:
         padding: 0px 16px 50px;
         padding: 0px 16px 50px;
}
}
-
/*------------------------- Footer ------------------------*/
+
 
Line 442: Line 262:
-
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Xayona Website Template</title>
<title>Xayona Website Template</title>
Line 453: Line 272:
<div class="page">
<div class="page">
<div class="header">
<div class="header">
-
<a href="https://2012.igem.org" alt="iGEM home page"><img src="https://static.igem.org/mediawiki/2012/8/83/Igem_icon.png" style="position:absolute;right:0;top:0;"></a>
+
<a href="https://2012.igem.org"><img src="https://static.igem.org/mediawiki/2012/8/83/Igem_icon.png" style="position:absolute;right:0;top:0;" alt=""></img></a>
<a href="index.html" id="logo"><img src="https://static.igem.org/mediawiki/2012/c/c2/Michigan_2012_Logo_ani.gif" alt=""/></a>
<a href="index.html" id="logo"><img src="https://static.igem.org/mediawiki/2012/c/c2/Michigan_2012_Logo_ani.gif" alt=""/></a>
                                 <a href="index.html" id="name"><img src="https://static.igem.org/mediawiki/2012/5/5f/Michigan_2012_Site_name.png" alt=""/></a>
                                 <a href="index.html" id="name"><img src="https://static.igem.org/mediawiki/2012/5/5f/Michigan_2012_Site_name.png" alt=""/></a>
 +
                        <div id="navigation">
<ul>
<ul>
-
<li class="selected"><a href="index.html">Project</a></li>
+
<li class="selected"><a href="index.html">Project</a>
-
<li><a href="about.html">Notebook</a></li>
+
-
<li><a href="blog.html">Team</a></li>
+
-
<li><a href="services.html">Safety</a></li>
+
-
<li><a href="services.html">Sponsors</a></li>
+
-
</ul>
+
-
<h2>Example 1</h2>
+
-
 
+
-
<div id="smoothmenu1" class="ddsmoothmenu">
+
<ul>
<ul>
-
<li><a href="http://www.dynamicdrive.com">Item 1</a></li>
+
                                              <li><a href="#">Option 1</a></li>
-
<li><a href="#">Folder 0</a>
+
                                              <li><a href="#">Option 2</a></li>
-
  <ul>
+
</ul></li>
-
  <li><a href="#">Sub Item 1.1</a></li>
+
<li><a href="about.html">Notebook</a>
-
  <li><a href="#">Sub Item 1.2</a></li>
+
                                            <ul>
-
  <li><a href="#">Sub Item 1.3</a></li>
+
                                              <li><a href="#">Option 1</a></li>
-
  <li><a href="#">Sub Item 1.4</a></li>
+
                                              <li><a href="#">Option 2</a></li>
-
  <li><a href="#">Sub Item 1.2</a></li>
+
                                            </ul>
-
  <li><a href="#">Sub Item 1.3</a></li>
+
                                        </li>
-
  <li><a href="#">Sub Item 1.4</a></li>
+
<li><a href="blog.html">Team</a>
-
  </ul>
+
                                            <ul>
-
</li>
+
                                              <li><a href="#">Option 1 </a></li>
-
<li><a href="#">Folder 1</a>
+
                                              <li><a href="#">Option 2 </a></li>
-
  <ul>
+
                                            </ul>
-
  <li><a href="#">Sub Item 1.1</a></li>
+
                                        </li>
-
  <li><a href="#">Sub Item 1.2</a></li>
+
<li><a href="services.html">Safety</a>
-
  <li><a href="#">Sub Item 1.3</a></li>
+
<ul>
-
  <li><a href="#">Sub Item 1.4</a></li>
+
                                              <li><a href="#">Option 1</a></li>
-
  <li><a href="#">Sub Item 1.2</a></li>
+
                                              <li><a href="#">Option 2</a></li>
-
  <li><a href="#">Sub Item 1.3</a></li>
+
</ul></li>
-
  <li><a href="#">Sub Item 1.4</a></li>
+
<li><a href="services.html">Sponsors</a>
-
  </ul>
+
<ul>
-
</li>
+
                                              <li><a href="#"> Option 1 </a></li>
-
<li><a href="#">Item 3</a></li>
+
                                              <li><a href="#"> Option 2 </a></li>
-
<li><a href="#">Folder 2</a>
+
</ul></li>
-
  <ul>
+
</ul>
-
  <li><a href="#">Sub Item 2.1</a></li>
+
-
  <li><a href="#">Folder 2.1</a>
+
</div>
-
    <ul>
+
-
    <li><a href="#">Sub Item 2.1.1</a></li>
+
-
    <li><a href="#">Sub Item 2.1.2</a></li>
+
-
    <li><a href="#">Folder 3.1.1</a>
+
-
<ul>
+
-
    <li><a href="#">Sub Item 3.1.1.1</a></li>
+
-
    <li><a href="#">Sub Item 3.1.1.2</a></li>
+
-
    <li><a href="#">Sub Item 3.1.1.3</a></li>
+
-
    <li><a href="#">Sub Item 3.1.1.4</a></li>
+
-
    <li><a href="#">Sub Item 3.1.1.5</a></li>
+
-
</ul>
+
-
    </li>
+
-
    <li><a href="#">Sub Item 2.1.4</a></li>
+
-
    </ul>
+
-
  </li>
+
-
  </ul>
+
-
</li>
+
-
<li><a href="http://www.dynamicdrive.com/style/">Item 4</a></li>
+
-
</ul>
+
-
<br style="clear: left" />
+
-
</div>
+
-
 
+
</div>
</div>
<div class="body">
<div class="body">
<div id="featured">
<div id="featured">
<h3>Sometimes changes need to be made and with that comes a switch; and a terrible pun.</h3>
<h3>Sometimes changes need to be made and with that comes a switch; and a terrible pun.</h3>
-
<p>Team Michigan is engineering a novel, tightly controlled and inducible protein expression system in Escherichia coli in order to demonstrate that we can create robust boolean genetic control circuits that do not continuously rely on the presence of signaling compounds. We are using two unidirectional recombinases found in pathogenic Escherichia coli, Hbif, and FimE, to manipuulate promoter orientation.</p>
+
<p>Team Michigan is engineering a novel, tightly controlled and inducible protein expression system in Escherichia coli in order to demonstrate that we can create robust boolean genetic control circuits that do not continuously rely on the presence of signaling compounds. We are using two unidirectional recombinases found in pathogenic Escherichia coli, Hbif, and FimE, to manipulate promoter orientation.</p>
</div>
</div>
-
                                 <div id="slideshow">
+
                                 <div class="slideshow">
-
                                       <div>
+
                                        
-
                                           <img src="https://static.igem.org/mediawiki/2012/0/0d/Michigan_%29Random_Team_1.png">
+
                                           <img src="https://static.igem.org/mediawiki/2012/0/0d/Michigan_%29Random_Team_1.png" alt=""></img>
-
                                      </div>
+
                                     
-
                                       <div>
+
                                        
-
                                           <img src="https://static.igem.org/mediawiki/2012/a/a0/Michigan_Random_Team_2.png">
+
                                           <img src="https://static.igem.org/mediawiki/2012/a/a0/Michigan_Random_Team_2.png" alt=""></img>
-
                                      </div>
+
                                        
-
                                       <div>
+
                                     
-
                                           <img src="https://static.igem.org/mediawiki/2012/b/bc/Michigan_Random_Team_3.png">
+
                                           <img src="https://static.igem.org/mediawiki/2012/b/bc/Michigan_Random_Team_3.png" alt=""></img>
-
                                      </div>
+
                                     
                                 </div>
                                 </div>
        </div>
        </div>

Latest revision as of 00:35, 7 August 2012

Xayona Website Template

Retrieved from "http://2012.igem.org/Team:Michigan/Test_Css"