Template:Team:HokkaidoU Japan/HumanPractice/script
From 2011.igem.org
(Difference between revisions)
(11 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
- | <html | + | <html> |
- | + | ||
- | + | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
$(function(){ | $(function(){ | ||
$('span.footnote > a').bind('click', function(){ | $('span.footnote > a').bind('click', function(){ | ||
var url = $(this).attr('href'); | var url = $(this).attr('href'); | ||
- | var | + | var title = $(this).text(); |
+ | $('<div>').load(url + ' div#bodyContent', function(data){ | ||
+ | var $box = $('<div>').addClass('footnote-box').append($('<h2>').append(title)); | ||
var $footnote = $(data).find('div#contentSub').nextAll('p'); | var $footnote = $(data).find('div#contentSub').nextAll('p'); | ||
- | $( | + | $box.append($('<div>').append($footnote).addClass('footnote-content')); |
- | + | $('body').append($box); | |
- | $('body').append($ | + | $box.append($('<span>').addClass('close').addClass('close-btn-32')).lightbox_me({ |
- | $ | + | destroyOnClose : true, |
- | destroyOnClose : true | + | modalCSS : { 'top' : '100px' } |
}); | }); | ||
}); | }); | ||
Line 20: | Line 20: | ||
</script> | </script> | ||
<style> | <style> | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
.close-btn-32 { | .close-btn-32 { | ||
display: block; | display: block; | ||
Line 65: | Line 56: | ||
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: 60%; | ||
+ | min-width: 650px; | ||
+ | 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 { | ||
+ | color: #fefefe; | ||
+ | font-size: large !important; | ||
+ | margin: 0px auto 10px; | ||
+ | width: 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> |
Latest revision as of 03:47, 6 October 2011