Template:Team:HokkaidoU Japan/HumanPractice/script
From 2011.igem.org
(Difference between revisions)
(Created page with "<html><script src="text/javascript"> (function(a){a.fn.lightbox_me=function(b){return this.each(function(){var e=a.extend({},a.fn.lightbox_me.defaults,b),l=a(),k=a(this),m=a('<if...") |
|||
(16 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
- | <html><script | + | <html> |
- | (function( | + | <script type="text/javascript"> |
- | </ | + | $(function(){ |
+ | $('span.footnote > a').bind('click', function(){ | ||
+ | var url = $(this).attr('href'); | ||
+ | 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'); | ||
+ | $box.append($('<div>').append($footnote).addClass('footnote-content')); | ||
+ | $('body').append($box); | ||
+ | $box.append($('<span>').addClass('close').addClass('close-btn-32')).lightbox_me({ | ||
+ | destroyOnClose : true, | ||
+ | modalCSS : { 'top' : '100px' } | ||
+ | }); | ||
+ | }); | ||
+ | return false; | ||
+ | }); | ||
+ | }); | ||
+ | </script> | ||
+ | <style> | ||
+ | .close-btn-32 { | ||
+ | display: block; | ||
+ | position: absolute; | ||
+ | top: 5px; | ||
+ | right: 5px; | ||
+ | height: 0; | ||
+ | width: 32px; | ||
+ | padding: 32px 0 0 0; | ||
+ | overflow: hidden; | ||
+ | background: #000000 none; | ||
+ | border: 3.63636363636364px solid #ffffff; | ||
+ | -moz-border-radius: 32px; | ||
+ | -webkit-border-radius: 32px; | ||
+ | border-radius: 32px; | ||
+ | box-shadow: 0 0 6px #000000, 1.63636363636364px 1.63636363636364px 1.63636363636364px rgba(0, 0, 0, 0.3), -1.63636363636364px 1.63636363636364px 1.63636363636364px rgba(0, 0, 0, 0.3), 1.63636363636364px -1.63636363636364px 1.63636363636364px rgba(0, 0, 0, 0.3), -1.63636363636364px -1.63636363636364px 1.63636363636364px rgba(0, 0, 0, 0.3); | ||
+ | -ms-box-shadow: 0 0 6px #000000, 1.63636363636364px 1.63636363636364px 1.63636363636364px rgba(0, 0, 0, 0.3), -1.63636363636364px 1.63636363636364px 1.63636363636364px rgba(0, 0, 0, 0.3), 1.63636363636364px -1.63636363636364px 1.63636363636364px rgba(0, 0, 0, 0.3), -1.63636363636364px -1.63636363636364px 1.63636363636364px rgba(0, 0, 0, 0.3); | ||
+ | -moz-box-shadow: 0 0 6px #000000, 1.63636363636364px 1.63636363636364px 1.63636363636364px rgba(0, 0, 0, 0.3), -1.63636363636364px 1.63636363636364px 1.63636363636364px rgba(0, 0, 0, 0.3), 1.63636363636364px -1.63636363636364px 1.63636363636364px rgba(0, 0, 0, 0.3), -1.63636363636364px -1.63636363636364px 1.63636363636364px rgba(0, 0, 0, 0.3); | ||
+ | -webkit-box-shadow: 0 0 6px #000000, 1.63636363636364px 1.63636363636364px 1.63636363636364px rgba(0, 0, 0, 0.3), -1.63636363636364px 1.63636363636364px 1.63636363636364px rgba(0, 0, 0, 0.3), 1.63636363636364px -1.63636363636364px 1.63636363636364px rgba(0, 0, 0, 0.3), -1.63636363636364px -1.63636363636364px 1.63636363636364px rgba(0, 0, 0, 0.3); | ||
+ | color: #ffffff; | ||
+ | cursor: pointer; | ||
+ | -moz-user-select: none; | ||
+ | -webkit-user-select: none; | ||
+ | user-select: none; | ||
+ | z-index: 1000; | ||
+ | } | ||
+ | .close-btn-32:before { | ||
+ | content: "\D7"; | ||
+ | display: block; | ||
+ | text-align: center; | ||
+ | width: 32px; | ||
+ | position: absolute; | ||
+ | top: -3.2px; | ||
+ | left: 0; | ||
+ | font-size: 32px; | ||
+ | line-height: 32px; | ||
+ | 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> | ||
+ | </html> |
Latest revision as of 03:47, 6 October 2011