Template:Team:UNAM Genomics Mexico/Templates/menulike

From 2012.igem.org

(Difference between revisions)
 
(62 intermediate revisions not shown)
Line 1: Line 1:
-
<html>
+
<!--
-
<head>
+
-
<style type="text/css">
+
-
/*
+
NAME    menu_template.css
NAME    menu_template.css
VERSION  1.0.0
VERSION  1.0.0
AUTHOR  Treviño Garza Abiel
AUTHOR  Treviño Garza Abiel
DESC    The file contains the layout instructions for the menu and  the website in general used in the UNAM-Genomics_Mexico Team wiki.
DESC    The file contains the layout instructions for the menu and  the website in general used in the UNAM-Genomics_Mexico Team wiki.
-
*/
+
 
 +
IF YOU TAKE SOME CODE SAY TANKS PLEASE
 +
-->
 +
 
 +
 
 +
<html>
 +
<head>
 +
 
 +
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 +
<link href="https://2011.igem.org/Team:UNAM-Genomics_Mexico/Templates/Home" rel="stylesheet" type="text/css" />
 +
<title>UNAM-Genomics_Mexico</title>
 +
<script type="text/javascript">
 +
 
 +
  var _gaq = _gaq || [];
 +
  _gaq.push(['_setAccount', 'UA-19624614-2']);
 +
  _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://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
 +
 
 +
 
 +
 
 +
<style type="text/css">
 +
 
 +
/* smart image enlarger starts here */
 +
/* If your images are not linking to other pages leave the links as <a href="#nogo"> Otherwise enlarger won't work in IE6 */
 +
 
 +
.ienlarger {
 +
float: left;
 +
clear: none; /* set to left or right if needed */
 +
padding-bottom: 5px; /* space between thumbs. Don't change this to margin */
 +
padding-right: 5px; /* space between thumbs and wrapping text when there is any text around it */
 +
}
 +
 
 +
.ienlarger a {
 +
display:block;
 +
text-decoration: none;
 +
/* add cursor:default; to this rule to disable the hand cursor */
 +
}
 +
 
 +
.ienlarger a:hover{ /* don't move this positioning to normal state */
 +
position:relative;
 +
}
 +
 
 +
.ienlarger span img {
 +
border: 1px solid #FFFFFF; /* adds a border around the image */
 +
margin-bottom: 8px; /* pushes the text down from the image */
 +
}
 +
 
 +
.ienlarger a span {  /* this is for the large image and the caption */
 +
position: absolute;
 +
display:none;
 +
color: #FFCC00; /* caption text colour */
 +
text-decoration: none;
 +
font-family: Arial, Helvetica, sans-serif;
 +
font-size: 13px; /* caption text size */
 +
background-color: #000000;
 +
font-weight: bold;
 +
padding-top: 10px;
 +
padding-right: 10px;
 +
padding-bottom: 13px;
 +
padding-left: 10px;
 +
}
 +
 
 +
.ienlarger img { /* leave or IE puts a border around links */
 +
border-width: 0;
 +
}
 +
 
 +
.ienlarger a:hover span {
 +
display:block;
 +
top: 50px; /* means the pop-up's top is 50px away from thumb's top */
 +
left: 50px; /* means the pop-up's left is 90px far from the thumb's left */
 +
z-index: 100;
 +
 +
/* If you want the pop-up open to the left of thumb, remove the left: 90px; and add 
 +
right: 90px; This would mean the right side of the pop-up is 90px far from the right side of thumb */
 +
 
 +
/* If you want the pop-up open above the thumb, remove the top: 50px; and add 
 +
bottom: 50px; This would mean the bottom of the pop-up is 50px far from the bottom of thumb */
 +
 
 +
/* add cursor:default; to this rule to disable the hand cursor only for the large image */
 +
}
 +
 
 +
.resize_thumb {
 +
width: 150px; /* enter desired thumb width here */
 +
height : auto;
 +
}
 +
 
 +
/* smart image enlarger ends here */
/* Menu Style Definitions */
/* Menu Style Definitions */
/* MENU STYLE DEFINITIONS */
/* MENU STYLE DEFINITIONS */
/* CHANGING THE WIKI CSS */
/* CHANGING THE WIKI CSS */
 +
h1,h2,h3,h4,h5,h6{
 +
border-bottom: none;
 +
 +
}
#content {
#content {
Line 95: Line 191:
     height:0px;
     height:0px;
     padding-right:975px;
     padding-right:975px;
-
     background:transparent url(https://2011.igem.org/wiki/skins/common/images/wiki.png) top left no-repeat;
+
     background:transparent url(https://2012.igem.org/wiki/skins/common/images/wiki.png) top left no-repeat;
}
}
element.style {
element.style {
Line 161: Line 257:
top: 0;
top: 0;
         z-index: 4;
         z-index: 4;
-
         left: -200px;
+
         left: -170px;
-
         top:300px;
+
         top:350px;
}
}
.igemimageleft1-hover:hover {
.igemimageleft1-hover:hover {
Line 178: Line 274:
top: 0;
top: 0;
         z-index: 4;
         z-index: 4;
-
         left: -200px;
+
         left: -170px;
-
         top:450px;
+
         top:530px;
}
}
.igemimageleft2-hover:hover {
.igemimageleft2-hover:hover {
Line 191: Line 287:
width:100%;
width:100%;
font-family:"Arial Black", Gadget, sans-serif;
font-family:"Arial Black", Gadget, sans-serif;
 +
}
 +
 +
div.left_image{
 +
float:left;
 +
border:none;
 +
padding: 30px 30px 30px 30px;
 +
}
 +
div.right_image{
 +
float:right;
 +
border:none;
 +
padding: 30px 30px 30px 30px;
 +
}
 +
 +
div.row{
 +
vertical-align:top;
}
}
Line 201: Line 312:
div.descriptive_text{
div.descriptive_text{
/*We must observe div.left_image to deffine the appropiate top-margin value*/
/*We must observe div.left_image to deffine the appropiate top-margin value*/
-
margin: 70px 0px 0px 0px;
+
margin: 40px 0px 0px 0px;
-
padding: 30px 30px 30px 30px;
+
padding: 20px 20px 20px 20px;
border:none;
border:none;
font-size:110%;
font-size:110%;
Line 217: Line 328:
width: 100%;
width: 100%;
background-color: #F0F0F0;
background-color: #F0F0F0;
 +
        background-image: url("https://static.igem.org/mediawiki/2012/c/c4/Unamgenomicsbg.png");
 +
background-repeat: repeat;
color:#000000;
color:#000000;
font-size: 110%;
font-size: 110%;
Line 225: Line 338:
div#textContent{
div#textContent{
background-color: #F0F0F0;
background-color: #F0F0F0;
 +
        background-image: url("https://static.igem.org/mediawiki/2012/c/c4/Unamgenomicsbg.png");
 +
background-repeat: repeat;
margin: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
-
padding: 55px 45px 55px 45px;
+
padding: 35px 35px 35px 35px;
}
}
Line 234: Line 349:
line-height: 1.5em;
line-height: 1.5em;
}
}
-
h1,h2,h3,h4,h5,h6{
 
-
border-bottom: none;
 
-
}
 
-
 
-
h1.NORM_header{
 
-
        text-align:left;
 
-
margin: 15px 1px 1px 1px;
 
-
border:none;
 
-
color:#000000;
 
-
font-size:200%;
 
-
        text-decoration:bold;
 
-
}
 
-
 
-
h1.BSA_header{
 
-
margin: 15px 1px 1px 1px;
 
-
border:none;
 
-
text-decoration:none;
 
-
color:#B0E;
 
-
font-size:110%;
 
-
}
 
-
h1.BSA_announce{
 
-
margin: 20px 1px 1px 1px;
 
-
border:none;
 
-
text-decoration:none;
 
-
color:#B0E;
 
-
font-size:115%;
 
-
}
 
-
h1.BSA_announce a.HP{
 
-
color:#B0E;
 
-
text-decoration:underline;
 
-
}
 
-
h1.BSA_announce a.HP:hover{
 
-
font-size:120%;
 
-
}
 
#textContent a{
#textContent a{
Line 324: Line 405:
font-size:14px;
font-size:14px;
width:976;
width:976;
 +
        font-weight: bold;
}
}
Line 358: Line 440:
bottom:0px;
bottom:0px;
left:85px;
left:85px;
-
z-index:100;
+
z-index:300;
}
}
Line 368: Line 450:
width:162px;
width:162px;
height:60px;
height:60px;
-
z-index:15;
+
z-index:150;
}
}
Line 378: Line 460:
height:0px;
height:0px;
left:0px;
left:0px;
-
z-index:14;
+
z-index:140;
}
}
Line 387: Line 469:
margin-left:15px;
margin-left:15px;
text-transform:uppercase;
text-transform:uppercase;
-
text-shadow:1px 1px 1px #000;
+
        font-weight: bold;
 +
}
}
Line 402: Line 485:
clear:both;
clear:both;
width:162px; /*For dumbass IE7*/
width:162px; /*For dumbass IE7*/
-
font-size:10px;
+
font-size:11px;
letter-spacing:1px;
letter-spacing:1px;
}
}
Line 416: Line 499:
display:none;
display:none;
background-color: #FFF;
background-color: #FFF;
 +
        z-index: 40;
}
}
Line 433: Line 517:
}
}
 +
/* Extra code to get the bottom three to behave */
-
/* Image on hover description */
+
#tablecontentbg{
 +
background-image: url("https://static.igem.org/mediawiki/2012/c/c4/Unamgenomicsbg.png");
 +
}
 +
#contentcolumnwhite{
 +
width: 282px;
 +
height=150px;
 +
margin-left: 312px; /*Margins for content column. Should be "0 right-column-width 0 left-column-width*/
 +
background: #ffffff;
 +
-webkit-box-shadow: 5px 5px 8px #818181;
 +
-moz-box-shadow: 5px 5px 8px #818181;
 +
-moz-border-radius-bottomleft: 25px;
 +
-moz-border-radius-bottomright: 25px;
 +
-moz-border-radius-topleft: 25px;
 +
-moz-border-radius-topright: 25px;
 +
-webkit-border-bottom-left-radius: 25px;
 +
-webkit-border-bottom-right-radius: 25px;
 +
-webkit-border-top-left-radius: 25px;
 +
-webkit-border-top-right-radius: 25px;
 +
}
 +
#contentcolumnblack{
 +
width: 282px;
 +
  height=150px;
 +
margin-left: 312px; /*Margins for content column. Should be "0 right-column-width 0 left-column-width*/
 +
background: #000000;
 +
-webkit-box-shadow: 5px 5px 8px #818181;
 +
-moz-box-shadow: 5px 5px 8px #818181;
 +
-moz-border-radius-bottomleft: 25px;
 +
-moz-border-radius-bottomright: 25px;
 +
-moz-border-radius-topleft: 25px;
 +
-moz-border-radius-topright: 25px;
 +
-webkit-border-bottom-left-radius: 25px;
 +
-webkit-border-bottom-right-radius: 25px;
 +
-webkit-border-top-left-radius: 25px;
 +
-webkit-border-top-right-radius: 25px;
 +
}
 +
#contentcolumn{
 +
width: 282px;
 +
height=150px;
 +
margin-left: 312px; /*Margins for content column. Should be "0 right-column-width 0 left-column-width*/
 +
background: #c3ddf6;
 +
-webkit-box-shadow: 5px 5px 8px #818181;
 +
-moz-box-shadow: 5px 5px 8px #818181;
 +
-moz-border-radius-bottomleft: 25px;
 +
-moz-border-radius-bottomright: 25px;
 +
-moz-border-radius-topleft: 25px;
 +
-moz-border-radius-topright: 25px;
 +
-webkit-border-bottom-left-radius: 25px;
 +
-webkit-border-bottom-right-radius: 25px;
 +
-webkit-border-top-left-radius: 25px;
 +
-webkit-border-top-right-radius: 25px;
 +
}
-
td {
+
#contentcolumn2{
-
background-color: transparent;
+
width: 282px;
-
background-repeat: no-repeat;
+
height=150px;
-
clear: both;
+
margin-left: 312px; /*Margins for content column. Should be "0 right-column-width 0 left-column-width*/
-
height: auto;
+
background: #c3ddf6;
-
width: auto;
+
-webkit-box-shadow: 5px 5px 8px #818181;
 +
-moz-box-shadow: 5px 5px 8px #818181;
 +
-moz-border-radius-bottomleft: 25px;
 +
-moz-border-radius-bottomright: 25px;
 +
-webkit-border-bottom-left-radius: 25px;
 +
-webkit-border-bottom-right-radius: 25px;
}
}
-
.imgteaser {
+
#contentcolumn3{
-
margin: 0;
+
width: 282px;
-
overflow: hidden;
+
height=150px;
-
float: left;
+
margin-left: 312px; /*Margins for content column. Should be "0 right-column-width 0 left-column-width*/
-
position: relative;
+
background: #c3ddf6;
 +
-webkit-box-shadow: 5px 5px 8px #818181;
 +
-moz-box-shadow: 5px 5px 8px #818181;
 +
-moz-border-radius-topleft: 25px;
 +
-moz-border-radius-topright: 25px;
 +
-webkit-border-top-left-radius: 25px;
 +
-webkit-border-top-right-radius: 25px;
}
}
-
.imgteaser a {
+
#contentcolumn2bg{
-
text-decoration: none;
+
background: #c3ddf6;
-
float: left;
+
}
}
-
.imgteaser a:hover {
+
 
-
cursor: pointer;
+
#leftcolumn{
 +
height=150px;
 +
width: 282px; /*Width of left column in percentage*/
 +
margin-left: 0px;
 +
background: #ff8243;
 +
-webkit-box-shadow: 5px 5px 8px #818181;
 +
-moz-box-shadow: 5px 5px 8px #818181;
 +
-moz-border-radius-topright: 25px;
 +
-moz-border-radius-bottomright: 25px;
 +
-webkit-border-top-right-radius: 25px;
 +
-webkit-border-bottom-right-radius: 25px;
 +
 
}
}
-
.imgteaser a img {
+
 
-
float: left;
+
#leftcolumn2{
-
margin: 0;
+
height=150px;
-
border: none;
+
width: 282px; /*Width of left column in percentage*/
-
padding: 20px;
+
margin-left: 0px;
-
background: #FFF;
+
background: #ff8243;
-
border: 0px solid #ddd;
+
-webkit-box-shadow: 5px 5px 8px #818181;
 +
-moz-box-shadow: 5px 5px 8px #818181;
 +
-moz-border-radius-topleft: 25px;
 +
-moz-border-radius-bottomright: 25px;
 +
-webkit-border-top-left-radius: 25px;
 +
-webkit-border-bottom-right-radius: 25px;
 +
 
}
}
-
.imgteaser a .desc { display: none; }
+
#leftcolumn3{
 +
height=150px;
 +
width: 282px; /*Width of left column in percentage*/
 +
margin-left: 0px;
 +
background: #ff8243;
 +
-webkit-box-shadow: 5px 5px 8px #818181;
 +
-moz-box-shadow: 5px 5px 8px #818181;
 +
-moz-border-radius-bottomleft: 25px;
 +
-moz-border-radius-topright: 25px;
 +
-webkit-border-top-right-radius: 25px;
 +
-webkit-border-bottom-left-radius: 25px;
 +
 
-
.imgteaser a:hover .desc{
 
-
display: block;
 
-
font-size: 1.1em;
 
-
padding: 20px 0;
 
-
background: #111;
 
-
filter:alpha(opacity=65);
 
-
opacity:.65;
 
-
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; /*--IE 8 Transparency--*/
 
-
color: #fff;
 
-
position: absolute;
 
-
bottom: 11px;
 
-
left: 11px;
 
-
padding: 10px;
 
-
margin: 0;
 
-
width: 230px;
 
-
        height:100px;
 
-
border-top: 1px solid #999;
 
}
}
-
.imgteaser a:hover .desc strong {
+
#leftcolumn2bg{
-
display: block;
+
background: #ff8243;
-
margin-bottom: 5px;
+
-
font-size:1.2em;
+
}
}
 +
#rightcolumn{
 +
height=150px;
 +
width: 282px; /*Width of right column*/
 +
margin-left: 624px; /*Set margin to -(RightColumnWidth)*/
 +
background: #bdda57;
 +
-webkit-box-shadow: 5px 5px 8px #818181;
 +
-moz-box-shadow: 5px 5px 8px #818181;
 +
-moz-border-radius-topleft: 25px;
 +
-moz-border-radius-bottomleft: 25px;
 +
-webkit-border-top-left-radius: 25px;
 +
-webkit-border-bottom-left-radius: 25px;
 +
}
 +
#rightcolumn2{
 +
height=150px;
 +
width: 282px; /*Width of right column*/
 +
margin-left: 624px; /*Set margin to -(RightColumnWidth)*/
 +
background: #bdda57;
 +
-webkit-box-shadow: 5px 5px 8px #818181;
 +
-moz-box-shadow: 5px 5px 8px #818181;
 +
-moz-border-radius-topright: 25px;
 +
-moz-border-radius-bottomleft: 25px;
 +
-webkit-border-top-right-radius: 25px;
 +
-webkit-border-bottom-left-radius: 25px;
 +
}
 +
#rightcolumn3{
 +
height=150px;
 +
width: 282px; /*Width of right column*/
 +
margin-left: 624px; /*Set margin to -(RightColumnWidth)*/
 +
background: #bdda57;
 +
-webkit-box-shadow: 5px 5px 8px #818181;
 +
-moz-box-shadow: 5px 5px 8px #818181;
 +
-moz-border-radius-topleft: 25px;
 +
-moz-border-radius-bottomright: 25px;
 +
-webkit-border-top-left-radius: 25px;
 +
-webkit-border-bottom-right-radius: 25px;
 +
}
 +
 +
#rightcolumn2bg{
 +
background: #bdda57;
 +
}
 +
 +
 +
/*on hover stuff*/
 +
 +
.thumbnailWrapper { width:600px; display:block; padding-right:30px; } /* not important */
 +
 +
.thumbnailWrapper ul {
 +
list-style-type: none; /* remove the default style for list items (the circles) */
 +
margin:0px; /* remove default margin */
 +
padding:0px; /* remove default padding */
 +
}
 +
 +
.thumbnailWrapper ul li {
 +
float:left; /* important: left float */
 +
position:relative; /* so we can use top and left positioning */
 +
overflow:hidden; /* hide the content outside the boundaries (ZOOM) */
 +
}
 +
 +
.thumbnailWrapper ul li a img {
 +
height:300px; /* not important, the pics we use here are too big */
 +
position:relative; /* so we can use top and left positioning */
 +
border:none; /* remove the default blue border */
 +
}
 +
 +
.captiongray{
 +
position:absolute; /* needed for positioning */
 +
bottom:0px; /* bottom of the list item (container) */
 +
left:0px; /* start from left of the list item (container) */
 +
width:100%; /* stretch to the whole width of container */
 +
height:90%;
 +
display:none; /* hide by default */
 +
/* styling bellow */
 +
background:#444444;
 +
color:white;
 +
opacity:0.8;
 +
}
 +
 +
.captiongray .captionInside{
 +
/* just styling */
 +
padding:10px;
 +
margin:0px;
 +
}
 +
 +
.clear { clear:both; } /* to clear the float after the last item */
 +
 +
.captionmorado{
 +
position:absolute; /* needed for positioning */
 +
bottom:0px; /* bottom of the list item (container) */
 +
left:0px; /* start from left of the list item (container) */
 +
width:100%; /* stretch to the whole width of container */
 +
height:90%;
 +
display:none; /* hide by default */
 +
/* styling bellow */
 +
background:#600080;
 +
color:white;
 +
opacity:0.8;
 +
}
 +
 +
.captionmorado .captionInside{
 +
/* just styling */
 +
padding:10px;
 +
margin:0px;
 +
}
 +
.clear { clear:both; } /* to clear the float after the last item */
 +
 +
.captionmoradoclaro{
 +
position:absolute; /* needed for positioning */
 +
bottom:0px; /* bottom of the list item (container) */
 +
left:0px; /* start from left of the list item (container) */
 +
width:100%; /* stretch to the whole width of container */
 +
height:90%;
 +
display:none; /* hide by default */
 +
/* styling bellow */
 +
background:#6600ff;
 +
color:white;
 +
opacity:0.8;
 +
}
 +
 +
.captionmoradoclaro .captionInside{
 +
/* just styling */
 +
padding:10px;
 +
margin:0px;
 +
}
 +
.clear { clear:both; } /* to clear the float after the last item */
 +
 +
.captionnaranja{
 +
position:absolute; /* needed for positioning */
 +
bottom:0px; /* bottom of the list item (container) */
 +
left:0px; /* start from left of the list item (container) */
 +
width:100%; /* stretch to the whole width of container */
 +
height:90%;
 +
display:none; /* hide by default */
 +
/* styling bellow */
 +
background:#ff751a;
 +
color:white;
 +
opacity:0.8;
 +
}
 +
 +
.captionnaranja .captionInside{
 +
/* just styling */
 +
padding:10px;
 +
margin:0px;
 +
}
 +
.clear { clear:both; } /* to clear the float after the last item */
 +
 +
.captionrojo{
 +
position:absolute; /* needed for positioning */
 +
bottom:0px; /* bottom of the list item (container) */
 +
left:0px; /* start from left of the list item (container) */
 +
width:100%; /* stretch to the whole width of container */
 +
height:90%;
 +
display:none; /* hide by default */
 +
/* styling bellow */
 +
background:#cc0000;
 +
color:white;
 +
opacity:0.8;
 +
}
 +
 +
.captionrojo .captionInside{
 +
/* just styling */
 +
padding:10px;
 +
margin:0px;
 +
}
 +
.clear { clear:both; } /* to clear the float after the last item */
 +
 +
.captionrosa{
 +
position:absolute; /* needed for positioning */
 +
bottom:0px; /* bottom of the list item (container) */
 +
left:0px; /* start from left of the list item (container) */
 +
width:100%; /* stretch to the whole width of container */
 +
height:90%;
 +
display:none; /* hide by default */
 +
/* styling bellow */
 +
background:#cc0099;
 +
color:white;
 +
opacity:0.8;
 +
}
 +
 +
.captionrosa .captionInside{
 +
/* just styling */
 +
padding:10px;
 +
margin:0px;
 +
}
 +
.clear { clear:both; } /* to clear the float after the last item */
 +
 +
.captionverde{
 +
position:absolute; /* needed for positioning */
 +
bottom:0px; /* bottom of the list item (container) */
 +
left:0px; /* start from left of the list item (container) */
 +
width:100%; /* stretch to the whole width of container */
 +
height:90%;
 +
display:none; /* hide by default */
 +
/* styling bellow */
 +
background:#009966;
 +
color:white;
 +
opacity:0.8;
 +
}
 +
.captionverde .captionInside{
 +
/* just styling */
 +
padding:10px;
 +
margin:0px;
 +
}
 +
.clear { clear:both; } /* to clear the float after the last item */
 +
 +
.captionaqua{
 +
position:absolute; /* needed for positioning */
 +
bottom:0px; /* bottom of the list item (container) */
 +
left:0px; /* start from left of the list item (container) */
 +
width:100%; /* stretch to the whole width of container */
 +
height:90%;
 +
display:none; /* hide by default */
 +
/* styling bellow */
 +
background:#009a9a;
 +
color:white;
 +
opacity:0.8;
 +
}
 +
.captionaqua .captionInside{
 +
/* just styling */
 +
padding:10px;
 +
margin:0px;
 +
}
 +
.clear { clear:both; } /* to clear the float after the last item */
 +
 +
.captionazul{
 +
position:absolute; /* needed for positioning */
 +
bottom:0px; /* bottom of the list item (container) */
 +
left:0px; /* start from left of the list item (container) */
 +
width:100%; /* stretch to the whole width of container */
 +
height:90%;
 +
display:none; /* hide by default */
 +
/* styling bellow */
 +
background:#5d8aa8 ;
 +
color:white;
 +
opacity:0.8;
 +
}
 +
.captionazul .captionInside{
 +
/* just styling */
 +
padding:10px;
 +
margin:0px;
 +
}
 +
.clear { clear:both; } /* to clear the float after the last item *
</style>
</style>
</head>
</head>
 +
 +
 +
 +
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 +
 +
 +
<script type="text/javascript">
 +
/*
 +
* 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.
 +
*
 +
*/
 +
 +
// t: current time, b: begInnIng value, c: change In value, d: duration
 +
jQuery.easing['jswing'] = jQuery.easing['swing'];
 +
 +
jQuery.extend( jQuery.easing,
 +
{
 +
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;
 +
}
 +
});
 +
 +
/*
 +
*
 +
* TERMS OF USE - EASING EQUATIONS
 +
*
 +
* Open source under the BSD License.
 +
*
 +
* Copyright 2001 Robert Penner
 +
* 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.
 +
*
 +
*/
 +
</script>
 +
 +
        <script type="text/javascript">
 +
            $(function() {
 +
/**
 +
* for each menu element, on mouseenter,
 +
* we enlarge the image, and show both menu_unamgenomics_activo span and
 +
* sdt_wrap span. If the element has a sub menu (menu_caja),
 +
* then we slide it - if the element is the last one in the menu
 +
* we slide it to the left, otherwise to the right
 +
*/
 +
                $('#menu_unamgenomics > li').bind('mouseenter',function(){
 +
 +
var $elem = $(this);
 +
$elem.find('img')
 +
.stop(true)
 +
.animate({
 +
'width':'155px',
 +
'height':'155px',
 +
'left':'0px'
 +
},400,'easeOutBack')
 +
.andSelf()
 +
.find('.sdt_wrap')
 +
    .stop(true)
 +
.animate({'top':'140px'},500,'easeOutBack')
 +
.andSelf()
 +
.find('.menu_unamgenomics_activo')
 +
    .stop(true)
 +
.animate({'height':'155px'},300,function(){
 +
var $sub_menu = $elem.find('.menu_caja');
 +
if($sub_menu.length){
 +
var left = '155px';
 +
if($elem.parent().children().length == $elem.index()+1)
 +
left = '-155px';
 +
$sub_menu.show().animate({'left':left},200);
 +
}
 +
});
 +
}).bind('mouseleave',function(){
 +
var $elem = $(this);
 +
var $sub_menu = $elem.find('.menu_caja');
 +
if($sub_menu.length)
 +
$sub_menu.hide().css('left','0px');
 +
 +
$elem.find('.menu_unamgenomics_activo')
 +
.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>
 +
 +
<script type="text/javascript" charset="utf-8" src='js/jquery.js'></script>
 +
<script type="text/javascript" charset="utf-8">
 +
$(window).load(function(){
 +
 +
var thumbnail = {
 +
imgIncrease : 0,
 +
effectDuration : 400,
 +
imgWidth : $('.thumbnailWrapper ul li').find('img').width(),
 +
imgHeight : $('.thumbnailWrapper ul li').find('img').height()
 +
};
 +
 +
$('.thumbnailWrapper ul li').css({
 +
 +
'width' : thumbnail.imgWidth,
 +
'height' : thumbnail.imgHeight
 +
});
 +
 +
$('.thumbnailWrapper ul li').hover(function(){
 +
 +
$(this).find('img').stop().animate({
 +
width: parseInt(thumbnail.imgWidth) + thumbnail.imgIncrease,
 +
left: thumbnail.imgIncrease/2*(0),
 +
top: thumbnail.imgIncrease/2*(0)
 +
 +
},{
 +
"duration": thumbnail.effectDuration,
 +
"queue": false
 +
 +
});
 +
 +
$(this).find('.captiongray:not(:animated)').slideDown(thumbnail.effectDuration);
 +
 +
}, function(){
 +
 +
$(this).find('img').animate({
 +
width: thumbnail.imgWidth,
 +
left: 0,
 +
top: 0
 +
 +
}, thumbnail.effectDuration);
 +
 +
//hide the caption using slideUp event
 +
$(this).find('.captiongray').slideUp(thumbnail.effectDuration);
 +
});
 +
});
 +
</script>
 +
   
 +
    <script type="text/javascript" charset="utf-8">
 +
$(window).load(function(){
 +
 +
var thumbnail = {
 +
imgIncrease : 0,
 +
effectDuration : 400,
 +
imgWidth : $('.thumbnailWrapper ul li').find('img').width(),
 +
imgHeight : $('.thumbnailWrapper ul li').find('img').height()
 +
};
 +
 +
$('.thumbnailWrapper ul li').css({
 +
 +
'width' : thumbnail.imgWidth,
 +
'height' : thumbnail.imgHeight
 +
});
 +
 +
$('.thumbnailWrapper ul li').hover(function(){
 +
 +
$(this).find('img').stop().animate({
 +
width: parseInt(thumbnail.imgWidth) + thumbnail.imgIncrease,
 +
left: thumbnail.imgIncrease/2*(0),
 +
top: thumbnail.imgIncrease/2*(0)
 +
 +
},{
 +
"duration": thumbnail.effectDuration,
 +
"queue": false
 +
 +
});
 +
 +
$(this).find('.captionmorado:not(:animated)').slideDown(thumbnail.effectDuration);
 +
 +
}, function(){
 +
 +
$(this).find('img').animate({
 +
width: thumbnail.imgWidth,
 +
left: 0,
 +
top: 0
 +
 +
}, thumbnail.effectDuration);
 +
 +
//hide the caption using slideUp event
 +
$(this).find('.captionmorado').slideUp(thumbnail.effectDuration);
 +
});
 +
});
 +
</script>
 +
   
 +
      <script type="text/javascript" charset="utf-8">
 +
$(window).load(function(){
 +
 +
var thumbnail = {
 +
imgIncrease : 0,
 +
effectDuration : 400,
 +
imgWidth : $('.thumbnailWrapper ul li').find('img').width(),
 +
imgHeight : $('.thumbnailWrapper ul li').find('img').height()
 +
};
 +
 +
$('.thumbnailWrapper ul li').css({
 +
 +
'width' : thumbnail.imgWidth,
 +
'height' : thumbnail.imgHeight
 +
});
 +
 +
$('.thumbnailWrapper ul li').hover(function(){
 +
 +
$(this).find('img').stop().animate({
 +
width: parseInt(thumbnail.imgWidth) + thumbnail.imgIncrease,
 +
left: thumbnail.imgIncrease/2*(0),
 +
top: thumbnail.imgIncrease/2*(0)
 +
 +
},{
 +
"duration": thumbnail.effectDuration,
 +
"queue": false
 +
 +
});
 +
 +
$(this).find('.captionmoradoclaro:not(:animated)').slideDown(thumbnail.effectDuration);
 +
 +
}, function(){
 +
 +
$(this).find('img').animate({
 +
width: thumbnail.imgWidth,
 +
left: 0,
 +
top: 0
 +
 +
}, thumbnail.effectDuration);
 +
 +
//hide the caption using slideUp event
 +
$(this).find('.captionmoradoclaro').slideUp(thumbnail.effectDuration);
 +
});
 +
});
 +
</script>
 +
   
 +
    <script type="text/javascript" charset="utf-8">
 +
$(window).load(function(){
 +
 +
var thumbnail = {
 +
imgIncrease : 0,
 +
effectDuration : 400,
 +
imgWidth : $('.thumbnailWrapper ul li').find('img').width(),
 +
imgHeight : $('.thumbnailWrapper ul li').find('img').height()
 +
};
 +
 +
$('.thumbnailWrapper ul li').css({
 +
 +
'width' : thumbnail.imgWidth,
 +
'height' : thumbnail.imgHeight
 +
});
 +
 +
$('.thumbnailWrapper ul li').hover(function(){
 +
 +
$(this).find('img').stop().animate({
 +
width: parseInt(thumbnail.imgWidth) + thumbnail.imgIncrease,
 +
left: thumbnail.imgIncrease/2*(0),
 +
top: thumbnail.imgIncrease/2*(0)
 +
 +
},{
 +
"duration": thumbnail.effectDuration,
 +
"queue": false
 +
 +
});
 +
 +
$(this).find('.captionnaranja:not(:animated)').slideDown(thumbnail.effectDuration);
 +
 +
}, function(){
 +
 +
$(this).find('img').animate({
 +
width: thumbnail.imgWidth,
 +
left: 0,
 +
top: 0
 +
 +
}, thumbnail.effectDuration);
 +
 +
//hide the caption using slideUp event
 +
$(this).find('.captionnaranja').slideUp(thumbnail.effectDuration);
 +
});
 +
});
 +
</script>
 +
   
 +
    <script type="text/javascript" charset="utf-8">
 +
$(window).load(function(){
 +
 +
var thumbnail = {
 +
imgIncrease : 0,
 +
effectDuration : 400,
 +
imgWidth : $('.thumbnailWrapper ul li').find('img').width(),
 +
imgHeight : $('.thumbnailWrapper ul li').find('img').height()
 +
};
 +
 +
$('.thumbnailWrapper ul li').css({
 +
 +
'width' : thumbnail.imgWidth,
 +
'height' : thumbnail.imgHeight
 +
});
 +
 +
$('.thumbnailWrapper ul li').hover(function(){
 +
 +
$(this).find('img').stop().animate({
 +
width: parseInt(thumbnail.imgWidth) + thumbnail.imgIncrease,
 +
left: thumbnail.imgIncrease/2*(0),
 +
top: thumbnail.imgIncrease/2*(0)
 +
 +
},{
 +
"duration": thumbnail.effectDuration,
 +
"queue": false
 +
 +
});
 +
 +
$(this).find('.captionrojo:not(:animated)').slideDown(thumbnail.effectDuration);
 +
 +
}, function(){
 +
 +
$(this).find('img').animate({
 +
width: thumbnail.imgWidth,
 +
left: 0,
 +
top: 0
 +
 +
}, thumbnail.effectDuration);
 +
 +
//hide the caption using slideUp event
 +
$(this).find('.captionrojo').slideUp(thumbnail.effectDuration);
 +
});
 +
});
 +
</script>
 +
   
 +
    <script type="text/javascript" charset="utf-8">
 +
$(window).load(function(){
 +
 +
var thumbnail = {
 +
imgIncrease : 0,
 +
effectDuration : 400,
 +
imgWidth : $('.thumbnailWrapper ul li').find('img').width(),
 +
imgHeight : $('.thumbnailWrapper ul li').find('img').height()
 +
};
 +
 +
$('.thumbnailWrapper ul li').css({
 +
 +
'width' : thumbnail.imgWidth,
 +
'height' : thumbnail.imgHeight
 +
});
 +
 +
$('.thumbnailWrapper ul li').hover(function(){
 +
 +
$(this).find('img').stop().animate({
 +
width: parseInt(thumbnail.imgWidth) + thumbnail.imgIncrease,
 +
left: thumbnail.imgIncrease/2*(0),
 +
top: thumbnail.imgIncrease/2*(0)
 +
 +
},{
 +
"duration": thumbnail.effectDuration,
 +
"queue": false
 +
 +
});
 +
 +
$(this).find('.captionrosa:not(:animated)').slideDown(thumbnail.effectDuration);
 +
 +
}, function(){
 +
 +
$(this).find('img').animate({
 +
width: thumbnail.imgWidth,
 +
left: 0,
 +
top: 0
 +
 +
}, thumbnail.effectDuration);
 +
 +
//hide the caption using slideUp event
 +
$(this).find('.captionrosa').slideUp(thumbnail.effectDuration);
 +
});
 +
});
 +
</script>
 +
   
 +
    <script type="text/javascript" charset="utf-8">
 +
$(window).load(function(){
 +
 +
var thumbnail = {
 +
imgIncrease : 0,
 +
effectDuration : 400,
 +
imgWidth : $('.thumbnailWrapper ul li').find('img').width(),
 +
imgHeight : $('.thumbnailWrapper ul li').find('img').height()
 +
};
 +
 +
$('.thumbnailWrapper ul li').css({
 +
 +
'width' : thumbnail.imgWidth,
 +
'height' : thumbnail.imgHeight
 +
});
 +
 +
$('.thumbnailWrapper ul li').hover(function(){
 +
 +
$(this).find('img').stop().animate({
 +
width: parseInt(thumbnail.imgWidth) + thumbnail.imgIncrease,
 +
left: thumbnail.imgIncrease/2*(0),
 +
top: thumbnail.imgIncrease/2*(0)
 +
 +
},{
 +
"duration": thumbnail.effectDuration,
 +
"queue": false
 +
 +
});
 +
 +
$(this).find('.captionverde:not(:animated)').slideDown(thumbnail.effectDuration);
 +
 +
}, function(){
 +
 +
$(this).find('img').animate({
 +
width: thumbnail.imgWidth,
 +
left: 0,
 +
top: 0
 +
 +
}, thumbnail.effectDuration);
 +
 +
//hide the caption using slideUp event
 +
$(this).find('.captionverde').slideUp(thumbnail.effectDuration);
 +
});
 +
});
 +
</script>
 +
   
 +
    <script type="text/javascript" charset="utf-8">
 +
$(window).load(function(){
 +
 +
var thumbnail = {
 +
imgIncrease : 0,
 +
effectDuration : 400,
 +
imgWidth : $('.thumbnailWrapper ul li').find('img').width(),
 +
imgHeight : $('.thumbnailWrapper ul li').find('img').height()
 +
};
 +
 +
$('.thumbnailWrapper ul li').css({
 +
 +
'width' : thumbnail.imgWidth,
 +
'height' : thumbnail.imgHeight
 +
});
 +
 +
$('.thumbnailWrapper ul li').hover(function(){
 +
 +
$(this).find('img').stop().animate({
 +
width: parseInt(thumbnail.imgWidth) + thumbnail.imgIncrease,
 +
left: thumbnail.imgIncrease/2*(0),
 +
top: thumbnail.imgIncrease/2*(0)
 +
 +
},{
 +
"duration": thumbnail.effectDuration,
 +
"queue": false
 +
 +
});
 +
 +
$(this).find('.captionaqua:not(:animated)').slideDown(thumbnail.effectDuration);
 +
 +
}, function(){
 +
 +
$(this).find('img').animate({
 +
width: thumbnail.imgWidth,
 +
left: 0,
 +
top: 0
 +
 +
}, thumbnail.effectDuration);
 +
 +
//hide the caption using slideUp event
 +
$(this).find('.captionaqua').slideUp(thumbnail.effectDuration);
 +
});
 +
});
 +
</script>
 +
   
 +
    <script type="text/javascript" charset="utf-8">
 +
$(window).load(function(){
 +
 +
var thumbnail = {
 +
imgIncrease : 0,
 +
effectDuration : 400,
 +
imgWidth : $('.thumbnailWrapper ul li').find('img').width(),
 +
imgHeight : $('.thumbnailWrapper ul li').find('img').height()
 +
};
 +
 +
$('.thumbnailWrapper ul li').css({
 +
 +
'width' : thumbnail.imgWidth,
 +
'height' : thumbnail.imgHeight
 +
});
 +
 +
$('.thumbnailWrapper ul li').hover(function(){
 +
 +
$(this).find('img').stop().animate({
 +
width: parseInt(thumbnail.imgWidth) + thumbnail.imgIncrease,
 +
left: thumbnail.imgIncrease/2*(0),
 +
top: thumbnail.imgIncrease/2*(0)
 +
 +
},{
 +
"duration": thumbnail.effectDuration,
 +
"queue": false
 +
 +
});
 +
 +
$(this).find('.captionazul:not(:animated)').slideDown(thumbnail.effectDuration);
 +
 +
}, function(){
 +
 +
$(this).find('img').animate({
 +
width: thumbnail.imgWidth,
 +
left: 0,
 +
top: 0
 +
 +
}, thumbnail.effectDuration);
 +
 +
//hide the caption using slideUp event
 +
$(this).find('.captionazul').slideUp(thumbnail.effectDuration);
 +
});
 +
});
 +
</script>
 +
<script>
 +
var $slider_started = false;
 +
$(document).ready(function(){
 +
    var $total_slider = $('.top-slider-main > div').length;
 +
    var $label_width = $('.top-slider-main div .left').width();
 +
    var $max_slider_width = ($total_slider -1)*$label_width;
 +
    var $extra_margin = $('.top-slider-main div').width() - $label_width;
 +
 +
    $('.top-slider-main div:not(.slider-box1) .left').mouseover(function(){
 +
        var $slider_index = $('.top-slider-main > div').index($(this).parent()) + 1;
 +
        if($(this).parent().hasClass('on'))
 +
        {
 +
            if($slider_started != 1)
 +
            {
 +
                $slider_started = 2;
 +
                for(i=$total_slider; i>=$slider_index; i--)
 +
                {
 +
                    var $elm = $('.top-slider-main .slider-box'+i);
 +
                    if($elm.hasClass('on'))
 +
                    {
 +
                        $elm.removeClass('on');
 +
                        var $left_margin = ($label_width*(i-1)) + $extra_margin;
 +
                        $elm.stop().animate({marginLeft : $left_margin}, 1500, function(){$slider_started = false;});
 +
                    }
 +
                }
 +
            }
 +
        }
 +
        else
 +
        {
 +
            if($slider_started != 2)
 +
            {
 +
                $slider_started = 1;
 +
                for(i=2; i<=$slider_index; i++)
 +
                {
 +
                    var $elm = $('.top-slider-main .slider-box'+i);
 +
                    if(!$elm.hasClass('on'))
 +
                    {
 +
                        $elm.addClass('on');
 +
                        var $left_margin = ($label_width*(i-1));
 +
                        $elm.stop().animate({marginLeft : $left_margin}, 1500, function(){$slider_started = false;});
 +
                    }
 +
                }
 +
            }
 +
        }
 +
    });
 +
});
 +
</script>
 +
</html>
</html>

Latest revision as of 20:28, 25 October 2012


UNAM-Genomics_Mexico

Retrieved from "http://2012.igem.org/Template:Team:UNAM_Genomics_Mexico/Templates/menulike"