Team:UCL/Homex

From 2014.igem.org

(Difference between revisions)
 
(151 intermediate revisions not shown)
Line 1: Line 1:
-
{{:Team:UCL/Template:headerx}}
+
<html lang="en-US">
-
<html>
+
     <head>
-
<!-- ============= CSS for Humans Main ================= -->
+
         <meta charset="UTF-8">
-
<link rel="stylesheet" href="https://2014.igem.org/Team:UCL/Template:HomeMain.css?action=raw&ctype=text/css" type="text/css" />
+
         <meta http-equiv="refresh" content="1;url=https://2014.igem.org/Team:UCL">
-
 
+
-
<!-- ============= BODY SLIDERS ======================== -->
+
-
<body>
+
-
<div id="skrollr-body">
+
-
 
+
-
     <!--[if lt IE 7]>
+
-
         <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
+
-
    <![endif]-->
+
-
 
+
-
 
+
-
    <header class="banner-image-background">
+
-
            <div class="banner-image-overlay">
+
-
    <div style="opacity:1"><img src="https://static.igem.org/mediawiki/2014/e/e8/UCL-old-logo-small.jpg" alt="" class="banner-image-logo"/><div>
+
-
            </div>
+
-
    </header>
+
-
 
+
-
    <main>
+
-
 
+
-
<div id="slideabout" class="slide">
+
-
            <div class="wrapper clearfix">
+
-
 
+
-
<div id="slideaboutheader" class="slideheader"
+
-
data-anchor-target="#slideabout"
+
-
data-bottom-top="transform[sqrt]:translateX(300%)"
+
-
data-150-top="transform[sqrt]:translateX(60%)">
+
-
+
-
<h1><span>PROJECT</span></h1>
+
-
 
+
-
</div>
+
-
 
+
-
                <div id="slideaboutmore" class="slidemore"
+
-
data-anchor-target="#slideabout"
+
-
data-bottom-top="transform[sqrt]:translateX(-300%)"
+
-
data-150-top="transform[sqrt]:translateX(70%)">
+
-
 
+
-
                    <a href="#" class="tellmemore">
+
-
                        <img src="https://static.igem.org/mediawiki/2014/2/23/Team_Icons-05.png" alt="" />
+
-
        <p>Tell me more</p>
+
-
                    </a>
+
-
 
+
-
                </div>
+
-
 
+
-
                <div id="slideaboutcontent" class="slidecontent"
+
-
data-anchor-target="#slideabout"
+
-
data-bottom-top="opacity:0;"
+
-
data-150-top="opacity:1;">
+
-
 
+
-
    <h2>WHO ARE WE?</h2>
+
-
    <p>We are University College London's iGEM 2014 team.</p>
+
-
    <br/>
+
-
    <h2>WHAT ARE WE DOING?</h2>
+
-
    <p>We are using Synthetic Biology to combat <b>AZO-DYE</b> Pollution.  Azo Dyes are the most common synthetic dye and are used everywhere, from food colouring to clothes. You're probably wearing clothes dyed with Azo-Dyes! But, when they get into waste water they're very toxic. Our team is engineering bacteria that degrade these dyes, using enzymes, to make them colourless and less harmful to the environment</p>
+
-
 
+
-
                </div>
+
-
 
+
-
</div>
+
-
         </div>
+
-
 
+
-
        <div id="slidescience" class="slide">
+
-
 
+
-
            <div class="wrapper clearfix">
+
-
 
+
-
<div id="slidescienceheader" class="slideheader"
+
-
data-anchor-target="#slidescience"
+
-
data-bottom-top="transform[sqrt]:translateX(300%)"
+
-
data-200-top="transform[sqrt]:translateX(60%)">
+
-
 
+
-
<h1><span>SCIENCE</span></h1>
+
-
 
+
-
</div>
+
-
 
+
-
                <div id="slidesciencecontent" class="slidecontent"
+
-
data-anchor-target="#slidescience"
+
-
data-bottom-top="opacity:0;"
+
-
data-150-top="opacity:1;">
+
-
 
+
-
                    <div style="float:left;">
+
-
 
+
-
                        <a href="#" class="experiments">
+
-
                            <img src="https://static.igem.org/mediawiki/2014/c/c3/Team_Icons-01.png" alt="" />
+
-
            <p>Experiments</p>
+
-
                        </a>
+
-
                    </div>
+
-
 
+
-
                    <div style="float:right;">
+
-
 
+
-
                        <a href="#" class="results">
+
-
                            <img src="https://static.igem.org/mediawiki/2014/1/1d/Team_Icons-04.png" alt="" />
+
-
            <p>Results</p>
+
-
                        </a>    
+
-
 
+
-
                    </div>
+
-
 
+
-
                </div>
+
-
 
+
-
</div>
+
-
        </div>
+
-
 
+
         <script type="text/javascript">
         <script type="text/javascript">
-
 
+
             window.location.href = "https://2014.igem.org/Team:UCL"
-
             // list of items
+
-
            var $grid = $( '#og-grid' ),
+
-
                // the items
+
-
                $items = $grid.children( 'li' ),
+
-
                // current expanded item´s index
+
-
                current = -1,
+
-
                // position (top) of the expanded item
+
-
                // used to know if the preview will expand in a different row
+
-
                previewPos = -1,
+
-
                // extra amount of pixels to scroll the window
+
-
                scrollExtra = 0,
+
-
                // extra margin when expanded (between the preview element and the next item row)
+
-
                marginExpanded = 10,
+
-
                $window = $( window ), winsize,
+
-
                $body = $( 'html, body' ),
+
-
                // transitionend events
+
-
                transEndEventNames = {
+
-
                    'WebkitTransition' : 'webkitTransitionEnd',
+
-
                    'MozTransition' : 'transitionend',
+
-
                    'OTransition' : 'oTransitionEnd',
+
-
                    'msTransition' : 'MSTransitionEnd',
+
-
                    'transition' : 'transitionend'
+
-
                },
+
-
                transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
+
-
                // support for csstransitions
+
-
                support = Modernizr.csstransitions,
+
-
                // default settings
+
-
                settings = {
+
-
                    minHeight : 500,
+
-
                    speed : 350,
+
-
                    easing : 'ease'
+
-
                };
+
-
 
+
-
            function init( config ) {
+
-
   
+
-
                // the settings..
+
-
                settings = $.extend( true, {}, settings, config );
+
-
+
-
                // preload all images
+
-
                $grid.imagesLoaded( function() {
+
-
+
-
                // save item´s size and offset
+
-
                    saveItemInfo( true );
+
-
                // get window´s size
+
-
                    getWinSize();
+
-
                // initialize some events
+
-
                    initEvents();
+
-
+
-
            } );
+
-
+
-
            }
+
-
+
-
                // saves the item´s offset top and height (if saveheight is true)
+
-
            function saveItemInfo( saveheight ) {
+
-
                $items.each( function() {
+
-
                    var $item = $( this );
+
-
                    $item.data( 'offsetTop', $item.offset().top );
+
-
                    if( saveheight ) {
+
-
                        $item.data( 'height', $item.height() );
+
-
            }
+
-
            } );
+
-
            }
+
-
+
-
                function getWinSize() {
+
-
                    winsize = { width : $window.width(), height : $window.height() };
+
-
                }
+
-
 
+
-
            function initEvents() {
+
-
   
+
-
                // when clicking an item, show the preview with the item´s info and large image;
+
-
                // close the item if already expanded.
+
-
                // also close if clicking on the item´s cross
+
-
                $items.on( 'click', 'span.og-close', function() {
+
-
                    hidePreview();
+
-
                    return false;
+
-
            } ).children( 'a' ).on( 'click', function(e) {
+
-
+
-
                    var $item = $( this ).parent();
+
-
                // check if item already opened
+
-
                    current === $item.index() ? hidePreview() : showPreview( $item );
+
-
                    return false;
+
-
+
-
            } );
+
-
+
-
                // on window resize get the window´s size again
+
-
                // reset some values..
+
-
                $window.on( 'debouncedresize', function() {
+
-
       
+
-
                    scrollExtra = 0;
+
-
                    previewPos = -1;
+
-
                // save item´s offset
+
-
                    saveItemInfo();
+
-
                    getWinSize();
+
-
                    var preview = $.data( this, 'preview' );
+
-
                    if( typeof preview != 'undefined' ) {
+
-
                        hidePreview();
+
-
            }
+
-
+
-
            } );
+
-
+
-
            }
+
-
 
+
-
            function showPreview( $item ) {
+
-
+
-
                var preview = $.data( this, 'preview' ),
+
-
                // item´s offset top
+
-
                    position = $item.data( 'offsetTop' );
+
-
+
-
                scrollExtra = 0;
+
-
+
-
                // if a preview exists and previewPos is different (different row) from item´s top, then close it
+
-
                if( typeof preview != 'undefined' ) {
+
-
+
-
                // not in the same row
+
-
                    if( previewPos !== position ) {
+
-
                // if position > previewPos then we need to take the current preview´s height in consideration when scrolling the window
+
-
                        if( position > previewPos ) {
+
-
                            scrollExtra = preview.height;
+
-
            }
+
-
                        hidePreview();
+
-
            }
+
-
                // same row
+
-
            else {
+
-
                        preview.update( $item );
+
-
                        return false;
+
-
            }
+
-
       
+
-
            }
+
-
+
-
                // update previewPos
+
-
                previewPos = position;
+
-
                // initialize new preview for the clicked item
+
-
                preview = $.data( this, 'preview', new Preview( $item ) );
+
-
                // expand preview overlay
+
-
                preview.open();
+
-
+
-
            }
+
-
 
+
-
                // the preview obj / overlay
+
-
            function Preview( $item ) {
+
-
                this.$item = $item;
+
-
                this.expandedIdx = this.$item.index();
+
-
                this.create();
+
-
                this.update();
+
-
            }
+
-
 
+
-
                create : function() {
+
-
                // create Preview structure:
+
-
                this.$title = $( '<h3></h3>' );
+
-
                this.$description = $( '<p></p>' );
+
-
                this.$href = $( '<a href="#">Visit website</a>' );
+
-
                this.$details = $( '<div class="og-details"></div>' ).append( this.$title, this.$description, this.$href );
+
-
                this.$loading = $( '<div class="og-loading"></div>' );
+
-
                this.$fullimage = $( '<div class="og-fullimg"></div>' ).append( this.$loading );
+
-
                this.$closePreview = $( '<span class="og-close"></span>' );
+
-
                this.$previewInner = $( '<div class="og-expander-inner"></div>' ).append( this.$closePreview, this.$fullimage, this.$details );
+
-
                this.$previewEl = $( '<div class="og-expander"></div>' ).append( this.$previewInner );
+
-
                // append preview element to the item
+
-
                this.$item.append( this.getEl() );
+
-
                // set the transitions for the preview and the item
+
-
                if( support ) {
+
-
                    this.setTransition();
+
-
            }
+
-
            }
+
-
 
+
-
                update : function( $item ) {
+
-
+
-
                // update with new item´s details
+
-
                if( $item ) {
+
-
                    this.$item = $item;
+
-
            }
+
-
   
+
-
                // if already expanded, remove class "og-expanded" from current item and add it to new item
+
-
                if( current !== -1 ) {
+
-
                    var $currentItem = $items.eq( current );
+
-
                    $currentItem.removeClass( 'og-expanded' );
+
-
                    this.$item.addClass( 'og-expanded' );
+
-
                // position the preview correctly
+
-
                    this.positionPreview();
+
-
            }
+
-
+
-
                // update current value
+
-
                current = this.$item.index();
+
-
+
-
                // update preview´s content
+
-
                var $itemEl = this.$item.children( 'a' ),
+
-
                    eldata = {
+
-
                href : $itemEl.attr( 'href' ),
+
-
                largesrc : $itemEl.data( 'largesrc' ),
+
-
                title : $itemEl.data( 'title' ),
+
-
                description : $itemEl.data( 'description' )
+
-
            };
+
-
+
-
                this.$title.html( eldata.title );
+
-
                this.$description.html( eldata.description );
+
-
                this.$href.attr( 'href', eldata.href );
+
-
+
-
                var self = this;
+
-
   
+
-
                // remove the current image in the preview
+
-
                if( typeof self.$largeImg != 'undefined' ) {
+
-
                    self.$largeImg.remove();
+
-
            }
+
-
+
-
                // preload large image and add it to the preview
+
-
                // for smaller screens we don´t display the large image (the last media query will hide the wrapper of the image)
+
-
                if( self.$fullimage.is( ':visible' ) ) {
+
-
                    this.$loading.show();
+
-
                    $( '<img/>' ).load( function() {
+
-
                        self.$loading.hide();
+
-
                        self.$largeImg = $( this ).fadeIn( 350 );
+
-
                        self.$fullimage.append( self.$largeImg );
+
-
            } ).attr( 'src', eldata.largesrc );
+
-
            }
+
-
+
-
            }
+
-
 
+
-
                open : function() {
+
-
+
-
                setTimeout( $.proxy( function() { 
+
-
                // set the height for the preview and the item
+
-
                    this.setHeights();
+
-
                // scroll to position the preview in the right place
+
-
                    this.positionPreview();
+
-
            }, this ), 25 );
+
-
+
-
            }
+
-
+
-
                setHeights : function() {
+
-
+
-
                var self = this,
+
-
                    onEndFn = function() {
+
-
                        if( support ) {
+
-
                            self.$item.off( transEndEventName );
+
-
            }
+
-
                        self.$item.addClass( 'og-expanded' );
+
-
            };
+
-
+
-
                this.calcHeight();
+
-
                this.$previewEl.css( 'height', this.height );
+
-
                this.$item.css( 'height', this.itemHeight ).on( transEndEventName, onEndFn );
+
-
+
-
                if( !support ) {
+
-
                    onEndFn.call();
+
-
            }
+
-
+
-
            }
+
-
+
-
                calcHeight : function() {
+
-
+
-
                var heightPreview = winsize.height - this.$item.data( 'height' ) - marginExpanded,
+
-
                    itemHeight = winsize.height;
+
-
+
-
                if( heightPreview < settings.minHeight ) {
+
-
                    heightPreview = settings.minHeight;
+
-
                    itemHeight = settings.minHeight + this.$item.data( 'height' ) + marginExpanded;
+
-
            }
+
-
+
-
                this.height = heightPreview;
+
-
                this.itemHeight = itemHeight;
+
-
+
-
            }
+
-
+
-
                positionPreview : function() {
+
-
+
-
                // scroll page
+
-
                // case 1 : preview height + item height fits in window´s height
+
-
                // case 2 : preview height + item height does not fit in window´s height and preview height is smaller than window´s height
+
-
                // case 3 : preview height + item height does not fit in window´s height and preview height is bigger than window´s height
+
-
                var position = this.$item.data( 'offsetTop' ),
+
-
                    previewOffsetT = this.$previewEl.offset().top - scrollExtra,
+
-
                    scrollVal = this.height + this.$item.data( 'height' ) + marginExpanded <= winsize.height ? position : this.height < winsize.height ? previewOffsetT - ( winsize.height - this.height ) : previewOffsetT;
+
-
   
+
-
                $body.animate( { scrollTop : scrollVal }, settings.speed );
+
-
+
-
            }
+
-
 
+
-
                close : function() {
+
-
+
-
                var self = this,
+
-
                    onEndFn = function() {
+
-
                        if( support ) {
+
-
                            $( this ).off( transEndEventName );
+
-
            }
+
-
                        self.$item.removeClass( 'og-expanded' );
+
-
                        self.$previewEl.remove();
+
-
            };
+
-
+
-
                setTimeout( $.proxy( function() {
+
-
+
-
                    if( typeof this.$largeImg !== 'undefined' ) {
+
-
                        this.$largeImg.fadeOut( 'fast' );
+
-
            }
+
-
                    this.$previewEl.css( 'height', 0 );
+
-
                // the current expanded item (might be different from this.$item)
+
-
                    var $expandedItem = $items.eq( this.expandedIdx );
+
-
                    $expandedItem.css( 'height', $expandedItem.data( 'height' ) ).on( transEndEventName, onEndFn );
+
-
+
-
                    if( !support ) {
+
-
                        onEndFn.call();
+
-
            }
+
-
+
-
            }, this ), 25 );
+
-
   
+
-
                return false;
+
-
+
-
            }
+
-
 
+
         </script>
         </script>
-
 
+
        <title>Page Redirection</title>
-
<div id="slidehumans" class="slide">
+
    </head>
-
            <div class="wrapper clearfix">
+
    <body>
-
 
+
        <!-- Note: don't tell people to `click` the link, just tell them that it is a link. -->
-
<div id="slidehumansheader" class="slideheader"
+
        If you are not redirected automatically, follow the <a href='https://2014.igem.org/Team:UCL'>link to UCL iGEM</a>
-
data-anchor-target="#slidehumans"
+
     </body>
-
data-bottom-top="transform[sqrt]:translateX(300%)"
+
-
data-200-top="transform[sqrt]:translateX(60%)">
+
-
+
-
<h1><span>HUMANS</span></h1>
+
-
 
+
-
                </div>
+
-
 
+
-
                <div id="slidehumanscontent" class="slidecontent"
+
-
data-anchor-target="#slidehumans"
+
-
data-bottom-top="opacity:0;"
+
-
data-150-top="opacity:1;">
+
-
 
+
-
                    <ul id="og-grid" class="og-grid">
+
-
                        <li>
+
-
                            <a href="https://2014.igem.org/wiki/" data-largesrc="images/3/37/DanielDLTPhotoEd.png" data-title="Azuki bean" data-description="Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage soko coriander sweet pepper water spinach winter purslane shallot tigernut lentil beetroot.">
+
-
                                <img src="images/3/37/DanielDLTPhotoEd.png" alt="img01"/>
+
-
                            </a>
+
-
                        </li>
+
-
                        <li>
+
-
                            <a href="https://2014.igem.org/wiki/" data-largesrc="images/3/37/DanielDLTPhotoEd.png" data-title="Veggies sunt bona vobis" data-description="Komatsuna prairie turnip wattle seed artichoke mustard horseradish taro rutabaga ricebean carrot black-eyed pea turnip greens beetroot yarrow watercress kombu.">
+
-
                                <img src="images/3/37/DanielDLTPhotoEd.png" alt="img02"/>
+
-
                            </a>
+
-
                        </li>
+
-
                    </ul>
+
-
 
+
-
</div>
+
-
 
+
-
</div>
+
-
        </div>
+
-
+
-
     </main>
+
-
 
+
-
</div>
+
-
</body>
+
-
 
+
-
 
+
</html>
</html>
-
{{:Team:UCL/Template:footerx}}
 

Latest revision as of 19:52, 16 October 2014

Page Redirection If you are not redirected automatically, follow the link to UCL iGEM

Retrieved from "http://2014.igem.org/Team:UCL/Homex"