Chloroplast (Talk | contribs) |
Chloroplast (Talk | contribs) |
||
(36 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
+ | <script> | ||
+ | /*global jQuery */ | ||
+ | /*! | ||
+ | * Lettering.JS 0.6.1 | ||
+ | * | ||
+ | * Copyright 2010, Dave Rupert http://daverupert.com | ||
+ | * Released under the WTFPL license | ||
+ | * http://sam.zoy.org/wtfpl/ | ||
+ | * | ||
+ | * Thanks to Paul Irish - http://paulirish.com - for the feedback. | ||
+ | * | ||
+ | * Date: Mon Sep 20 17:14:00 2010 -0600 | ||
+ | */ | ||
+ | (function($){ | ||
+ | function injector(t, splitter, klass, after) { | ||
+ | var a = t.text().split(splitter), inject = ''; | ||
+ | if (a.length) { | ||
+ | $(a).each(function(i, item) { | ||
+ | inject += '<span class="'+klass+(i+1)+'">'+item+'</span>'+after; | ||
+ | }); | ||
+ | t.empty().append(inject); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | var methods = { | ||
+ | init : function() { | ||
+ | |||
+ | return this.each(function() { | ||
+ | injector($(this), '', 'char', ''); | ||
+ | }); | ||
+ | |||
+ | }, | ||
+ | |||
+ | words : function() { | ||
+ | |||
+ | return this.each(function() { | ||
+ | injector($(this), ' ', 'word', ' '); | ||
+ | }); | ||
+ | |||
+ | }, | ||
+ | |||
+ | lines : function() { | ||
+ | |||
+ | return this.each(function() { | ||
+ | var r = "eefec303079ad17405c889e092e105b0"; | ||
+ | // Because it's hard to split a <br/> tag consistently across browsers, | ||
+ | // (*ahem* IE *ahem*), we replaces all <br/> instances with an md5 hash | ||
+ | // (of the word "split"). If you're trying to use this plugin on that | ||
+ | // md5 hash string, it will fail because you're being ridiculous. | ||
+ | injector($(this).children("br").replaceWith(r).end(), r, 'line', ''); | ||
+ | }); | ||
+ | |||
+ | } | ||
+ | }; | ||
+ | |||
+ | $.fn.lettering = function( method ) { | ||
+ | // Method calling logic | ||
+ | if ( andop(method, methods[method]) ) { | ||
+ | return methods[ method ].apply( this, [].slice.call( arguments, 1 )); | ||
+ | } else if ( method === 'letters' || ! method ) { | ||
+ | return methods.init.apply( this, [].slice.call( arguments, 0 ) ); // always pass an array | ||
+ | } | ||
+ | $.error( 'Method ' + method + ' does not exist on jQuery.lettering' ); | ||
+ | return this; | ||
+ | }; | ||
+ | |||
+ | })(jQuery); | ||
+ | /* | ||
+ | * textillate.js | ||
+ | * http://jschr.github.com/textillate | ||
+ | * MIT licensed | ||
+ | * | ||
+ | * Copyright (C) 2012-2013 Jordan Schroter | ||
+ | */ | ||
+ | |||
+ | (function ($) { | ||
+ | "use strict"; | ||
+ | |||
+ | function isInEffect (effect) { | ||
+ | return /In/.test(effect) || $.inArray(effect, $.fn.textillate.defaults.inEffects) >= 0; | ||
+ | }; | ||
+ | |||
+ | function isOutEffect (effect) { | ||
+ | return /Out/.test(effect) || $.inArray(effect, $.fn.textillate.defaults.outEffects) >= 0; | ||
+ | }; | ||
+ | |||
+ | |||
+ | function stringToBoolean(str) { | ||
+ | if (str !== "true") { | ||
+ | if (str !== "false") return str; | ||
+ | } | ||
+ | return (str === "true"); | ||
+ | }; | ||
+ | |||
+ | // custom get data api method | ||
+ | function getData (node) { | ||
+ | var attrs = node.attributes || [] | ||
+ | , data = {}; | ||
+ | |||
+ | if (!attrs.length) return data; | ||
+ | |||
+ | $.each(attrs, function (i, attr) { | ||
+ | var nodeName = attr.nodeName.replace(/delayscale/, 'delayScale'); | ||
+ | if (/^data-in-*/.test(nodeName)) { | ||
+ | data.in = data.in || {}; | ||
+ | data.in[nodeName.replace(/data-in-/, '')] = stringToBoolean(attr.nodeValue); | ||
+ | } else if (/^data-out-*/.test(nodeName)) { | ||
+ | data.out = data.out || {}; | ||
+ | data.out[nodeName.replace(/data-out-/, '')] =stringToBoolean(attr.nodeValue); | ||
+ | } else if (/^data-*/.test(nodeName)) { | ||
+ | data[nodeName.replace(/data-/, '')] = stringToBoolean(attr.nodeValue); | ||
+ | } | ||
+ | }) | ||
+ | |||
+ | return data; | ||
+ | } | ||
+ | |||
+ | function shuffle (o) { | ||
+ | for (var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x); | ||
+ | return o; | ||
+ | } | ||
+ | |||
+ | function animate ($t, effect, cb) { | ||
+ | $t.addClass('animated ' + effect) | ||
+ | .css('visibility', 'visible') | ||
+ | .show(); | ||
+ | |||
+ | $t.one('animationend webkitAnimationEnd oAnimationEnd', function () { | ||
+ | $t.removeClass('animated ' + effect); | ||
+ | cb(); | ||
+ | }); | ||
+ | } | ||
+ | |||
+ | function animateTokens ($tokens, options, cb) { | ||
+ | var that = this | ||
+ | , count = $tokens.length; | ||
+ | |||
+ | if (!count) { | ||
+ | cb(); | ||
+ | return; | ||
+ | } | ||
+ | |||
+ | if (options.shuffle) $tokens = shuffle($tokens); | ||
+ | if (options.reverse) $tokens = $tokens.toArray().reverse(); | ||
+ | |||
+ | $.each($tokens, function (i, t) { | ||
+ | var $token = $(t); | ||
+ | |||
+ | function complete () { | ||
+ | if (isInEffect(options.effect)) { | ||
+ | $token.css('visibility', 'visible'); | ||
+ | } else if (isOutEffect(options.effect)) { | ||
+ | $token.css('visibility', 'hidden'); | ||
+ | } | ||
+ | count -= 1; | ||
+ | if (!count) { | ||
+ | if (cb) cb(); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | var delay = options.sync ? options.delay : options.delay * i * options.delayScale; | ||
+ | |||
+ | $token.text() ? | ||
+ | setTimeout(function () { animate($token, options.effect, complete) }, delay) : | ||
+ | complete(); | ||
+ | }); | ||
+ | }; | ||
+ | |||
+ | var Textillate = function (element, options) { | ||
+ | var base = this | ||
+ | , $element = $(element); | ||
+ | |||
+ | base.init = function () { | ||
+ | base.$texts = $element.find(options.selector); | ||
+ | |||
+ | if (!base.$texts.length) { | ||
+ | base.$texts = $('<ul class="texts"><li>' + $element.html() + '</li></ul>'); | ||
+ | $element.html(base.$texts); | ||
+ | } | ||
+ | |||
+ | base.$texts.hide(); | ||
+ | |||
+ | base.$current = $('<span>') | ||
+ | .html(base.$texts.find(':first-child').html()) | ||
+ | .prependTo($element); | ||
+ | |||
+ | if (isInEffect(options.in.effect)) { | ||
+ | base.$current.css('visibility', 'hidden'); | ||
+ | } else if (isOutEffect(options.out.effect)) { | ||
+ | base.$current.css('visibility', 'visible'); | ||
+ | } | ||
+ | |||
+ | base.setOptions(options); | ||
+ | |||
+ | base.timeoutRun = null; | ||
+ | |||
+ | setTimeout(function () { | ||
+ | base.start(); | ||
+ | }, base.options.initialDelay) | ||
+ | }; | ||
+ | |||
+ | base.setOptions = function (options) { | ||
+ | base.options = options; | ||
+ | }; | ||
+ | |||
+ | base.triggerEvent = function (name) { | ||
+ | var e = $.Event(name + '.tlt'); | ||
+ | $element.trigger(e, base); | ||
+ | return e; | ||
+ | }; | ||
+ | |||
+ | base.in = function (index, cb) { | ||
+ | index = index || 0; | ||
+ | |||
+ | var $elem = base.$texts.find(':nth-child(' + ((index||0) + 1) + ')') | ||
+ | , options = $.extend(true, {}, base.options, $elem.length ? getData($elem[0]) : {}) | ||
+ | , $tokens; | ||
+ | |||
+ | $elem.addClass('current'); | ||
+ | |||
+ | base.triggerEvent('inAnimationBegin'); | ||
+ | |||
+ | base.$current | ||
+ | .html($elem.html()) | ||
+ | .lettering('words'); | ||
+ | |||
+ | // split words to individual characters if token type is set to 'char' | ||
+ | if (base.options.type == "char") { | ||
+ | base.$current.find('[class^="word"]') | ||
+ | .css({ | ||
+ | 'display': 'inline-block', | ||
+ | // fix for poor ios performance | ||
+ | '-webkit-transform': 'translate3d(0,0,0)', | ||
+ | '-moz-transform': 'translate3d(0,0,0)', | ||
+ | '-o-transform': 'translate3d(0,0,0)', | ||
+ | 'transform': 'translate3d(0,0,0)' | ||
+ | }) | ||
+ | .each(function () { $(this).lettering() }); | ||
+ | } | ||
+ | |||
+ | $tokens = base.$current | ||
+ | .find('[class^="' + base.options.type + '"]') | ||
+ | .css('display', 'inline-block'); | ||
+ | |||
+ | if (isInEffect(options.in.effect)) { | ||
+ | $tokens.css('visibility', 'hidden'); | ||
+ | } else if (isOutEffect(options.in.effect)) { | ||
+ | $tokens.css('visibility', 'visible'); | ||
+ | } | ||
+ | |||
+ | base.currentIndex = index; | ||
+ | |||
+ | animateTokens($tokens, options.in, function () { | ||
+ | base.triggerEvent('inAnimationEnd'); | ||
+ | if (options.in.callback) options.in.callback(); | ||
+ | if (cb) cb(base); | ||
+ | }); | ||
+ | }; | ||
+ | |||
+ | base.out = function (cb) { | ||
+ | var $elem = base.$texts.find(':nth-child(' + ((base.currentIndex||0) + 1) + ')') | ||
+ | , $tokens = base.$current.find('[class^="' + base.options.type + '"]') | ||
+ | , options = $.extend(true, {}, base.options, $elem.length ? getData($elem[0]) : {}) | ||
+ | |||
+ | base.triggerEvent('outAnimationBegin'); | ||
+ | |||
+ | animateTokens($tokens, options.out, function () { | ||
+ | $elem.removeClass('current'); | ||
+ | base.triggerEvent('outAnimationEnd'); | ||
+ | if (options.out.callback) options.out.callback(); | ||
+ | if (cb) cb(base); | ||
+ | }); | ||
+ | }; | ||
+ | |||
+ | base.start = function (index) { | ||
+ | setTimeout(function () { | ||
+ | base.triggerEvent('start'); | ||
+ | |||
+ | (function run (index) { | ||
+ | base.in(index, function () { | ||
+ | var length = base.$texts.children().length; | ||
+ | |||
+ | index += 1; | ||
+ | |||
+ | if (!base.options.loop) { | ||
+ | if (index >= length) { | ||
+ | if (base.options.callback) base.options.callback(); | ||
+ | base.triggerEvent('end'); | ||
+ | } else { | ||
+ | index = index % length; | ||
+ | |||
+ | base.timeoutRun = setTimeout(function () { | ||
+ | base.out(function () { | ||
+ | run(index) | ||
+ | }); | ||
+ | }, base.options.minDisplayTime); | ||
+ | } | ||
+ | } else { | ||
+ | index = index % length; | ||
+ | |||
+ | base.timeoutRun = setTimeout(function () { | ||
+ | base.out(function () { | ||
+ | run(index) | ||
+ | }); | ||
+ | }, base.options.minDisplayTime); | ||
+ | } | ||
+ | }); | ||
+ | }(index || 0)); | ||
+ | }, base.options.initialDelay); | ||
+ | }; | ||
+ | |||
+ | base.stop = function () { | ||
+ | if (base.timeoutRun) { | ||
+ | clearInterval(base.timeoutRun); | ||
+ | base.timeoutRun = null; | ||
+ | } | ||
+ | }; | ||
+ | |||
+ | base.init(); | ||
+ | } | ||
+ | |||
+ | $.fn.textillate = function (settings, args) { | ||
+ | return this.each(function () { | ||
+ | var $this = $(this) | ||
+ | , data = $this.data('textillate') | ||
+ | , options = $.extend(true, {}, $.fn.textillate.defaults, getData(this), andop(typeof settings == 'object', settings)); | ||
+ | |||
+ | if (!data) { | ||
+ | $this.data('textillate', (data = new Textillate(this, options))); | ||
+ | } else if (typeof settings == 'string') { | ||
+ | data[settings].apply(data, [].concat(args)); | ||
+ | } else { | ||
+ | data.setOptions.call(data, options); | ||
+ | } | ||
+ | }) | ||
+ | }; | ||
+ | |||
+ | $.fn.textillate.defaults = { | ||
+ | selector: '.texts', | ||
+ | loop: false, | ||
+ | minDisplayTime: 2000, | ||
+ | initialDelay: 0, | ||
+ | in: { | ||
+ | effect: 'fadeInLeftBig', | ||
+ | delayScale: 1.5, | ||
+ | delay: 50, | ||
+ | sync: true, | ||
+ | reverse: false, | ||
+ | shuffle: false, | ||
+ | callback: function () {} | ||
+ | }, | ||
+ | out: { | ||
+ | effect: 'hinge', | ||
+ | delayScale: 1.5, | ||
+ | delay: 50, | ||
+ | sync: true, | ||
+ | reverse: false, | ||
+ | shuffle: false, | ||
+ | callback: function () {} | ||
+ | }, | ||
+ | autoStart: true, | ||
+ | inEffects: [], | ||
+ | outEffects: ['hinge'], | ||
+ | callback: function () {}, | ||
+ | type: 'char' | ||
+ | }; | ||
+ | |||
+ | }(jQuery)); | ||
+ | </script> | ||
<!--lunar.js--> | <!--lunar.js--> | ||
<script> | <script> | ||
(function (root, factory) { | (function (root, factory) { | ||
− | if (typeof define === 'function') { | + | if (typeof define === 'function' ) { |
− | + | if(define.amd){ | |
+ | define(factory); | ||
+ | }else if (typeof exports === 'object') { | ||
+ | module.exports = factory; | ||
+ | } else { | ||
+ | root.lunar = factory(); | ||
+ | } | ||
} else if (typeof exports === 'object') { | } else if (typeof exports === 'object') { | ||
module.exports = factory; | module.exports = factory; | ||
Line 739: | Line 1,114: | ||
*/ | */ | ||
var SidebarMenuEffects = (function() { | var SidebarMenuEffects = (function() { | ||
− | |||
function hasParentClass( e, classname ) { | function hasParentClass( e, classname ) { | ||
if(e === document) return false; | if(e === document) return false; | ||
Line 745: | Line 1,119: | ||
return true; | return true; | ||
} | } | ||
− | + | if(e.parentNode){ | |
+ | if(hasParentClass( e.parentNode, classname )){ | ||
+ | return true; | ||
+ | }else{ | ||
+ | return false; | ||
+ | } | ||
+ | }else{ | ||
+ | return false; | ||
+ | } | ||
} | } | ||
Line 1,279: | Line 1,661: | ||
}) | }) | ||
}).call(this); | }).call(this); | ||
+ | </script> | ||
+ | <script> | ||
+ | (function() { | ||
+ | new PointsMap(document.querySelector('#interactive-2'), { | ||
+ | // Maximum opacity that the background element of a Point can have when the point is active (mouse gets closer to it). | ||
+ | maxOpacityOnActive : 1, | ||
+ | // When the mouse is [activeOn]px away from one point, its image gets opacity = point.options.maxOpacity. | ||
+ | activeOn : 90 | ||
+ | }); | ||
+ | })(); | ||
+ | </script> | ||
+ | <script> | ||
+ | function growDiv(param) { | ||
+ | var id = param; | ||
+ | var growDiv = document.getElementById('grow-'+id); | ||
+ | |||
+ | if (growDiv.clientHeight) { | ||
+ | growDiv.style.height = 0; | ||
+ | } else { | ||
+ | var items = document.querySelectorAll('#grow-' + id + ' .list-group-item'); | ||
+ | if (items.length > 0) | ||
+ | growDiv.style.height = (items.length * items[0].clientHeight) + "px"; | ||
+ | } | ||
+ | |||
+ | if(document.getElementById("menu-item-"+id).className.indexOf("focus") >= 0){ | ||
+ | document.getElementById("menu-item-"+id).className = document.getElementById("menu-item-"+id).className.replace("focus", ""); | ||
+ | } else{ | ||
+ | document.getElementById("menu-item-"+id).className += " focus"; | ||
+ | } | ||
+ | |||
+ | if(id == 2 || id == 3 || id == 4 || id == 7 || id == 9){ | ||
+ | $("#sidebar-arrow-" + id).toggleClass("side-bar-arrow-up"); | ||
+ | } | ||
+ | |||
+ | event.preventDefault(); | ||
+ | } | ||
+ | |||
+ | var $head = $( '#ha-header' ); | ||
+ | $( '.ha-waypoint' ).each( function(i) { | ||
+ | var $el = $( this ), | ||
+ | animClassDown = $el.data( 'animateDown' ), | ||
+ | animClassUp = $el.data( 'animateUp' ); | ||
+ | |||
+ | $el.waypoint( function( direction ) { | ||
+ | if( !(direction !== 'down' || !animClassDown) ) { | ||
+ | $head.attr('class', 'ha-header ' + animClassDown); | ||
+ | } | ||
+ | else if( !(direction !== 'up' || !animClassUp) ){ | ||
+ | $head.attr('class', 'ha-header ' + animClassUp); | ||
+ | } | ||
+ | }, { offset: '100%' } ); | ||
+ | } ); | ||
+ | |||
+ | (function($) { | ||
+ | |||
+ | var setCss = function() { | ||
+ | if($(window).width() <= 900) { | ||
+ | $('#nus_logo').css('left', "10%"); | ||
+ | $('#sci_logo').css('display', "none"); | ||
+ | $('#sps_logo').css('display', "none"); | ||
+ | $('.canvas_parts').css('display', "none"); | ||
+ | }else{ | ||
+ | $('#nus_logo').css('left', "0%"); | ||
+ | $('#sci_logo').css('display', "block"); | ||
+ | $('#sps_logo').css('display', "block"); | ||
+ | $('.canvas_parts').css('display', "block"); | ||
+ | } | ||
+ | }; | ||
+ | |||
+ | $(document).ready(function() { | ||
+ | setCss(); | ||
+ | $(window).resize(setCss); | ||
+ | }); | ||
+ | |||
+ | })(jQuery); | ||
+ | </script> | ||
+ | |||
+ | <script> | ||
+ | |||
+ | $( "#canvas" ) | ||
+ | .mouseleave(function() { | ||
+ | $('.Cancer_cell_body_text').css('display', 'none'); | ||
+ | $('#Cancer_cell_body').css('opacity', '1'); | ||
+ | $('#Lactate').css('opacity', '1'); | ||
+ | |||
+ | $('#CD44v6_text').css('display', 'none'); | ||
+ | $('#CD44v6').css('opacity', '1'); | ||
+ | |||
+ | $('.Invasin_and_LLO_text').css('display', 'none'); | ||
+ | $('#Invasin_and_LLO').css('opacity', '1'); | ||
+ | |||
+ | $('#Quorum_Sensing_text').css('display', 'none'); | ||
+ | $('#Quorum_Sensing').css('opacity', '1'); | ||
+ | |||
+ | }); | ||
+ | |||
+ | |||
+ | $( "div.CD44v6" ) | ||
+ | .mouseenter(function() { | ||
+ | $('#Cancer_cell_body').css('opacity', '0.2'); | ||
+ | $('#Lactate').css('opacity', '0.2'); | ||
+ | $('.Cancer_cell_body_text').css('display', 'none'); | ||
+ | $('#Quorum_Sensing').css('opacity', '0.2'); | ||
+ | $('#Quorum_Sensing_text').css('display', 'none'); | ||
+ | $('#Invasin_and_LLO').css('opacity', '0.2'); | ||
+ | $('.Invasin_and_LLO_text').css('display', 'none'); | ||
+ | |||
+ | $('#CD44v6').css('opacity', '1'); | ||
+ | $('#CD44v6_text').css('display', 'block'); | ||
+ | $('#CD44v6_text').textillate({ in: { | ||
+ | effect: 'fadeInUpBig', | ||
+ | sync: true | ||
+ | } }); | ||
+ | }) | ||
+ | .mouseleave(function() { | ||
+ | $('#CD44v6_text').css('display', 'none'); | ||
+ | $('.CD44v6_text').textillate('start'); | ||
+ | }); | ||
+ | |||
+ | |||
+ | $( "div.Cancer_cell_body" ) | ||
+ | .mouseenter(function() { | ||
+ | $('#CD44v6_text').css('display', 'none'); | ||
+ | $('#CD44v6').css('opacity', '0.2'); | ||
+ | $('#Quorum_Sensing').css('opacity', '0.2'); | ||
+ | $('#Quorum_Sensing_text').css('display', 'none'); | ||
+ | $('#Invasin_and_LLO').css('opacity', '0.2'); | ||
+ | $('.Invasin_and_LLO_text').css('display', 'none'); | ||
+ | |||
+ | |||
+ | $('.Cancer_cell_body_text').css('display', 'block'); | ||
+ | $('#Cancer_cell_body').css('opacity', '1'); | ||
+ | $('#Lactate').css('opacity', '1'); | ||
+ | $('.Cancer_cell_body_text').textillate({ in: { | ||
+ | effect: 'fadeInRightBig', | ||
+ | sync: true | ||
+ | } }); | ||
+ | }) | ||
+ | .mouseleave(function() { | ||
+ | $('.Cancer_cell_body_text').css('display', 'none'); | ||
+ | $('.Cancer_cell_body_text').textillate('start'); | ||
+ | }); | ||
+ | |||
+ | |||
+ | $( "div.Invasin_and_LLO" ) | ||
+ | .mouseenter(function() { | ||
+ | $('#CD44v6_text').css('display', 'none'); | ||
+ | $('#CD44v6').css('opacity', '0.2'); | ||
+ | $('#Cancer_cell_body').css('opacity', '0.2'); | ||
+ | $('#Lactate').css('opacity', '0.2'); | ||
+ | $('.Cancer_cell_body_text').css('display', 'none'); | ||
+ | $('#Quorum_Sensing').css('opacity', '0.2'); | ||
+ | $('#Quorum_Sensing_text').css('display', 'none'); | ||
+ | |||
+ | |||
+ | $('.Invasin_and_LLO_text').css('display', 'inline'); | ||
+ | $('#Invasin_and_LLO').css('opacity', '1'); | ||
+ | $('.Invasin_and_LLO_text').textillate({ in: { | ||
+ | effect: 'fadeInDownBig', | ||
+ | sync: true | ||
+ | } }); | ||
+ | }) | ||
+ | .mouseleave(function() { | ||
+ | $('.Invasin_and_LLO_text').css('display', 'none'); | ||
+ | $('.Invasin_and_LLO_text').textillate('start'); | ||
+ | }); | ||
+ | |||
+ | |||
+ | $( "div.Quorum_Sensing" ) | ||
+ | .mouseenter(function() { | ||
+ | $('#CD44v6_text').css('display', 'none'); | ||
+ | $('#CD44v6').css('opacity', '0.2'); | ||
+ | $('#Cancer_cell_body').css('opacity', '0.2'); | ||
+ | $('#Lactate').css('opacity', '0.2'); | ||
+ | $('.Cancer_cell_body_text').css('display', 'none'); | ||
+ | $('#Invasin_and_LLO').css('opacity', '0.2'); | ||
+ | $('.Invasin_and_LLO_text').css('display', 'none'); | ||
+ | |||
+ | |||
+ | $('#Quorum_Sensing_text').css('display', 'block'); | ||
+ | $('#Quorum_Sensing').css('opacity', '1'); | ||
+ | $('#Quorum_Sensing_text').textillate({ in: { | ||
+ | effect: 'fadeInLeftBig', | ||
+ | sync: true | ||
+ | } }); | ||
+ | }) | ||
+ | .mouseleave(function() { | ||
+ | $('#Quorum_Sensing_text').css('display', 'none'); | ||
+ | $('#Quorum_Sensing_text').textillate('start'); | ||
+ | }); | ||
+ | |||
+ | // $('#CD44v6').mouseenter(function() { | ||
+ | // $('#CD44v6').css('display', 'none'); | ||
+ | // }); | ||
+ | // $( "#CD44v6" ).mouseleave(function() { | ||
+ | // $('#CD44v6').css('display', 'block'); | ||
+ | // }); | ||
+ | </script> | ||
+ | |||
+ | <!-- and operator --> | ||
+ | <script> | ||
+ | var andop = function (a, b) { | ||
+ | if (a) { | ||
+ | if (b) { | ||
+ | return true; | ||
+ | } else { | ||
+ | return false; | ||
+ | } | ||
+ | } else { | ||
+ | return false; | ||
+ | } | ||
+ | }; | ||
+ | </script> | ||
+ | <script> | ||
+ | $(function() { | ||
+ | |||
+ | var $sidescroll = (function() { | ||
+ | |||
+ | // the row elements | ||
+ | var $rows = $('#ss-container > div.ss-row'), | ||
+ | // we will cache the inviewport rows and the outside viewport rows | ||
+ | $rowsViewport, $rowsOutViewport, | ||
+ | // navigation menu links | ||
+ | $links = $('#ss-links > a'), | ||
+ | // the window element | ||
+ | $win = $(window), | ||
+ | // we will store the window sizes here | ||
+ | winSize = {}, | ||
+ | // used in the scroll setTimeout function | ||
+ | anim = false, | ||
+ | // page scroll speed | ||
+ | scollPageSpeed = 2000 , | ||
+ | // page scroll easing | ||
+ | scollPageEasing = 'easeInOutExpo', | ||
+ | // perspective? | ||
+ | hasPerspective = false, | ||
+ | |||
+ | perspective = hasPerspective, | ||
+ | // initialize function | ||
+ | init = function() { | ||
+ | |||
+ | // get window sizes | ||
+ | getWinSize(); | ||
+ | // initialize events | ||
+ | initEvents(); | ||
+ | // define the inviewport selector | ||
+ | defineViewport(); | ||
+ | // gets the elements that match the previous selector | ||
+ | setViewportRows(); | ||
+ | // if perspective add css | ||
+ | if( perspective ) { | ||
+ | $rows.css({ | ||
+ | '-webkit-perspective' : 600, | ||
+ | '-webkit-perspective-origin' : '50% 0%' | ||
+ | }); | ||
+ | } | ||
+ | // show the pointers for the inviewport rows | ||
+ | $rowsViewport.find('a.ss-circle').addClass('ss-circle-deco'); | ||
+ | // set positions for each row | ||
+ | placeRows(); | ||
+ | |||
+ | }, | ||
+ | // defines a selector that gathers the row elems that are initially visible. | ||
+ | // the element is visible if its top is less than the window's height. | ||
+ | // these elements will not be affected when scrolling the page. | ||
+ | defineViewport = function() { | ||
+ | |||
+ | $.extend( $.expr[':'], { | ||
+ | |||
+ | inviewport : function ( el ) { | ||
+ | if ( $(el).offset().top < winSize.height ) { | ||
+ | return true; | ||
+ | } | ||
+ | return false; | ||
+ | } | ||
+ | |||
+ | }); | ||
+ | |||
+ | }, | ||
+ | // checks which rows are initially visible | ||
+ | setViewportRows = function() { | ||
+ | |||
+ | $rowsViewport = $rows.filter(':inviewport'); | ||
+ | $rowsOutViewport = $rows.not( $rowsViewport ) | ||
+ | |||
+ | }, | ||
+ | // get window sizes | ||
+ | getWinSize = function() { | ||
+ | |||
+ | winSize.width = $win.width(); | ||
+ | winSize.height = $win.height(); | ||
+ | |||
+ | }, | ||
+ | // initialize some events | ||
+ | initEvents = function() { | ||
+ | |||
+ | // navigation menu links. | ||
+ | // scroll to the respective section. | ||
+ | $links.on( 'click.Scrolling', function( event ) { | ||
+ | |||
+ | // scroll to the element that has id = menu's href | ||
+ | $('html, body').stop().animate({ | ||
+ | scrollTop: $( $(this).attr('href') ).offset().top | ||
+ | }, scollPageSpeed, scollPageEasing ); | ||
+ | |||
+ | return false; | ||
+ | |||
+ | }); | ||
+ | |||
+ | $(window).on({ | ||
+ | // on window resize we need to redefine which rows are initially visible (this ones we will not animate). | ||
+ | 'resize.Scrolling' : function( event ) { | ||
+ | |||
+ | // get the window sizes again | ||
+ | getWinSize(); | ||
+ | // redefine which rows are initially visible (:inviewport) | ||
+ | setViewportRows(); | ||
+ | // remove pointers for every row | ||
+ | $rows.find('a.ss-circle').removeClass('ss-circle-deco'); | ||
+ | // show inviewport rows and respective pointers | ||
+ | $rowsViewport.each( function() { | ||
+ | |||
+ | $(this).find('div.ss-left') | ||
+ | .css({ left : '0%' }) | ||
+ | .end() | ||
+ | .find('div.ss-right') | ||
+ | .css({ right : '0%' }) | ||
+ | .end() | ||
+ | .find('a.ss-circle') | ||
+ | .addClass('ss-circle-deco'); | ||
+ | |||
+ | }); | ||
+ | |||
+ | }, | ||
+ | // when scrolling the page change the position of each row | ||
+ | 'scroll.Scrolling' : function( event ) { | ||
+ | |||
+ | // set a timeout to avoid that the | ||
+ | // placeRows function gets called on every scroll trigger | ||
+ | if( anim ) return false; | ||
+ | anim = true; | ||
+ | setTimeout( function() { | ||
+ | |||
+ | placeRows(); | ||
+ | anim = false; | ||
+ | |||
+ | }, 10 ); | ||
+ | |||
+ | } | ||
+ | }); | ||
+ | |||
+ | }, | ||
+ | // sets the position of the rows (left and right row elements). | ||
+ | // Both of these elements will start with -50% for the left/right (not visible) | ||
+ | // and this value should be 0% (final position) when the element is on the | ||
+ | // center of the window. | ||
+ | placeRows = function() { | ||
+ | |||
+ | // how much we scrolled so far | ||
+ | var winscroll = $win.scrollTop(), | ||
+ | // the y value for the center of the screen | ||
+ | winCenter = winSize.height / 2 + winscroll; | ||
+ | |||
+ | // for every row that is not inviewport | ||
+ | $rowsOutViewport.each( function(i) { | ||
+ | |||
+ | var $row = $(this), | ||
+ | // the left side element | ||
+ | $rowL = $row.find('div.ss-left'), | ||
+ | // the right side element | ||
+ | $rowR = $row.find('div.ss-right'), | ||
+ | // top value | ||
+ | rowT = $row.offset().top; | ||
+ | |||
+ | // hide the row if it is under the viewport | ||
+ | if( rowT > winSize.height + winscroll ) { | ||
+ | |||
+ | if( perspective ) { | ||
+ | |||
+ | $rowL.css({ | ||
+ | '-webkit-transform' : 'translate3d(-75%, 0, 0) rotateY(-90deg) translate3d(-75%, 0, 0)', | ||
+ | 'opacity' : 0 | ||
+ | }); | ||
+ | $rowR.css({ | ||
+ | '-webkit-transform' : 'translate3d(75%, 0, 0) rotateY(90deg) translate3d(75%, 0, 0)', | ||
+ | 'opacity' : 0 | ||
+ | }); | ||
+ | |||
+ | } | ||
+ | else { | ||
+ | |||
+ | $rowL.css({ left : '-50%' }); | ||
+ | $rowR.css({ right : '-50%' }); | ||
+ | |||
+ | } | ||
+ | |||
+ | } | ||
+ | // if not, the row should become visible (0% of left/right) as it gets closer to the center of the screen. | ||
+ | else { | ||
+ | |||
+ | // row's height | ||
+ | var rowH = $row.height(), | ||
+ | // the value on each scrolling step will be proporcional to the distance from the center of the screen to its height | ||
+ | factor = ( ( ( rowT + rowH / 2 ) - winCenter ) / ( winSize.height / 2 + rowH / 2 ) ), | ||
+ | // value for the left / right of each side of the row. | ||
+ | // 0% is the limit | ||
+ | val = Math.max( factor * 50, 0 ); | ||
+ | |||
+ | if( val <= 0 ) { | ||
+ | |||
+ | // when 0% is reached show the pointer for that row | ||
+ | if( !$row.data('pointer') ) { | ||
+ | |||
+ | $row.data( 'pointer', true ); | ||
+ | $row.find('.ss-circle').addClass('ss-circle-deco'); | ||
+ | |||
+ | } | ||
+ | |||
+ | } | ||
+ | else { | ||
+ | |||
+ | // the pointer should not be shown | ||
+ | if( $row.data('pointer') ) { | ||
+ | |||
+ | $row.data( 'pointer', false ); | ||
+ | $row.find('.ss-circle').removeClass('ss-circle-deco'); | ||
+ | |||
+ | } | ||
+ | |||
+ | } | ||
+ | |||
+ | // set calculated values | ||
+ | if( perspective ) { | ||
+ | |||
+ | var t = Math.max( factor * 75, 0 ), | ||
+ | r = Math.max( factor * 90, 0 ), | ||
+ | o = Math.min( Math.abs( factor - 1 ), 1 ); | ||
+ | |||
+ | $rowL.css({ | ||
+ | '-webkit-transform' : 'translate3d(-' + t + '%, 0, 0) rotateY(-' + r + 'deg) translate3d(-' + t + '%, 0, 0)', | ||
+ | 'opacity' : o | ||
+ | }); | ||
+ | $rowR.css({ | ||
+ | '-webkit-transform' : 'translate3d(' + t + '%, 0, 0) rotateY(' + r + 'deg) translate3d(' + t + '%, 0, 0)', | ||
+ | 'opacity' : o | ||
+ | }); | ||
+ | |||
+ | } | ||
+ | else { | ||
+ | |||
+ | $rowL.css({ left : - val + '%' }); | ||
+ | $rowR.css({ right : - val + '%' }); | ||
+ | |||
+ | } | ||
+ | |||
+ | } | ||
+ | |||
+ | }); | ||
+ | |||
+ | }; | ||
+ | |||
+ | return { init : init }; | ||
+ | |||
+ | })(); | ||
+ | |||
+ | $sidescroll.init(); | ||
+ | |||
+ | }); | ||
+ | $(document).ready(function() { | ||
+ | // Show or hide the sticky footer button | ||
+ | $(window).scroll(function() { | ||
+ | if ($(this).scrollTop() > 200) { | ||
+ | $('.go-top').fadeIn(200); | ||
+ | } else { | ||
+ | $('.go-top').fadeOut(200); | ||
+ | } | ||
+ | }); | ||
+ | |||
+ | // Animate the scroll to top | ||
+ | $('.go-top').click(function(event) { | ||
+ | event.preventDefault(); | ||
+ | |||
+ | $('html, body').animate({scrollTop: 0}, 300); | ||
+ | }) | ||
+ | }); | ||
</script> | </script> | ||
</html> | </html> |
Latest revision as of 07:39, 16 October 2016