Difference between revisions of "Template:Team:NUS Singapore/JS"

 
(28 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
<html>
 
<html>
<sciprt>
+
<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
 
  * textillate.js
Line 22: Line 88:
  
 
   function stringToBoolean(str) {
 
   function stringToBoolean(str) {
     if (str !== "true" && str !== "false") return str;
+
     if (str !== "true") {
 +
      if (str !== "false") return str;
 +
    }
 
     return (str === "true");
 
     return (str === "true");
 
   };
 
   };
Line 61: Line 129:
 
     $t.one('animationend webkitAnimationEnd oAnimationEnd', function () {
 
     $t.one('animationend webkitAnimationEnd oAnimationEnd', function () {
 
         $t.removeClass('animated ' + effect);
 
         $t.removeClass('animated ' + effect);
         cb && cb();
+
         cb();
 
     });
 
     });
 
   }
 
   }
Line 70: Line 138:
  
 
     if (!count) {
 
     if (!count) {
       cb && cb();
+
       cb();
 
       return;
 
       return;
 
     }
 
     }
Line 87: Line 155:
 
         }
 
         }
 
         count -= 1;
 
         count -= 1;
         if (!count && cb) cb();
+
         if (!count) {
 +
          if (cb) cb();
 +
        }
 
       }
 
       }
  
Line 127: Line 197:
  
 
       setTimeout(function () {
 
       setTimeout(function () {
         base.options.autoStart && base.start();
+
         base.start();
 
       }, base.options.initialDelay)
 
       }, base.options.initialDelay)
 
     };
 
     };
Line 214: Line 284:
 
           index += 1;
 
           index += 1;
  
           if (!base.options.loop && index >= length) {
+
           if (!base.options.loop) {
            if (base.options.callback) base.options.callback();
+
            if (index >= length) {
            base.triggerEvent('end');
+
              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 {
 
           } else {
 
             index = index % length;
 
             index = index % length;
Line 245: Line 325:
 
       var $this = $(this)
 
       var $this = $(this)
 
         , data = $this.data('textillate')
 
         , data = $this.data('textillate')
         , options = $.extend(true, {}, $.fn.textillate.defaults, getData(this), typeof settings == 'object' && settings);
+
         , options = $.extend(true, {}, $.fn.textillate.defaults, getData(this), andop(typeof settings == 'object', settings));
  
 
       if (!data) {
 
       if (!data) {
Line 266: Line 346:
 
       delayScale: 1.5,
 
       delayScale: 1.5,
 
       delay: 50,
 
       delay: 50,
       sync: false,
+
       sync: true,
 
       reverse: false,
 
       reverse: false,
 
       shuffle: false,
 
       shuffle: false,
Line 275: Line 355:
 
       delayScale: 1.5,
 
       delayScale: 1.5,
 
       delay: 50,
 
       delay: 50,
       sync: false,
+
       sync: true,
 
       reverse: false,
 
       reverse: false,
 
       shuffle: false,
 
       shuffle: false,
Line 282: Line 362:
 
     autoStart: true,
 
     autoStart: true,
 
     inEffects: [],
 
     inEffects: [],
     outEffects: [ 'hinge' ],
+
     outEffects: ['hinge'],
 
     callback: function () {},
 
     callback: function () {},
 
     type: 'char'
 
     type: 'char'
Line 288: Line 368:
  
 
}(jQuery));
 
}(jQuery));
</script>
 
<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 ( 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);
 
 
</script>
 
</script>
 
<!--lunar.js-->
 
<!--lunar.js-->
Line 1,649: 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