Template:Team:HokkaidoU Japan/HumanPractice/script

From 2011.igem.org

(Difference between revisions)
Line 1: Line 1:
<html><script type="text/javascript">
<html><script type="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('<iframe id="foo" style="z-index: '+(e.zIndex+1)+';border: none; margin: 0; padding: 0; position: absolute; width: 100%; height: 100%; top: 0; left: 0; filter: mask();"/>'),g=(a.browser.msie&&a.browser.version<7);if(e.showOverlay){var f=a(".js_lb_overlay:visible");if(f.length>0){l=a('<div class="lb_overlay_clear js_lb_overlay"/>')}else{l=a('<div class="'+e.classPrefix+'_overlay js_lb_overlay"/>')}}if(g){var d=/^https/i.test(window.location.href||"")?"javascript:false":"about:blank";m.attr("src",d);a("body").append(m)}a("body").append(k.hide()).append(l);if(e.showOverlay){h();l.css({position:"absolute",width:"100%",top:0,left:0,right:0,bottom:0,zIndex:(e.zIndex+2),display:"none"});if(!l.hasClass("lb_overlay_clear")){l.css(e.overlayCSS)}}if(e.showOverlay){l.fadeIn(e.overlaySpeed,function(){c();k[e.appearEffect](e.lightboxSpeed,function(){h();c();e.onLoad()})})}else{c();k[e.appearEffect](e.lightboxSpeed,function(){e.onLoad()})}if(e.parentLightbox){e.parentLightbox.fadeOut(200)}a(window).resize(h).resize(c).scroll(c).keyup(j);if(e.closeClick){l.click(function(n){i();n.preventDefault})}k.delegate(e.closeSelector,"click",function(n){i();n.preventDefault()});k.bind("close",i);k.bind("reposition",c);function i(){var n=k[0].style;if(e.destroyOnClose){k.add(l).remove()}else{k.add(l).hide()}if(e.parentLightbox){e.parentLightbox.fadeIn(200)}m.remove();k.undelegate(e.closeSelector,"click");a(window).unbind("reposition",h);a(window).unbind("reposition",c);a(window).unbind("scroll",c);a(document).unbind("keyup",j);if(g){n.removeExpression("top")}e.onClose()}function j(n){if((n.keyCode==27||(n.DOM_VK_ESCAPE==27&&n.which==0))&&e.closeEsc){i()}}function h(){if(a(window).height()<a(document).height()){l.css({height:a(document).height()+"px"});m.css({height:a(document).height()+"px"})}else{l.css({height:"100%"});if(g){a("html,body").css("height","100%");m.css("height","100%")}}}function c(){var o=k[0].style;k.css({left:"50%",marginLeft:(k.outerWidth()/2)*-1,zIndex:(e.zIndex+3)});if((k.height()+80>=a(window).height())&&(k.css("position")!="absolute"||g)){var n=a(document).scrollTop()+40;k.css({position:"absolute",top:n+"px",marginTop:0});if(g){o.removeExpression("top")}}else{if(k.height()+80<a(window).height()){if(g){o.position="absolute";if(e.centered){o.setExpression("top",'(document.documentElement.clientHeight || document.body.clientHeight) / 2 - (this.offsetHeight / 2) + (blah = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) + "px"');o.marginTop=0}else{var p=(e.modalCSS&&e.modalCSS.top)?parseInt(e.modalCSS.top):0;o.setExpression("top","((blah = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) + "+p+') + "px"')}}else{if(e.centered){k.css({position:"fixed",top:"50%",marginTop:(k.outerHeight()/2)*-1})}else{k.css({position:"fixed"}).css(e.modalCSS)}}}}}})};a.fn.lightbox_me.defaults={appearEffect:"fadeIn",appearEase:"",overlaySpeed:250,lightboxSpeed:300,closeSelector:".close",closeClick:true,closeEsc:true,destroyOnClose:false,showOverlay:true,parentLightbox:false,onLoad:function(){},onClose:function(){},classPrefix:"lb",zIndex:999,centered:false,modalCSS:{top:"40px"},overlayCSS:{background:"black",opacity:0.3}}})(jQuery);
+
(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>
<script type="text/javascript">
<script type="text/javascript">

Revision as of 13:38, 5 October 2011

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