Team:UB Indonesia/js/script
From 2014.igem.org
$(document).ready(function(e) { $('.with-hover-text, .regular-link').click(function(e){ e.stopPropagation(); });
/*************** * = Hover text * * Hover text for the last slide ***************/ $('.with-hover-text').hover( function(e) { $(this).css('overflow', 'visible'); $(this).find('.hover-text') .show() .css('opacity', 0) .delay(200) .animate( { paddingTop: '25px', opacity: 1 }, 'fast', 'linear' ); }, function(e) { var obj = $(this); $(this).find('.hover-text') .animate( { paddingTop: '0', opacity: 0 }, 'fast', 'linear', function() { $(this).hide(); $( obj ).css('overflow', 'hidden'); } ); } );
var img_loaded = 0; var j_images = [];
/************************* * = Controls active menu * * Hover text for the last slide *************************/ $('#slide-7 img').each(function(index, element) { var time = new Date().getTime(); var oldHref = $(this).attr('src'); var myImg = $('<img />').attr('src', oldHref + '?' + time );
myImg.load(function(e) { img_loaded += 1;; if ( img_loaded == $('#slide-7 img').length ) { $(function() { var pause = 10; $(document).scroll(function(e) { delay(function() {
var tops = [];
$('.story').each(function(index, element) { tops.push( $(element).offset().top - 200 ); });
var scroll_top = $(this).scrollTop();
var lis = $('.nav > li');
for ( var i=tops.length-1; i>=0; i-- ) { if ( scroll_top >= tops[i] ) { menu_focus( lis[i], i+1 ); break; } } }, pause); }); $(document).scroll(); }); } }); });
});
/******************
- = Gallery width *
- /
$(function() { var pause = 50; // will only process code within delay(function() { ... }) every 100ms. $(window).resize(function() { delay(function() { var gallery_images = $('#slide-7 img');
var images_per_row = 0; if ( gallery_images.length % 2 == 0 ) { images_per_row = gallery_images.length / 2; } else { images_per_row = gallery_images.length / 2 + 1; }
var gallery_width = $('#slide-7 img').width() * $('#slide-7 img').length; gallery_width /= 2; if ( $('#slide-7 img').length % 2 != 0 ) { gallery_width += $('#slide-7 img').width(); }
$('#slide-7 .row').css('width', gallery_width );
var left_pos = $('#slide-7 .row').width() - $('body').width(); left_pos /= -2;
$('#slide-7 .row').css('left', left_pos);
}, pause ); }); $(window).resize(); });
var delay = (function(){ var timer = 0; return function(callback, ms){ clearTimeout (timer); timer = setTimeout(callback, ms); }; })();
function menu_focus( element, i ) { if ( $(element).hasClass('active') ) { if ( i == 6 ) { if ( $('.navbar').hasClass('inv') == false ) return; } else { return; } }
enable_arrows( i );
if ( i == 1 || i == 9 ) $('.navbar').removeClass('inv'); else $('.navbar').addClass('inv');
$('.nav > li').removeClass('active'); $(element).addClass('active');
var icon = $(element).find('.icon');
var left_pos = icon.offset().left - $('.nav').offset().left; var el_width = icon.width() + $(element).find('.text').width() + 10;
$('.active-menu').stop(false, false).animate( { left: left_pos, width: el_width }, 1500, 'easeInOutQuart' ); }
function enable_arrows( dataslide ) { $('#arrows div').addClass('disabled'); if ( dataslide != 1 ) { $('#arrow-up').removeClass('disabled'); } if ( dataslide != 9 ) { $('#arrow-down').removeClass('disabled'); } if ( dataslide == 7 ) { $('#arrow-left').removeClass('disabled'); $('#arrow-right').removeClass('disabled'); } }
/*************
- = Parallax *
- /
jQuery(document).ready(function ($) { //Cache some variables var links = $('.nav').find('li'); slide = $('.slide'); button = $('.button'); mywindow = $(window); htmlbody = $('html,body');
//Create a function that will be passed a slide number and then will scroll to that slide using jquerys animate. The Jquery //easing plugin is also used, so we passed in the easing method of 'easeInOutQuint' which is available throught the plugin. function goToByScroll(dataslide) { var offset_top = ( dataslide == 1 ) ? '0px' : $('.slide[data-slide="' + dataslide + '"]').offset().top;
htmlbody.stop(false, false).animate({ scrollTop: offset_top }, 1500, 'easeInOutQuart'); }
//When the user clicks on the navigation links, get the data-slide attribute value of the link and pass that variable to the goToByScroll function links.click(function (e) { e.preventDefault(); dataslide = $(this).attr('data-slide'); goToByScroll(dataslide); $(".nav-collapse").collapse('hide'); });
//When the user clicks on the navigation links, get the data-slide attribute value of the link and pass that variable to the goToByScroll function $('.navigation-slide').click(function (e) { e.preventDefault(); dataslide = $(this).attr('data-slide'); goToByScroll(dataslide); $(".nav-collapse").collapse('hide'); }); });
/***************
- = Menu hover *
- /
jQuery(document).ready(function ($) { //Cache some variables var menu_item = $('.nav').find('li');
menu_item.hover( function(e) { var icon = $(this).find('.icon');
var left_pos = icon.offset().left - $('.nav').offset().left; var el_width = icon.width() + $(this).find('.text').width() + 10;
var hover_bar = $('').css('left', left_pos) .css('width', el_width) .attr('id', 'special-active-menu-' + $(this).data('slide') );
$('.active-menu').after( hover_bar ); }, function(e) { $('.special-active-menu').remove(); } ); });
/******************
- = Gallery hover *
- /
jQuery(document).ready(function ($) { //Cache some variables var images = $('#slide-7 a');
images.hover( function(e) { var asta = $(this).find('img'); $('#slide-7 img').not( asta ).stop(false, false).animate( { opacity: .5 }, 'fast', 'linear' );
var zoom = $('');if ( $(this).hasClass('video') ) { zoom.addClass('video'); } $(this).prepend(zoom); }, function(e) { $('#slide-7 img').stop(false, false).animate( { opacity: 1 }, 'fast', 'linear' ); $('.zoom').remove(); } ); });
/******************
- = Arrows click *
- /
jQuery(document).ready(function ($) { //Cache some variables var arrows = $('#arrows div');
arrows.click(function(e) { e.preventDefault();
if ( $(this).hasClass('disabled') ) return;
var slide = null; var datasheet = $('.nav > li.active').data('slide'); var offset_top = false; var offset_left = false;
switch( $(this).attr('id') ) {
case 'arrow-up':
offset_top = ( datasheet - 1 == 1 ) ? '0px' : $('.slide[data-slide="' + (datasheet-1) + '"]').offset().top;
break;
case 'arrow-down':
offset_top = $('.slide[data-slide="' + (datasheet+1) + '"]').offset().top;
break;
case 'arrow-left':
offset_left = $('#slide-7 .row').offset().left + 452;
if ( offset_left > 0 ) {
offset_left = '0px';
}
break;
case 'arrow-right':
offset_left = $('#slide-7 .row').offset().left - 452;
if ( offset_left < $('body').width() - $('#slide-7 .row').width() ) {
offset_left = $('body').width() - $('#slide-7 .row').width();
}
break;
}
if ( offset_top != false ) { htmlbody.stop(false, false).animate({ scrollTop: offset_top }, 1500, 'easeInOutQuart'); }
if ( offset_left != false ) { if ( $('#slide-7 .row').width() != $('body').width() ) { $('#slide-7 .row').stop(false, false).animate({ left: offset_left }, 1500, 'easeInOutQuart'); } } }); });