Team:UCLondon/Templates/timeline-box

From 2012e.igem.org

(Difference between revisions)
(Created page with "<html> <!-- Button--> <span class="openTL green-but">Attribution</span> <div id="shadowTL" style="display:none;" > <div id="close-boxTL" style="background:url(http://db.tt/N9CUK...")
 
(13 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
<!-- Button-->
<!-- Button-->
-
<span class="openTL green-but">Attribution</span>
+
<span class="openTL white-but" style="text-align:center; width:60px; margin:0 auto;"></html>{{{button-name}}}<html></span>
<div id="shadowTL" style="display:none;" >
<div id="shadowTL" style="display:none;" >
Line 13: Line 13:
<style>
<style>
-
  #shadow2 {
+
  #shadowTL {
   
   
           background-image:  -webkit-gradient(linear, 0% 0%, 0% 100%, from( rgba(255, 255, 255, 1) ), to( rgb(249, 249, 249) ) );
           background-image:  -webkit-gradient(linear, 0% 0%, 0% 100%, from( rgba(255, 255, 255, 1) ), to( rgb(249, 249, 249) ) );
Line 28: Line 28:
               position:fixed;
               position:fixed;
-
               height: 380px;
+
               height: 450px;
-
               width:600px;
+
               width:700px;
               margin:auto;
               margin:auto;
               z-index: 999999;
               z-index: 999999;
Line 36: Line 36:
-
.green-but {
+
.white-but {
   cursor: pointer;
   cursor: pointer;
-
   border: 1px solid #008040;
+
   border: 1px solid #808080;
   background: #00b700;
   background: #00b700;
-
   background: -webkit-gradient(linear, left top, left bottom, from(#80ff00), to(#00b700));
+
   background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#cccccc));
-
   background: -webkit-linear-gradient(top, #80ff00, #00b700);
+
   background: -webkit-linear-gradient(top, #ffffff, #cccccc);
-
   background: -moz-linear-gradient(top, #80ff00, #00b700);
+
   background: -moz-linear-gradient(top, #ffffff, #cccccc);
-
   background: -ms-linear-gradient(top, #80ff00, #00b700);
+
   background: -ms-linear-gradient(top, #ffffff, #cccccc);
-
   background: -o-linear-gradient(top, #80ff00, #00b700);
+
   background: -o-linear-gradient(top, #ffffff, #cccccc);
-
   background-image: -ms-linear-gradient(top, #80ff00 0%, #00b700 100%);
+
   background-image: -ms-linear-gradient(top, #ffffff 0%, #cccccc 100%);
   padding: 10.5px 21px;
   padding: 10.5px 21px;
   -webkit-border-radius: 6px;
   -webkit-border-radius: 6px;
Line 54: Line 54:
   box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   text-shadow: #7ea4bd 0 1px 0;
   text-shadow: #7ea4bd 0 1px 0;
-
   color: #008040;
+
   color: #808080;
   font-size: 14px;
   font-size: 14px;
   font-family: helvetica, serif;
   font-family: helvetica, serif;
Line 62: Line 62:
-
.green-but:active {
+
.white-but:active {
   text-shadow: #1e4158 0 1px 0;
   text-shadow: #1e4158 0 1px 0;
   border: 1px solid #008040;
   border: 1px solid #008040;
   background: #80ff00;
   background: #80ff00;
-
   background: -webkit-gradient(linear, left top, left bottom, from(#00b700), to(#80ff00));
+
   background: -webkit-gradient(linear, left top, left bottom, from(#cccccc), to(#ffffff));
-
   background: -webkit-linear-gradient(top, #00b700, #80ff00);
+
   background: -webkit-linear-gradient(top, #cccccc, #ffffff);
-
   background: -moz-linear-gradient(top, #00b700, #80ff00);
+
   background: -moz-linear-gradient(top, #cccccc, #ffffff);
-
   background: -ms-linear-gradient(top, #00b700, #80ff00);
+
   background: -ms-linear-gradient(top, #cccccc, #ffffff);
-
   background: -o-linear-gradient(top, #00b700, #80ff00);
+
   background: -o-linear-gradient(top, #cccccc, #ffffff);
-
   background-image: -ms-linear-gradient(top, #00b700 0%, #80ff00 100%);
+
   background-image: -ms-linear-gradient(top, #cccccc 0%, #ffffff 100%);
   color: #fff;
   color: #fff;
}
}
-
span .green-but { width:50px; margin:auto; }
 
</style>
</style>
Line 83: Line 82:
-
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
+
<!--<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>-->
<script>
<script>
Line 111: Line 110:
}
}
-
var closeBox2 = function() {
+
var closeBoxTL = function() {
-
   $('#shadow2').toggle('slow', function() {
+
   $('#shadowTL').toggle('slow', function() {
     // $(this).children('#box-contentTL').html(loading);  
     // $(this).children('#box-contentTL').html(loading);  
   });
   });
Line 124: Line 123:
   $('body').on('click', '.openTL', openBoxTL);
   $('body').on('click', '.openTL', openBoxTL);
-
   $('body').off('click', '#close-box2', closeBoxTL);
+
   $('body').off('click', '#close-boxTL', closeBoxTL);
-
   $('body').on('click', '#close-box2', closeBoxTL);
+
   $('body').on('click', '#close-boxTL', closeBoxTL);
});
});

Latest revision as of 17:59, 26 October 2012

{{{button-name}}}

Retrieved from "http://2012e.igem.org/wiki/index.php/Team:UCLondon/Templates/timeline-box"