Template:Team:HokkaidoU Japan/HumanPractice/script

From 2011.igem.org

(Difference between revisions)
Line 3: Line 3:
</script>
</script>
<script type="text/javascript">
<script type="text/javascript">
-
$(function(){
+
$(function(){  
-
     $('span.footnote > a').bind('click', function(){
+
     var $toc = $('#toc');
-
        var url = $(this).attr('href');
+
    var $tab = $('<div>').addClass('toc-tab');
-
        $('<div>').load(url + ' div#bodyContent', function(data){
+
    var $close = $('<div>').addClass('close');
-
            var $box = $('<div>').addClass('footnote-box');
+
    var $wrapper = $('<div>').addClass('toc-wrapper');
-
            var $footnote = $(data).find('div#contentSub').nextAll('p');
+
    $toc.before($tab);
-
            $box.append($('<div>').append($footnote).addClass('footnote-content'));
+
    $toc.wrap($wrapper);
-
            $('body').append($box);
+
    $toc.before($close)
-
            $box.append($('<span>').addClass('close').addClass('close-btn-32')).lightbox_me({
+
    $wrapper = $('.toc-wrapper');
-
                destroyOnClose : true,
+
    $wrapper.hide();
-
                modalCSS      : { 'top' : '100px' }
+
    $tab.bind('click', function(){
-
            });
+
        $tab.hide();
 +
        $wrapper.fadeIn('normal');
 +
        $close.bind('click', function(){
 +
            $wrapper.fadeOut('normal');
 +
            $tab.show();
         });
         });
-
        return false;
 
     });
     });
});
});
</script>
</script>
<style>
<style>
-
div.footnote-box {
 
-
  background: rgb(125,126,125);
 
-
  background: -moz-linear-gradient(top, rgba(125,126,125,0.85) 0%, rgba(14,14,14,0.85) 100%);
 
-
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,126,125,0.85)), color-stop(100%,rgba(14,14,14,0.85)));
 
-
  background: -webkit-linear-gradient(top, rgba(125,126,125,0.85) 0%,rgba(14,14,14,0.85) 100%);
 
-
  background: -o-linear-gradient(top, rgba(125,126,125,0.85) 0%,rgba(14,14,14,0.85) 100%);
 
-
  background: -ms-linear-gradient(top, rgba(125,126,125,0.85) 0%,rgba(14,14,14,0.85) 100%);
 
-
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 );
 
-
  background: linear-gradient(top, rgba(125,126,125,0.85) 0%,rgba(14,14,14,0.85) 100%);
 
-
  margin 0 auto;
 
-
  border: 3px solid #dfdfdf;
 
-
  border-radius: 10px;
 
-
  -moz-border-radius: 10px;
 
-
  -webkit-border-radius: 10px;
 
-
  display: block;
 
-
  padding: 50px 20px;
 
-
  width: 40%;
 
-
  height: 40%;
 
-
  overflow: auto;
 
-
}
 
.close-btn-32 {
.close-btn-32 {
   display: block;
   display: block;
Line 77: Line 60:
   line-height: 32px;
   line-height: 32px;
   font-family: "Helvetica Neue", Consolas, Verdana, Tahoma, Calibri, Helvetica, Menlo, "Droid Sans", sans-serif;
   font-family: "Helvetica Neue", Consolas, Verdana, Tahoma, Calibri, Helvetica, Menlo, "Droid Sans", sans-serif;
 +
}
 +
div.footnote-box {
 +
  background: rgb(125,126,125);
 +
  background: -moz-linear-gradient(top, rgba(125,126,125,0.85) 0%, rgba(14,14,14,0.85) 100%);
 +
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,126,125,0.85)), color-stop(100%,rgba(14,14,14,0.85)));
 +
  background: -webkit-linear-gradient(top, rgba(125,126,125,0.85) 0%,rgba(14,14,14,0.85) 100%);
 +
  background: -o-linear-gradient(top, rgba(125,126,125,0.85) 0%,rgba(14,14,14,0.85) 100%);
 +
  background: -ms-linear-gradient(top, rgba(125,126,125,0.85) 0%,rgba(14,14,14,0.85) 100%);
 +
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 );
 +
  background: linear-gradient(top, rgba(125,126,125,0.85) 0%,rgba(14,14,14,0.85) 100%);
 +
  margin 0 auto;
 +
  border: 3px solid #dfdfdf;
 +
  border-radius: 10px;
 +
  -moz-border-radius: 10px;
 +
  -webkit-border-radius: 10px;
 +
  display: block;
 +
  padding: 20px 20px;
 +
  width: 40%;
 +
  height: auto;
 +
  max-height: 60%;
 +
  overflow: auto;
 +
  box-shadow: 3px 3px 5px #333;
 +
  -moz-box-shadow: 3px 3px 5px #333;
 +
  -webkit-box-shadow: 3px 3px 5px #333;
}
}
.footnote-box div.footnote-content {
.footnote-box div.footnote-content {
   color: #fefefe;
   color: #fefefe;
   font-size: large !important;
   font-size: large !important;
-
   margin: auto auto;
+
   margin: 0px auto 10px;
   width: 80%;
   width: 80%;
-
   height: 80%;
+
  height: 100%;
 +
}
 +
.footnote-box h2 {
 +
  color: #fefefe;
 +
   height : 80%;
 +
  margin-bottom: 10px;
 +
  border-bottom-width: 5px;
 +
  padding-left: 8px;
 +
  padding-bottom: 3px;
 +
  font-size: 250%;
 +
  text-align: center;
}
}
</style>
</style>
</html>
</html>

Revision as of 16:55, 5 October 2011