Template:Team:HokkaidoU Japan/HumanPractice/script

From 2011.igem.org

(Difference between revisions)
 
(9 intermediate revisions not shown)
Line 1: Line 1:
-
<html><script src="text/javascript">
+
<html>
-
(function($) {
+
-
 
+
-
    $.fn.lightbox_me = function(options) {
+
-
 
+
-
        return this.each(function() {
+
-
 
+
-
            var
+
-
                opts = $.extend({}, $.fn.lightbox_me.defaults, options),
+
-
                $overlay = $(),
+
-
                $self = $(this),
+
-
                $iframe = $('<iframe id="foo" style="z-index: ' + (opts.zIndex + 1) + ';border: none; margin: 0; padding: 0; position: absolute; width: 100%; height: 100%; top: 0; left: 0; filter: mask();"/>'),
+
-
                ie6 = ($.browser.msie && $.browser.version < 7);
+
-
 
+
-
            if (opts.showOverlay) {
+
-
                //check if there's an existing overlay, if so, make subequent ones clear
+
-
              var $currentOverlays = $(".js_lb_overlay:visible");
+
-
                if ($currentOverlays.length > 0){
+
-
                    $overlay = $('<div class="lb_overlay_clear js_lb_overlay"/>');
+
-
                } else {
+
-
                    $overlay = $('<div class="' + opts.classPrefix + '_overlay js_lb_overlay"/>');
+
-
                }
+
-
            }
+
-
 
+
-
            /*----------------------------------------------------
+
-
              DOM Building
+
-
            ---------------------------------------------------- */
+
-
            if (ie6) {
+
-
                var src = /^https/i.test(window.location.href || '') ? 'javascript:false' : 'about:blank';
+
-
                $iframe.attr('src', src);
+
-
                $('body').append($iframe);
+
-
            } // iframe shim for ie6, to hide select elements
+
-
            $('body').append($self.hide()).append($overlay);
+
-
 
+
-
 
+
-
            /*----------------------------------------------------
+
-
              Overlay CSS stuffs
+
-
            ---------------------------------------------------- */
+
-
 
+
-
            // set css of the overlay
+
-
            if (opts.showOverlay) {
+
-
                setOverlayHeight(); // pulled this into a function because it is called on window resize.
+
-
                $overlay.css({ position: 'absolute', width: '100%', top: 0, left: 0, right: 0, bottom: 0, zIndex: (opts.zIndex + 2), display: 'none' });
+
-
if (!$overlay.hasClass('lb_overlay_clear')){
+
-
                $overlay.css(opts.overlayCSS);
+
-
                }
+
-
            }
+
-
 
+
-
            /*----------------------------------------------------
+
-
              Animate it in.
+
-
            ---------------------------------------------------- */
+
-
              //
+
-
            if (opts.showOverlay) {
+
-
                $overlay.fadeIn(opts.overlaySpeed, function() {
+
-
                    setSelfPosition();
+
-
                    $self[opts.appearEffect](opts.lightboxSpeed, function() { setOverlayHeight(); setSelfPosition(); opts.onLoad()});
+
-
                });
+
-
            } else {
+
-
                setSelfPosition();
+
-
                $self[opts.appearEffect](opts.lightboxSpeed, function() { opts.onLoad()});
+
-
            }
+
-
 
+
-
            /*----------------------------------------------------
+
-
              Hide parent if parent specified (parentLightbox should be jquery reference to any parent lightbox)
+
-
            ---------------------------------------------------- */
+
-
            if (opts.parentLightbox) {
+
-
                opts.parentLightbox.fadeOut(200);
+
-
            }
+
-
 
+
-
 
+
-
            /*----------------------------------------------------
+
-
              Bind Events
+
-
            ---------------------------------------------------- */
+
-
 
+
-
            $(window).resize(setOverlayHeight)
+
-
                    .resize(setSelfPosition)
+
-
                    .scroll(setSelfPosition)
+
-
                    .keyup(observeKeyPress);
+
-
            if (opts.closeClick) {
+
-
                $overlay.click(function(e) { closeLightbox(); e.preventDefault; });
+
-
            }
+
-
            $self.delegate(opts.closeSelector, "click", function(e) {
+
-
                closeLightbox(); e.preventDefault();
+
-
            });
+
-
            $self.bind('close', closeLightbox);
+
-
            $self.bind('reposition', setSelfPosition);
+
-
 
+
-
           
+
-
 
+
-
            /*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
+
-
              -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
+
-
 
+
-
 
+
-
            /*----------------------------------------------------
+
-
              Private Functions
+
-
            ---------------------------------------------------- */
+
-
 
+
-
            /* Remove or hide all elements */
+
-
            function closeLightbox() {
+
-
                var s = $self[0].style;
+
-
                if (opts.destroyOnClose) {
+
-
                    $self.add($overlay).remove();
+
-
                } else {
+
-
                    $self.add($overlay).hide();
+
-
                }
+
-
 
+
-
                //show the hidden parent lightbox
+
-
                if (opts.parentLightbox) {
+
-
                    opts.parentLightbox.fadeIn(200);
+
-
                }
+
-
 
+
-
                $iframe.remove();
+
-
               
+
-
// clean up events.
+
-
                $self.undelegate(opts.closeSelector, "click");
+
-
 
+
-
                $(window).unbind('reposition', setOverlayHeight);
+
-
                $(window).unbind('reposition', setSelfPosition);
+
-
                $(window).unbind('scroll', setSelfPosition);
+
-
                $(document).unbind('keyup', observeKeyPress);
+
-
                if (ie6)
+
-
                    s.removeExpression('top');
+
-
                opts.onClose();
+
-
            }
+
-
 
+
-
 
+
-
            /* Function to bind to the window to observe the escape/enter key press */
+
-
            function observeKeyPress(e) {
+
-
                if((e.keyCode == 27 || (e.DOM_VK_ESCAPE == 27 && e.which==0)) && opts.closeEsc) closeLightbox();
+
-
            }
+
-
 
+
-
 
+
-
            /* Set the height of the overlay
+
-
                    : if the document height is taller than the window, then set the overlay height to the document height.
+
-
                    : otherwise, just set overlay height: 100%
+
-
            */
+
-
            function setOverlayHeight() {
+
-
                if ($(window).height() < $(document).height()) {
+
-
                    $overlay.css({height: $(document).height() + 'px'});
+
-
                    $iframe.css({height: $(document).height() + 'px'});
+
-
                } else {
+
-
                    $overlay.css({height: '100%'});
+
-
                    if (ie6) {
+
-
                        $('html,body').css('height','100%');
+
-
                        $iframe.css('height', '100%');
+
-
                    } // ie6 hack for height: 100%; TODO: handle this in IE7
+
-
                }
+
-
            }
+
-
 
+
-
 
+
-
            /* Set the position of the modal'd window ($self)
+
-
                    : if $self is taller than the window, then make it absolutely positioned
+
-
                    : otherwise fixed
+
-
            */
+
-
            function setSelfPosition() {
+
-
                var s = $self[0].style;
+
-
 
+
-
                // reset CSS so width is re-calculated for margin-left CSS
+
-
                $self.css({left: '50%', marginLeft: ($self.outerWidth() / 2) * -1,  zIndex: (opts.zIndex + 3) });
+
-
 
+
-
 
+
-
                /* we have to get a little fancy when dealing with height, because lightbox_me
+
-
                    is just so fancy.
+
-
                */
+
-
 
+
-
                // if the height of $self is bigger than the window and self isn't already position absolute
+
-
                if (($self.height() + 80  >= $(window).height()) && ($self.css('position') != 'absolute' || ie6)) {
+
-
 
+
-
                    // we are going to make it positioned where the user can see it, but they can still scroll
+
-
                    // so the top offset is based on the user's scroll position.
+
-
                    var topOffset = $(document).scrollTop() + 40;
+
-
                    $self.css({position: 'absolute', top: topOffset + 'px', marginTop: 0})
+
-
                    if (ie6) {
+
-
                        s.removeExpression('top');
+
-
                    }
+
-
                } else if ($self.height()+ 80  < $(window).height()) {
+
-
                    //if the height is less than the window height, then we're gonna make this thing position: fixed.
+
-
                    // in ie6 we're gonna fake it.
+
-
                    if (ie6) {
+
-
                        s.position = 'absolute';
+
-
                        if (opts.centered) {
+
-
                            s.setExpression('top', '(document.documentElement.clientHeight || document.body.clientHeight) / 2 - (this.offsetHeight / 2) + (blah = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) + "px"')
+
-
                            s.marginTop = 0;
+
-
                        } else {
+
-
                            var top = (opts.modalCSS && opts.modalCSS.top) ? parseInt(opts.modalCSS.top) : 0;
+
-
                            s.setExpression('top', '((blah = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) + '+top+') + "px"')
+
-
                        }
+
-
                    } else {
+
-
                        if (opts.centered) {
+
-
                            $self.css({ position: 'fixed', top: '50%', marginTop: ($self.outerHeight() / 2) * -1})
+
-
                        } else {
+
-
                            $self.css({ position: 'fixed'}).css(opts.modalCSS);
+
-
                        }
+
-
 
+
-
                    }
+
-
                }
+
-
            }
+
-
 
+
-
        });
+
-
 
+
-
 
+
-
 
+
-
    };
+
-
 
+
-
    $.fn.lightbox_me.defaults = {
+
-
 
+
-
        // animation
+
-
        appearEffect: "fadeIn",
+
-
        appearEase: "",
+
-
        overlaySpeed: 250,
+
-
        lightboxSpeed: 300,
+
-
 
+
-
        // close
+
-
        closeSelector: ".close",
+
-
        closeClick: true,
+
-
        closeEsc: true,
+
-
 
+
-
        // behavior
+
-
        destroyOnClose: false,
+
-
        showOverlay: true,
+
-
        parentLightbox: false,
+
-
 
+
-
        // callbacks
+
-
        onLoad: function() {},
+
-
        onClose: function() {},
+
-
 
+
-
        // style
+
-
        classPrefix: 'lb',
+
-
        zIndex: 999,
+
-
        centered: false,
+
-
        modalCSS: {top: '40px'},
+
-
        overlayCSS: {background: 'black', opacity: .3}
+
-
    }
+
-
})(jQuery);
+
-
</script>
+
<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 title = $(this).text();
         $('<div>').load(url + ' div#bodyContent', function(data){
         $('<div>').load(url + ' div#bodyContent', function(data){
-
             var $box = $('<div>').addClass('footnote-box');
+
             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($footnote);
+
             $box.append($('<div>').append($footnote).addClass('footnote-content'));
             $('body').append($box);
             $('body').append($box);
             $box.append($('<span>').addClass('close').addClass('close-btn-32')).lightbox_me({
             $box.append($('<span>').addClass('close').addClass('close-btn-32')).lightbox_me({
-
                 destroyOnClose : true
+
                 destroyOnClose : true,
 +
                modalCSS      : { 'top' : '100px' }
             });
             });
         });
         });
Line 252: Line 20:
</script>
</script>
<style>
<style>
-
div.footnote-box {
 
-
  background-color: #d9d9d9;
 
-
  margin 0 auto;
 
-
  display: block;
 
-
  padding: 50px 30px;
 
-
  width: 40%;
 
-
  height: 40%;
 
-
  overflow: scroll;
 
-
}
 
.close-btn-32 {
.close-btn-32 {
   display: block;
   display: block;
Line 297: 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

Retrieved from "http://2011.igem.org/Template:Team:HokkaidoU_Japan/HumanPractice/script"