Team:SEU A/Attributions
From 2012.igem.org
(Difference between revisions)
Line 23: | Line 23: | ||
<script src="js/jquery-1.7.1.min.js"></script> | <script src="js/jquery-1.7.1.min.js"></script> | ||
<script src="js/jquery.flexslider-min.js"></script> | <script src="js/jquery.flexslider-min.js"></script> | ||
+ | |||
+ | <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script> | ||
+ | <script type="text/javascript"> | ||
+ | $(document).ready(function(){ | ||
+ | |||
+ | //Blur Links (Prevents Outline) | ||
+ | $('a').click(function() { | ||
+ | this.blur(); | ||
+ | }); | ||
+ | |||
+ | //Hide all item descriptions in the info box | ||
+ | $("#infobox > div").css("display", "none"); | ||
+ | |||
+ | //Call in the info box | ||
+ | $(".more a").click(function(){ | ||
+ | $("#infobox").animate({bottom: '233px' }, 300); | ||
+ | $("#fade_bg").fadeIn(); | ||
+ | return false; | ||
+ | }); | ||
+ | |||
+ | //Expand more info button on hover | ||
+ | $(".more").hover(function(){ | ||
+ | $(this).stop().animate({width: '225px' }, 200).css({'z-index' : '10'}); //Change the width increase caption size | ||
+ | }, function () { | ||
+ | $(this).stop().animate({width: '50px' }, 200).css({'z-index' : '1'}); | ||
+ | }); | ||
+ | |||
+ | //Show description for selected item | ||
+ | $("#couch a").click(function(){ | ||
+ | $("#couch_info").show(); | ||
+ | }); | ||
+ | |||
+ | $("#plant a").click(function(){ | ||
+ | $("#plant_info").show(); | ||
+ | }); | ||
+ | |||
+ | $("#monitor a").click(function(){ | ||
+ | $("#monitor_info").show(); | ||
+ | }); | ||
+ | |||
+ | $("#board a").click(function(){ | ||
+ | $("#board_info").show(); | ||
+ | }); | ||
+ | |||
+ | //Remove background, info box and hide all descriptions | ||
+ | $("#fade_bg, .close").click(function(){ | ||
+ | $("#fade_bg").fadeOut(); | ||
+ | $("#infobox").animate({bottom: '-200px' }, 300, function() { | ||
+ | $("#infobox > div").css("display", "none"); | ||
+ | }); | ||
+ | return false; | ||
+ | }); | ||
+ | |||
+ | }); | ||
+ | </script> | ||
+ | |||
+ | <style type="text/css"> | ||
+ | |||
+ | /* General Styles */ | ||
+ | *{ padding:0px; margin:0px; } | ||
+ | img{ border: none; } | ||
+ | a:focus, a:active{ outline:none; } | ||
+ | body{ text-align:center; background:#111; } | ||
+ | h1{ font:bold 18px Helvetica, Arial, sans-sarif; color:#FFF; margin:20px 0 0 0; } | ||
+ | |||
+ | /* Picture Styles */ | ||
+ | #picture{ position:relative; top:20px; width:700px; height:466px; margin:0px auto; background:#FFF url('office.jpg'); overflow:hidden; } | ||
+ | |||
+ | /* General More Button */ | ||
+ | .more{ position:absolute; width:50px; height:50px; background:url('dim.png'); border:1px solid #444; padding:5px; text-align:left; overflow:hidden; } | ||
+ | |||
+ | .more span{ position:absolute; left:60px; width:160px; padding:15px 0 0 5px; color:#FFF; font:bold 13px Lucida Grande, Arial, sans-serif; text-shadow:#000 1px 1px 0px; } | ||
+ | |||
+ | /* Item Specific More Button */ | ||
+ | #couch{ top:240px; left:75px;} | ||
+ | #plant{ top:180px; left:370px; } | ||
+ | #monitor{ top:335px; left:390px; } | ||
+ | #board{ top:50px; left:450px; } | ||
+ | |||
+ | /* General Info Box */ | ||
+ | #infobox{ position:absolute; bottom:-200px; left: 350px; height:200px; width:300px; z-index:20; margin:0 0 -100px -150px; background:#FFF; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; } | ||
+ | #infobox a, #infobox a:visited{ font:italic 16px Georgia, serif; color:#555; text-decoration:none; } | ||
+ | #infobox a:hover{ text-decoration:underline; } | ||
+ | |||
+ | /* Close button for info box */ | ||
+ | span.close{position:absolute; right:5px; top:5px;} | ||
+ | |||
+ | /* The dimmed background when the info box is showing */ | ||
+ | #fade_bg{ position:absolute; z-index:15; width:100%; height:100%; background:url('dim.png'); display:none;} | ||
+ | .whitef{ color:#FFFFFF;} | ||
+ | .whitef a{ color:#FFFFFF;} | ||
+ | </style> | ||
</head> | </head> | ||
Line 44: | Line 136: | ||
<img src="https://static.igem.org/mediawiki/2012/a/af/Seua_title.png"> | <img src="https://static.igem.org/mediawiki/2012/a/af/Seua_title.png"> | ||
</div> | </div> | ||
- | |||
- | |||
- | |||
<br class="clearfloat" /> | <br class="clearfloat" /> | ||
</header> | </header> | ||
Line 53: | Line 142: | ||
<div class="content"> | <div class="content"> | ||
<header> | <header> | ||
- | <h1> | + | <h1>Attributions</h1> |
- | <span> | + | <span>Next comes what we have done for this project.</span> |
</header> | </header> | ||
</div> | </div> | ||
+ | <div class="footer"> | ||
+ | <a href="http://www.seu.edu.cn" target="_blank"><strong>Southeast University</strong></a> | ||
+ | <a href="http://bme.seu.edu.cn/" target="_blank">Biomedical Engineer School,SEU</a> | ||
+ | <a href="https://2012.igem.org/Main_Page/" target="_blank">iGEM 2012</a> | ||
+ | <a href="https://igem.org/Team.cgi" target="_blank">Designed By SEU_A</a> | ||
+ | <a href="/wiki/index.php?title=Special:UserLogout&returnto=Team:SEU_A/Attributions" title="Log out">Log out</a> | ||
+ | <a href='https://igem.org/User_Information' title='My account'>My account</a></li> | ||
+ | <a href="/User:Poetdevin" title="Your user page [.]" accesskey="." class="new">Poetdevin</a> | ||
+ | <a href="/wiki/index.php?title=Team:SEU_A/Attributions&action=edit">Edit</a> | ||
+ | </div> | ||
- | + | <div id="picture"> | |
- | <div class=" | + | |
- | + | <!-- More Info Buttons --> | |
- | + | ||
- | + | <div class="more" id="couch"> | |
- | + | ||
- | + | <a href="#"><img src="more.png"/></a> | |
- | + | <span>IKEA Klippan Couch</span> | |
- | + | ||
- | + | </div> | |
- | </div> | + | |
+ | <div class="more" id="plant"> | ||
+ | <a href="#"><img src="more.png"/></a> | ||
+ | <span>Cornelius, Office Plant</span> | ||
+ | </div> | ||
+ | |||
+ | <div class="more" id="monitor"> | ||
+ | <a href="#"><img src="more.png"/></a> | ||
+ | <span>Samsung 305t Monitor</span> | ||
+ | </div> | ||
+ | |||
+ | <div class="more" id="board"> | ||
+ | <a href="#"><img src="more.png"/></a> | ||
+ | <span>Custom White Board</span> | ||
+ | </div> | ||
+ | |||
+ | <!-- Info Boxes --> | ||
+ | <div id="infobox"> | ||
+ | <span class="close"><a href="#"><img src="close.png"/></a></span> | ||
+ | <br/> | ||
+ | |||
+ | <div id="couch_info"> | ||
+ | <img src="klippan.jpg"/><br/> | ||
+ | <a href="http://www.ikea.com/us/en/catalog/products/10138530">IKEA Klippan Couch</a> | ||
+ | </div> | ||
+ | |||
+ | <div id="plant_info"> | ||
+ | <img src="plant.jpg"/><br/> | ||
+ | <a href="http://images.google.com/images?q=office%20plants&oe=utf-8&rls=org.mozilla:en-US:official&client=firefox-a&um=1&ie=UTF-8&sa=N&hl=en&tab=wi">Office Plants</a> | ||
+ | </div> | ||
+ | |||
+ | <div id="monitor_info"> | ||
+ | <img src="samsung.jpg"/><br/> | ||
+ | <a href="http://www.samsung.com/us/consumer/office/monitors/professional/LS30HUXCB/XAA/index.idx?pagetype=prd_detail">Samsung 305t Monitor</a> | ||
+ | </div> | ||
+ | |||
+ | <div id="board_info"> | ||
+ | <img src="whiteboard.jpg"/><br/> | ||
+ | <a href="http://www.lowes.com/lowes/lkn?action=productDetail&productId=61082-46498-31023248&lpage=none">Custom Whiteboards</a> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <!-- Dimmed Background --> | ||
+ | <div id="fade_bg"> </div> | ||
+ | |||
+ | </div> | ||
</body> | </body> | ||
</html> | </html> |
Revision as of 06:35, 24 September 2012