Difference between revisions of "Template:UPMC-Paris"

Line 3: Line 3:
 
<style>
 
<style>
  
−
/********************************* DEFAULT WIKI SETTINGS  ********************************/
+
ul.sdt_menu{
−
 
+
margin:0;
−
#sideMenu, #top_title {display:none;}
+
padding:0;
−
#content { padding:0px; width:1000px; margin-top:-7px; margin-left:0px;}
+
list-style: none;
−
body {background-color:white; }
+
font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
−
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
+
font-size:14px;
−
 
+
width:1020px;
−
/********************************* MENU ********************************/
+
}
−
/* Wrapper for the menu */
+
ul.sdt_menu a{
−
.menu_wrapper {
+
text-decoration:none;
−
width:150px;
+
outline:none;
−
height:100vh;
+
}
−
position:fixed;
+
ul.sdt_menu li{
−
padding:0px;
+
float:left;
−
float:left;
+
width:170px;
−
background-color:#f2f2f2;
+
height:85px;
−
text-align:left;
+
position:relative;
−
}
+
cursor:pointer;
−
 
+
}
−
/* styling for the menu items */
+
ul.sdt_menu li > a{
−
.menu_item {
+
position:absolute;
−
width:100%;
+
top:0px;
−
margin:-2px 0px 0px -20px;
+
left:0px;
−
padding: 10px 10px; 
+
width:170px;
−
border-bottom: 1px solid #d3d3d3;
+
height:85px;
−
font-weight:bold;
+
z-index:12;
−
color:#000000;
+
background:transparent url(../images/overlay.png) no-repeat bottom right;
−
cursor: pointer;
+
-moz-box-shadow:0px 0px 2px #000 inset;
−
}
+
-webkit-box-shadow:0px 0px 2px #000 inset;
−
 
+
box-shadow:0px 0px 2px #000 inset;
−
/* when hovering on a menu item */
+
}
−
.menu_item:hover {
+
ul.sdt_menu li a img{
−
color:#000000;
+
border:none;
−
background-color: #72c9b6;
+
position:absolute;
−
}
+
width:0px;
−
 
+
height:0px;
−
/* decoration icon for the menu buttons*/
+
bottom:0px;
−
.icon {
+
left:85px;
−
float:right; 
+
z-index:100;
−
font-size:16px;
+
-moz-box-shadow:0px 0px 4px #000;
−
font-weight:bold;  
+
-webkit-box-shadow:0px 0px 4px #000;
−
}
+
box-shadow:0px 0px 4px #000;
−
+
}
−
/* this is the icon for when the content is collapsed */
+
ul.sdt_menu li span.sdt_wrap{
−
.plus::before {
+
position:absolute;
−
content: "+";  
+
top:25px;
−
}
+
left:0px;
−
/* this is the icon for when the content is expanded */
+
width:170px;
−
.less::before {
+
height:60px;
−
content: "–";
+
z-index:15;
−
}
+
}
−
 
+
ul.sdt_menu li span.sdt_active{
−
/* styling for the ul that creates the buttons */
+
position:absolute;
−
ul.menu_items {
+
background:#111;
−
width:100%;
+
top:85px;
−
margin-left:0px;
+
width:170px;
−
padding:0px;
+
height:0px;
−
list-style: none;
+
left:0px;
−
}
+
z-index:14;
−
 
+
-moz-box-shadow:0px 0px 4px #000 inset;
−
/* styling for the li that are the menu items */
+
-webkit-box-shadow:0px 0px 4px #000 inset;
−
.menu_items li {
+
box-shadow:0px 0px 4px #000 inset;
−
width:90%;
+
}
−
margin-top:-2px;
+
ul.sdt_menu li span span.sdt_link,
−
padding: 15px 0px 15px 15px ;
+
ul.sdt_menu li span span.sdt_descr,
−
display:block;
+
ul.sdt_menu li div.sdt_box a{
−
border-bottom: 1px solid #d3d3d3; 
+
margin-left:15px;
−
text-align:left;
+
text-transform:uppercase;
−
font-weight:bold;
+
text-shadow:1px 1px 1px #000;
−
text-decoration:none;  
+
}
−
color:#000000;
+
ul.sdt_menu li span span.sdt_link{
−
list-style-type:none;
+
color:#fff;
−
cursor:pointer;
+
font-size:24px;
−
-webkit-transition: all 0.4s ease;
+
float:left;
−
-moz-transition: all 0.4s ease;
+
clear:both;
−
-ms-transition: all 0.4s ease;
+
}
−
-o-transition: all 0.4s ease; transition: all 0.4s ease; 
+
ul.sdt_menu li span span.sdt_descr{
−
}
+
color:#0B75AF;
−
 
+
float:left;
−
.menu_item a {
+
clear:both;
−
width: 100%;
+
width:155px; /*For dumbass IE7*/
−
margin-left: -20px;
+
font-size:10px;
−
padding: 11px 90px 12px 20px;
+
letter-spacing:1px;
−
text-decoration: none;
+
}
−
color:black;
+
ul.sdt_menu li div.sdt_box{
−
}
+
display:block;
−
 
+
position:absolute;
−
/* When hovering on a menu item */
+
width:170px;
−
.menu_items li:hover {  
+
overflow:hidden;
−
background-color:#72c9b6;
+
height:170px;
−
color: #000000;
+
top:85px;
−
}
+
left:0px;
−
 
+
display:none;
−
/* styling for the submenus */
+
background:#000;
−
.submenu {
+
}
−
width:100%;  
+
ul.sdt_menu li div.sdt_box a{
−
display: none;
+
float:left;
−
font-weight:bold;
+
clear:both;
−
cursor:pointer;  
+
line-height:30px;
−
 
+
color:#0B75AF;
−
}
+
}
−
 
+
ul.sdt_menu li div.sdt_box a:first-child{
−
/* moving the margin for the submenu ul list */
+
margin-top:15px;
−
ul.submenu {  
+
}
−
width: 100%;
+
ul.sdt_menu li div.sdt_box a:hover{
−
margin: 10px 0px -11px 0px;
+
color:#fff;
−
list-style: none;
+
}
−
}
+
−
 
+
−
/*styling for the submenu buttons */
+
−
.submenu li {
+
−
width: 100%;  
+
−
margin-left: 10px;
+
−
margin-bottom: 0px;
+
−
}
+
−
 
+
−
 
+
−
/* hover state for the submenu buttons */
+
−
.submenu li a {
+
−
width: 100%;
+
−
padding: 5px 10px;
+
−
display: inline-block;
+
−
border-bottom: 1px solid #d3d3d3;
+
−
background-color:white;  
+
−
text-decoration:none;
+
−
color:#000000;  
+
−
}
+
−
 
+
−
 
+
−
 
+
−
.submenu li a:hover  {
+
−
background-color:#000000;  
+
−
color: #72c9b6;
+
−
}
+
−
 
+
−
 
+
−
/* When the screen is smaller than 680px, the menu has the option to hide/show - this button controls that */
+
−
.collapsable_menu_control {
+
−
width:100%;  
+
−
padding: 15px 0px;
+
−
display:none;  
+
−
background-color:#000000;  
+
−
text-align:center;
+
−
font-weight:bold;
+
−
color:#72c9b6;
+
−
cursor:pointer;
+
−
-webkit-transition: all 0.4s ease;
+
−
-moz-transition: all 0.4s ease;  
+
−
-ms-transition: all 0.4s ease;  
+
−
-o-transition: all 0.4s ease;
+
−
transition: all 0.4s ease;
+
−
}
+
−
 
+
−
/* when hovering on that button */
+
−
.collapsable_menu_control:hover {  
+
−
background-color: #72c9b6;
+
−
color:#000000;
+
−
}
+
−
 
+
−
/********************************* CONTENT OF THE PAGE ********************************/
+
−
 
+
−
/* Wrapper for the content */
+
−
.content_wrapper {
+
−
width: 85%;
+
−
margin-left:150px;
+
−
padding:10px 0px;  
+
−
float:left;  
+
−
background-color:white;  
+
−
}
+
−
 
+
−
/*LAYOUT */
+
−
.column  {  
+
−
padding: 10px 0px;
+
−
float:left;
+
−
background-color:white;  
+
−
}
+
−
 
+
−
.full_size {
+
−
width:100%;  
+
−
}
+
−
 
+
−
.full_size img {
+
−
padding: 10px 15px;
+
−
width:96.5%;  
+
−
}
+
−
 
+
−
.half_size {
+
−
width: 50%;  
+
−
}
+
−
.half_size img {
+
−
padding: 10px 15px;
+
−
width: 93%;  
+
−
}
+
−
 
+
−
 
+
−
.clear {
+
−
clear:both;
+
−
}
+
−
 
+
−
.highlight {
+
−
width: 90%;
+
−
margin: auto;
+
−
padding: 15px 5px;
+
−
background-color: #f2f2f2;  
+
−
}
+
−
 
+
−
.judges-will-not-evaluate {
+
−
border: 4px solid #72c9b6;
+
−
display: block;
+
−
margin: 5px 15px;
+
−
width: 95%;
+
−
font-weight:bold;
+
−
}
+
−
 
+
−
 
+
−
/*STYLING */
+
−
 
+
−
/* styling for the titles */
+
−
.content_wrapper h1, .content_wrapper h2 {
+
−
padding:5px 15px;
+
−
border-bottom:0px;
+
−
color:#72c9b6;
+
−
 
+
−
}
+
−
.content_wrapper h3, .content_wrapper h4, .content_wrapper h5, .content_wrapper h6 {
+
−
padding:5px 15px;
+
−
border-bottom:0px;
+
−
color: #000000; 
+
−
}
+
−
 
+
−
 
+
−
/* font and text */
+
−
.content_wrapper p {
+
−
padding:0px 15px;
+
−
font-size: 13px;
+
−
font-family:Tahoma, Geneva, sans-serif;
+
−
}
+
−
 
+
−
/* Links */
+
−
.content_wrapper a {  
+
−
font-weight: bold;  
+
−
text-decoration: underline;
+
−
text-decoration-color:#72c9b6;
+
−
color: #72c9b6;
+
−
-webkit-transition: all 0.4s ease;
+
−
-moz-transition: all 0.4s ease;
+
−
-ms-transition: all 0.4s ease;
+
−
-o-transition: all 0.4s ease;
+
−
transition: all 0.4s ease;
+
−
}
+
−
 
+
−
/* hover for the links */
+
−
.content_wrapper a:hover {
+
−
text-decoration:none;
+
−
color:#000000;
+
−
}
+
−
 
+
−
/* non numbered lists */
+
−
.content_wrapper ul {
+
−
padding:0px 20px;
+
−
font-size: 13px;
+
−
font-family:Tahoma, Geneva, sans-serif;  
+
−
}
+
−
 
+
−
/* numbered lists */
+
−
.content_wrapper ol {
+
−
padding:0px;  
+
−
font-size: 13px;
+
−
font-family:Tahoma, Geneva, sans-serif;
+
−
}
+
−
 
+
−
/* Table */
+
−
.content_wrapper table {  
+
−
width: 97%;  
+
−
margin:15px 10px;  
+
−
border: 1px solid #d3d3d3;  
+
−
border-collapse: collapse;  
+
−
}
+
−
 
+
−
/* table cells */
+
−
.content_wrapper  td {
+
−
padding: 10px;
+
−
vertical-align: text-top;
+
−
border: 1px solid #d3d3d3;  
+
−
border-collapse: collapse;
+
−
}
+
−
 
+
−
/* table headers */
+
−
.content_wrapper th {  
+
−
padding: 10px;  
+
−
vertical-align: text-top;  
+
−
border: 1px solid #d3d3d3;  
+
−
border-collapse: collapse;  
+
−
background-color:#f2f2f2;  
+
−
}
+
−
 
+
−
/* Button class */
+
−
.button_click {
+
−
margin: 10px auto;
+
−
padding: 15px; width:12%;
+
−
text-align:center;  
+
−
font-weight:bold;
+
−
background-color: #72c9b6;
+
−
cursor:pointer; 
+
−
-webkit-transition: all 0.4s ease;
+
−
-moz-transition: all 0.4s ease;
+
−
-ms-transition: all 0.4s ease;  
+
−
-o-transition: all 0.4s ease;
+
−
transition: all 0.4s ease;  
+
−
}
+
−
 
+
−
/* button class on hover */
+
−
.button_click:hover { 
+
−
background-color:#000000;  
+
−
color:#72c9b6;
+
−
}
+
−
 
+
−
/********************************* RESPONSIVE STYLING ********************************/
+
−
 
+
−
/* IF THE SCREEN IS LESS THAN 1000PX */
+
−
 
+
−
@media only screen and (max-width: 1000px) {
+
−
 
+
−
#content {width:100%; }
+
−
.menu_wrapper {width:15%;}
+
−
.content_wrapper {margin-left: 15%;}
+
−
.menu_item {display:block;}
+
−
.icon {display:none;}
+
−
.highlight {padding:10px 0px;}
+
−
}
+
−
 
+
−
 
+
−
/* IF THE SCREEN IS LESS THAN 680PX */
+
−
 
+
−
@media only screen and (max-width: 680px) {
+
−
.collapsable_menu_control { display:block;}
+
−
.menu_item {display:none;}
+
−
.menu_wrapper { width:100%; height: 15%; position:relative;}
+
−
.content_wrapper {width:100%; margin-left:0px;}
+
−
.column.half_size {width:100%; }
+
−
.column img { width: 100%; padding: 5px 0px;}
+
−
.icon {display:block;}
+
−
.highlight {padding:15px 5px;}
+
−
}
+
  
 
</style>
 
</style>
Line 365: Line 128:
  
  
−
<div class="menu_wrapper" >
+
<div class="content">
−
 
+
<h1 class="title">iGEM BEE SUBTILIS</h1>
−
 
+
<ul id="sdt_menu" class="sdt_menu">
−
 
+
<li>
−
 
+
<a href="#">
−
<div class="collapsable_menu_control"> MENU ▤ </div>
+
<img src="images/2.jpg" alt=""/>
−
 
+
<span class="sdt_active"></span>
−
<ul id="accordion" class="accordion">
+
<span class="sdt_wrap">
−
 
+
<span class="sdt_link">Home</span>
−
<li class="menu_item"> <a href="https://2016.igem.org/Team:UPMC-Paris">HOME </a> </li>
+
<span class="sdt_descr">Get to know me</span>
−
 
+
</span>
−
 
+
</a>
−
<li class="menu_item"> <div class="icon plus"></div> TEAM
+
</li>
−
<ul class="submenu">
+
<li>
−
<li> <a href=" https://2016.igem.org/Team:UPMC-Paris/Team"> Team  </a> </li>
+
<a href="#">
−
<li> <a href="https://2016.igem.org/Team:UPMC-Paris/Collaborations">★  Collaborations </a> </li>
+
<img src="images/1.jpg" alt=""/>
−
                    </ul>
+
<span class="sdt_active"></span>
−
                </li>
+
<span class="sdt_wrap">
−
 
+
<span class="sdt_link">Portfolio</span>
−
<li class="menu_item"> <div class="icon plus"></div> PROJECT 
+
<span class="sdt_descr">My work</span>
−
<ul class="submenu">
+
</span>
−
<li> <a href="https://2016.igem.org/Team:UPMC-Paris/Description"> ★  Description </a></li>
+
</a>
−
<li> <a href="https://2016.igem.org/Team:UPMC-Paris/Design"> ★ Design </a></li>
+
<div class="sdt_box">
−
<li> <a href="https://2016.igem.org/Team:UPMC-Paris/Experiments"> Experiments </a></li>
+
<a href="#">Websites</a>
−
<li> <a href="https://2016.igem.org/Team:UPMC-Paris/Proof"> ★ Proof of Concept </a></li>
+
<a href="#">Illustrations</a>
−
<li> <a href="https://2016.igem.org/Team:UPMC-Paris/Demonstrate"> ★ Demonstrate </a></li>
+
<a href="#">Photography</a>
−
<li> <a href="https://2016.igem.org/Team:UPMC-Paris/Results"> Results </a></li>
+
</div>
−
<li> <a href="https://2016.igem.org/Team:UPMC-Paris/Notebook"> Notebook </a></li>
+
</li>
−
                    </ul>
+
<li>
−
                </li>
+
<a href="#">
−
 
+
<img src="images/3.jpg" alt=""/>
−
<li class="menu_item"> <div class="icon plus"></div> PARTS 
+
<span class="sdt_active"></span>
−
<ul class="submenu">
+
<span class="sdt_wrap">
−
<li> <a href="https://2016.igem.org/Team:UPMC-Paris/Parts">Parts </a></li>
+
<span class="sdt_link">Inspiration</span>
−
<li> <a href="https://2016.igem.org/Team:UPMC-Paris/Basic_Part"> ★ Basic Parts </a></li>
+
<span class="sdt_descr">Where ideas get born</span>
−
<li> <a href="https://2016.igem.org/Team:UPMC-Paris/Composite_Part"> ★ Composite Parts </a></li>
+
</span>
−
<li> <a href="https://2016.igem.org/Team:UPMC-Paris/Part_Collection"> ★ Part Collection </a></li>
+
</a>
−
                    </ul>
+
</li>
−
                </li>
+
<li>
−
 
+
<a href="#">
−
 
+
<img src="images/4.jpg" alt=""/>
−
<li class="menu_item"> <a href="https://2016.igem.org/Team:UPMC-Paris/Safety"> SAFETY </a> </li>
+
<span class="sdt_active"></span>
−
 
+
<span class="sdt_wrap">
−
 
+
<span class="sdt_link">Photos</span>
−
<li class="menu_item"> <a href="https://2016.igem.org/Team:UPMC-Paris/Attributions">★  ATTRIBUTIONS </a></li>
+
<span class="sdt_descr">I like to photograph</span>
−
 
+
</span>
−
 
+
</a>
−
<li class="menu_item"> <div class="icon plus"></div> HUMAN PRACTICES
+
</li>
−
<ul class="submenu">
+
<li>
−
<li> <a href="https://2016.igem.org/Team:UPMC-Paris/Human_Practices"> Human Practices </a></li>
+
<a href="#">
−
<li> <a href="https://2016.igem.org/Team:UPMC-Paris/HP/Silver">★ Silver </a></li>
+
<img src="images/5.jpg" alt=""/>
−
<li> <a href="https://2016.igem.org/Team:UPMC-Paris/HP/Gold">★ Gold </a></li>
+
<span class="sdt_active"></span>
−
<li> <a href="https://2016.igem.org/Team:UPMC-Paris/Integrated_Practices"> ★ Integrated Practices </a></li>
+
<span class="sdt_wrap">
−
<li> <a href="https://2016.igem.org/Team:UPMC-Paris/Engagement">★ Engagement </a></li>
+
<span class="sdt_link">Blog</span>
−
                    </ul>
+
<span class="sdt_descr">I write about design</span>
−
                </li>
+
</span>
−
 
+
</a>
−
 
+
</li>
−
<li class="menu_item"> <div class="icon plus"></div> AWARDS
+
<li>
−
<ul class="submenu">
+
<a href="#">
−
<li><a href="https://2016.igem.org/Team:UPMC-Paris/Entrepreneurship"> ★ Entrepreneurship </a></li>
+
<img src="images/6.png" alt=""/>
−
<li> <a href="https://2016.igem.org/Team:UPMC-Paris/Hardware"> ★ Hardware </a></li>
+
<span class="sdt_active"></span>
−
<li> <a href="https://2016.igem.org/Team:UPMC-Paris/Software">★ Software </a></li>
+
<span class="sdt_wrap">
−
<li> <a href="https://2016.igem.org/Team:UPMC-Paris/Measurement">★  Measurement </a></li>
+
<span class="sdt_link">Projects</span>
−
<li> <a href="https://2016.igem.org/Team:UPMC-Paris/Model">★ Model </a></li>
+
<span class="sdt_descr">I like to code</span>
−
 
+
</span>
−
                    </ul>
+
</a>
−
                </li>
+
<div class="sdt_box">
−
</ul>
+
<a href="#">Job Board Website</a>
−
 
+
<a href="#">Shopping Cart</a>
−
</div>
+
<a href="#">Interactive Maps</a>
−
 
+
</div>
−
 
+
</li>
−
 
+
</ul>
−
 
+
</div>
−
 
+
        <div>
−
<div class="content_wrapper">
+
            <span class="reference">
−
 
+
                <a href="http://tympanus.net/codrops/2010/07/16/slide-down-box-menu/">back to the Codrops Tutorial</a>
−
 
+
<a href="http://www.flickr.com/photos/arcticpuppy/sets/72157622090180990/">Images by tibchris</a>
−
 
+
            </span>
−
<h1 id="team_name">  </h1>
+
</div>
−
<h4 id="page_name">  </h4>
+
−
 
+
  
  
  
 +
<!-- The JavaScript -->
 +
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 +
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
 +
        <script type="text/javascript">
 +
            $(function() {
 +
/**
 +
* for each menu element, on mouseenter,
 +
* we enlarge the image, and show both sdt_active span and
 +
* sdt_wrap span. If the element has a sub menu (sdt_box),
 +
* then we slide it - if the element is the last one in the menu
 +
* we slide it to the left, otherwise to the right
 +
*/
 +
                $('#sdt_menu > li').bind('mouseenter',function(){
 +
var $elem = $(this);
 +
$elem.find('img')
 +
.stop(true)
 +
.animate({
 +
'width':'170px',
 +
'height':'170px',
 +
'left':'0px'
 +
},400,'easeOutBack')
 +
.andSelf()
 +
.find('.sdt_wrap')
 +
    .stop(true)
 +
.animate({'top':'140px'},500,'easeOutBack')
 +
.andSelf()
 +
.find('.sdt_active')
 +
    .stop(true)
 +
.animate({'height':'170px'},300,function(){
 +
var $sub_menu = $elem.find('.sdt_box');
 +
if($sub_menu.length){
 +
var left = '170px';
 +
if($elem.parent().children().length == $elem.index()+1)
 +
left = '-170px';
 +
$sub_menu.show().animate({'left':left},200);
 +
}
 +
});
 +
}).bind('mouseleave',function(){
 +
var $elem = $(this);
 +
var $sub_menu = $elem.find('.sdt_box');
 +
if($sub_menu.length)
 +
$sub_menu.hide().css('left','0px');
 +
 +
$elem.find('.sdt_active')
 +
.stop(true)
 +
.animate({'height':'0px'},300)
 +
.andSelf().find('img')
 +
.stop(true)
 +
.animate({
 +
'width':'0px',
 +
'height':'0px',
 +
'left':'85px'},400)
 +
.andSelf()
 +
.find('.sdt_wrap')
 +
.stop(true)
 +
.animate({'top':'25px'},500);
 +
});
 +
            });
 +
        </script>
  
  
Line 460: Line 280:
 
// This is the jquery part of your template.  Try not modify any of this code since it makes your menu work.
 
// This is the jquery part of your template.  Try not modify any of this code since it makes your menu work.
  
−
$(document).ready(function() {
+
/*
 +
* jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/
 +
*
 +
* Uses the built in easing capabilities added In jQuery 1.1
 +
* to offer multiple easing options
 +
*
 +
* TERMS OF USE - jQuery Easing
 +
*
 +
* Open source under the BSD License.
 +
*
 +
* Copyright © 2008 George McGinley Smith
 +
* All rights reserved.
 +
*
 +
* Redistribution and use in source and binary forms, with or without modification,
 +
* are permitted provided that the following conditions are met:
 +
*
 +
* Redistributions of source code must retain the above copyright notice, this list of
 +
* conditions and the following disclaimer.
 +
* Redistributions in binary form must reproduce the above copyright notice, this list
 +
* of conditions and the following disclaimer in the documentation and/or other materials
 +
* provided with the distribution.
 +
*
 +
* Neither the name of the author nor the names of contributors may be used to endorse
 +
* or promote products derived from this software without specific prior written permission.
 +
*
 +
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
 +
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
 +
* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
 +
*  COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
 +
*  EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
 +
*  GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
 +
* AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
 +
*  NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
 +
* OF THE POSSIBILITY OF SUCH DAMAGE.
 +
*
 +
*/
  
−
$("#HQ_page").attr('id','');
+
// t: current time, b: begInnIng value, c: change In value, d: duration
−
+
jQuery.easing['jswing'] = jQuery.easing['swing'];
  
−
if ( wgPageName.substring( 0,  8) == "Template")  {   // if the page is a template it displays the full name in a single line
+
jQuery.extend( jQuery.easing,
−
$("#team_name").html( wgPageName );  
+
{
 +
def: 'easeOutQuad',
 +
swing: function (x, t, b, c, d) {
 +
//alert(jQuery.easing.default);
 +
return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
 +
},
 +
easeInQuad: function (x, t, b, c, d) {
 +
return c*(t/=d)*t + b;
 +
},
 +
easeOutQuad: function (x, t, b, c, d) {
 +
return -c *(t/=d)*(t-2) + b;
 +
},
 +
easeInOutQuad: function (x, t, b, c, d) {
 +
if ((t/=d/2) < 1) return c/2*t*t + b;
 +
return -c/2 * ((--t)*(t-2) - 1) + b;
 +
},
 +
easeInCubic: function (x, t, b, c, d) {
 +
return c*(t/=d)*t*t + b;
 +
},
 +
easeOutCubic: function (x, t, b, c, d) {
 +
return c*((t=t/d-1)*t*t + 1) + b;
 +
},
 +
easeInOutCubic: function (x, t, b, c, d) {
 +
if ((t/=d/2) < 1) return c/2*t*t*t + b;
 +
return c/2*((t-=2)*t*t + 2) + b;
 +
},
 +
easeInQuart: function (x, t, b, c, d) {
 +
return c*(t/=d)*t*t*t + b;
 +
},
 +
easeOutQuart: function (x, t, b, c, d) {
 +
return -c * ((t=t/d-1)*t*t*t - 1) + b;
 +
},
 +
easeInOutQuart: function (x, t, b, c, d) {
 +
if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
 +
return -c/2 * ((t-=2)*t*t*t - 2) + b;
 +
},
 +
easeInQuint: function (x, t, b, c, d) {
 +
return c*(t/=d)*t*t*t*t + b;
 +
},
 +
easeOutQuint: function (x, t, b, c, d) {
 +
return c*((t=t/d-1)*t*t*t*t + 1) + b;
 +
},
 +
easeInOutQuint: function (x, t, b, c, d) {
 +
if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
 +
return c/2*((t-=2)*t*t*t*t + 2) + b;
 +
},
 +
easeInSine: function (x, t, b, c, d) {
 +
return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
 +
},
 +
easeOutSine: function (x, t, b, c, d) {
 +
return c * Math.sin(t/d * (Math.PI/2)) + b;
 +
},
 +
easeInOutSine: function (x, t, b, c, d) {
 +
return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
 +
},
 +
easeInExpo: function (x, t, b, c, d) {
 +
return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
 +
},
 +
easeOutExpo: function (x, t, b, c, d) {
 +
return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
 +
},
 +
easeInOutExpo: function (x, t, b, c, d) {
 +
if (t==0) return b;
 +
if (t==d) return b+c;
 +
if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
 +
return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
 +
},
 +
easeInCirc: function (x, t, b, c, d) {
 +
return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
 +
},
 +
easeOutCirc: function (x, t, b, c, d) {
 +
return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
 +
},
 +
easeInOutCirc: function (x, t, b, c, d) {
 +
if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
 +
return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
 +
},
 +
easeInElastic: function (x, t, b, c, d) {
 +
var s=1.70158;var p=0;var a=c;
 +
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
 +
if (a < Math.abs(c)) { a=c; var s=p/4; }
 +
else var s = p/(2*Math.PI) * Math.asin (c/a);
 +
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
 +
},
 +
easeOutElastic: function (x, t, b, c, d) {
 +
var s=1.70158;var p=0;var a=c;
 +
if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
 +
if (a < Math.abs(c)) { a=c; var s=p/4; }
 +
else var s = p/(2*Math.PI) * Math.asin (c/a);
 +
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
 +
},
 +
easeInOutElastic: function (x, t, b, c, d) {
 +
var s=1.70158;var p=0;var a=c;
 +
if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);
 +
if (a < Math.abs(c)) { a=c; var s=p/4; }
 +
else var s = p/(2*Math.PI) * Math.asin (c/a);
 +
if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
 +
return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
 +
},
 +
easeInBack: function (x, t, b, c, d, s) {
 +
if (s == undefined) s = 1.70158;
 +
return c*(t/=d)*t*((s+1)*t - s) + b;
 +
},
 +
easeOutBack: function (x, t, b, c, d, s) {
 +
if (s == undefined) s = 1.70158;
 +
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
 +
},
 +
easeInOutBack: function (x, t, b, c, d, s) {
 +
if (s == undefined) s = 1.70158;
 +
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
 +
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
 +
},
 +
easeInBounce: function (x, t, b, c, d) {
 +
return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
 +
},
 +
easeOutBounce: function (x, t, b, c, d) {
 +
if ((t/=d) < (1/2.75)) {
 +
return c*(7.5625*t*t) + b;
 +
} else if (t < (2/2.75)) {
 +
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
 +
} else if (t < (2.5/2.75)) {
 +
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
 +
} else {
 +
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
 
}
 
}
 +
},
 +
easeInOutBounce: function (x, t, b, c, d) {
 +
if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
 +
return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
 +
}
 +
});
  
−
else if (  ( (wgPageName.match(/\//g) || []).length ) == 0 ) { // if it is the home page , just print the team's name
+
/*
−
$("#team_name").html( wgPageName.substring( 5, wgPageName.length ) );
+
  *
−
}
+
* TERMS OF USE - EASING EQUATIONS
−
 
+
*
−
else {
+
* Open source under the BSD License.
−
// this adds the team's name as an h1
+
  *
−
$("#team_name").html( wgPageName.substring( 5 , wgPageName.indexOf("/") ) );
+
* Copyright © 2001 Robert Penner
−
 
+
* All rights reserved.
−
// this adds the page's title as an h4
+
  *
−
$("#page_name").html (    ( wgPageName.substring( wgPageName.indexOf("/") + 1, wgPageName.length ) ).replace( /\/|_/g , " ") );
+
  * Redistribution and use in source and binary forms, with or without modification,  
−
}
+
* are permitted provided that the following conditions are met:
−
 
+
*
−
 
+
* Redistributions of source code must retain the above copyright notice, this list of
−
if( ($(location).attr('href')).indexOf("submit") >= 0 ) {
+
* conditions and the following disclaimer.
−
$(".menu_wrapper").css( { "position": "absolute", "height": "auto"});
+
* Redistributions in binary form must reproduce the above copyright notice, this list
−
$("#wpTextbox1").css( 'margin-top', '440px');
+
* of conditions and the following disclaimer in the documentation and/or other materials
−
}
+
* provided with the distribution.
−
 
+
*
−
 
+
* Neither the name of the author nor the names of contributors may be used to endorse
−
 
+
* or promote products derived from this software without specific prior written permission.
−
 
+
*
−
$('#accordion').find('.menu_item').click(function(){
+
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
−
 
+
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
−
//Expand or collapse this panel
+
* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
−
submenu = $(this).find('.submenu');
+
*  COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
−
submenu.toggle();
+
*  EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
−
 
+
*  GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
−
icon = $(this).find('.icon');
+
* AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
−
 
+
*  NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
−
if ( !$( submenu ).is(':visible') ) {
+
* OF THE POSSIBILITY OF SUCH DAMAGE.  
−
icon.removeClass("less").addClass("plus");
+
*
−
}
+
*/
−
else {
+
−
icon.removeClass("plus").addClass("less");
+
−
}
+
−
 
+
−
//Hide the other panels
+
−
$(".submenu").not(submenu).hide();
+
−
$(".icon").not(icon).removeClass("less").addClass("plus");
+
−
});
+
−
 
+
−
 
+
−
$(".collapsable_menu_control").click(function() {
+
−
$(".menu_item").toggle();
+
−
});
+
−
 
+
−
$( window ).resize(function() {
+
−
$(".menu_item").show();
+
−
});
+
−
 
+
−
 
+
−
});
+
−
 
+
−
 
+
  
  

Revision as of 08:29, 2 August 2016

iGEM BEE SUBTILIS