Template:Team:UNAM Genomics Mexico/Templates/menulike

From 2012.igem.org

(Difference between revisions)
 
(28 intermediate revisions not shown)
Line 4: Line 4:
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
-->
-->
Line 33: 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 279: Line 350:
}
}
-
 
-
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 400: Line 440:
bottom:0px;
bottom:0px;
left:85px;
left:85px;
-
z-index:100;
+
z-index:300;
}
}
Line 410: Line 450:
width:162px;
width:162px;
height:60px;
height:60px;
-
z-index:15;
+
z-index:150;
}
}
Line 420: Line 460:
height:0px;
height:0px;
left:0px;
left:0px;
-
z-index:14;
+
z-index:140;
}
}
Line 459: Line 499:
display:none;
display:none;
background-color: #FFF;
background-color: #FFF;
 +
        z-index: 40;
}
}
Line 474: Line 515:
ul.menu_unamgenomics li div.menu_caja a:hover{
ul.menu_unamgenomics li div.menu_caja a:hover{
color:#F60;
color:#F60;
-
}
 
-
 
-
 
-
/* Image on hover  description */
 
-
 
-
td {
 
-
background-color: transparent;
 
-
background-repeat: no-repeat;
 
-
clear: both;
 
-
height: auto;
 
-
width: auto;
 
-
}
 
-
 
-
.imgteaser {
 
-
margin: 0;
 
-
overflow: hidden;
 
-
float: left;
 
-
position: relative;
 
-
}
 
-
.imgteaser a {
 
-
text-decoration: none;
 
-
float: left;
 
-
}
 
-
.imgteaser a:hover {
 
-
cursor: pointer;
 
-
}
 
-
.imgteaser a img {
 
-
float: left;
 
-
margin: 0;
 
-
border: none;
 
-
padding: 20px;
 
-
background: #FFF;
 
-
border: 0px solid #ddd;
 
-
}
 
-
 
-
.imgteaser a .desc { display: none; }
 
-
 
-
.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 {
 
-
display: block;
 
-
margin-bottom: 5px;
 
-
font-size:1.2em;
 
}
}
Line 539: Line 521:
#tablecontentbg{
#tablecontentbg{
background-image: url("https://static.igem.org/mediawiki/2012/c/c4/Unamgenomicsbg.png");
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{
#contentcolumn{
Line 676: Line 690:
}
}
 +
 +
/*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 950: 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"