Template:Team:UNAM Genomics Mexico/Templates/menulike

From 2012.igem.org

(Difference between revisions)
 
(61 intermediate revisions not shown)
Line 1: Line 1:
-
<html>
+
<!--
-
/*
+
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>
<head>
Line 31: Line 35:
<style type="text/css">
<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 118: 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 184: 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 201: 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 214: 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 224: 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 240: 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 248: 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 257: 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 347: Line 405:
font-size:14px;
font-size:14px;
width:976;
width:976;
 +
        font-weight: bold;
}
}
Line 381: Line 440:
bottom:0px;
bottom:0px;
left:85px;
left:85px;
-
z-index:100;
+
z-index:300;
}
}
Line 391: Line 450:
width:162px;
width:162px;
height:60px;
height:60px;
-
z-index:15;
+
z-index:150;
}
}
Line 401: Line 460:
height:0px;
height:0px;
left:0px;
left:0px;
-
z-index:14;
+
z-index:140;
}
}
Line 410: Line 469:
margin-left:15px;
margin-left:15px;
text-transform:uppercase;
text-transform:uppercase;
-
text-shadow:1px 1px 1px #000;
+
        font-weight: bold;
 +
}
}
Line 425: 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 439: Line 499:
display:none;
display:none;
background-color: #FFF;
background-color: #FFF;
 +
        z-index: 40;
}
}
Line 456: 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>
Line 792: Line 1,164:
         </script>
         </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"