Difference between revisions of "Team:XJTLU-CHINA/js/main"

Line 1: Line 1:
−
/* ========================================================================= */
+
// jQuery to collapse the navbar on scroll
−
/* Preloader
+
function collapseNavbar() {
−
/* ========================================================================= */
+
    if ($(".navbar").offset().top > 50) {
 +
        $(".navbar-fixed-top").addClass("top-nav-collapse");
 +
    } else {
 +
        $(".navbar-fixed-top").removeClass("top-nav-collapse");
 +
    }
 +
}
  
−
jQuery(window).load(function(){
+
$(window).scroll(collapseNavbar);
−
 
+
$(document).ready(collapseNavbar);
−
$("#preloader").fadeOut("slow");
+
−
 
+
−
});
+
−
 
+
−
/* ========================================================================= */
+
−
/*  Welcome Section Slider
+
−
/* ========================================================================= */
+
  
 +
// jQuery for page scrolling feature - requires jQuery Easing plugin
 
$(function() {
 
$(function() {
−
 
+
     $('a.page-scroll').bind('click', function(event) {
−
     var Page = (function() {
+
        var $anchor = $(this);
−
 
+
        $('html, body').stop().animate({
−
        var $navArrows = $( '#nav-arrows' ),
+
             scrollTop: $($anchor.attr('href')).offset().top
−
            $nav = $( '#nav-dots > span' ),
+
        }, 1500, 'easeInOutExpo');
−
            slitslider = $( '#slider' ).slitslider( {
+
         event.preventDefault();
−
                onBeforeChange : function( slide, pos ) {
+
−
 
+
−
                    $nav.removeClass( 'nav-dot-current' );
+
−
                    $nav.eq( pos ).addClass( 'nav-dot-current' );
+
−
 
+
−
                }
+
−
            } ),
+
−
 
+
−
            init = function() {
+
−
 
+
−
                initEvents();
+
−
               
+
−
            },
+
−
            initEvents = function() {
+
−
 
+
−
                // add navigation events
+
−
                $navArrows.children( ':last' ).on( 'click', function() {
+
−
 
+
−
                    slitslider.next();
+
−
                    return false;
+
−
 
+
−
                } );
+
−
 
+
−
                $navArrows.children( ':first' ).on( 'click', function() {
+
−
                   
+
−
                    slitslider.previous();
+
−
                    return false;
+
−
 
+
−
                } );
+
−
 
+
−
                $nav.each( function( i ) {
+
−
               
+
−
                    $( this ).on( 'click', function( event ) {
+
−
                       
+
−
                        var $dot = $( this );
+
−
                       
+
−
                        if( !slitslider.isActive() ) {
+
−
 
+
−
                            $nav.removeClass( 'nav-dot-current' );
+
−
                            $dot.addClass( 'nav-dot-current' );
+
−
                       
+
−
                        }
+
−
                       
+
−
                        slitslider.jump( i + 1 );
+
−
                        return false;
+
−
                   
+
−
                    } );
+
−
                   
+
−
                } );
+
−
 
+
−
             };
+
−
 
+
−
            return { init : init };
+
−
 
+
−
    })();
+
−
 
+
−
    Page.init();
+
−
 
+
−
});
+
−
 
+
−
 
+
−
 
+
−
$(document).ready(function(){
+
−
 
+
−
/* ========================================================================= */
+
−
/* Menu item highlighting
+
−
/* ========================================================================= */
+
−
 
+
−
jQuery('#nav').singlePageNav({
+
−
offset: jQuery('#nav').outerHeight(),
+
−
filter: ':not(.external)',
+
−
speed: 2000,
+
−
currentClass: 'current',
+
−
easing: 'easeInOutExpo',
+
−
updateHash: true,
+
−
beforeStart: function() {
+
−
console.log('begin scrolling');
+
−
},
+
−
onComplete: function() {
+
−
console.log('done scrolling');
+
−
}
+
−
});
+
−
+
−
    $(window).scroll(function () {
+
−
         if ($(window).scrollTop() > 400) {
+
−
            $(".navbar-brand a").css("color","#fff");
+
−
            $("#navigation").removeClass("animated-header");
+
−
        } else {
+
−
            $(".navbar-brand a").css("color","inherit");
+
−
            $("#navigation").addClass("animated-header");
+
−
        }
+
 
     });
 
     });
−
 
−
/* ========================================================================= */
 
−
/* Fix Slider Height
 
−
/* ========================================================================= */
 
−
 
−
    // Slider Height
 
−
    var slideHeight = $(window).height();
 
−
   
 
−
    $('#home-slider, #slider, .sl-slider, .sl-content-wrapper').css('height',slideHeight);
 
−
 
−
    $(window).resize(function(){'use strict',
 
−
        $('#home-slider, #slider, .sl-slider, .sl-content-wrapper').css('height',slideHeight);
 
−
    });
 
−
 
−
 
−
 
−
$("#testimonial").owlCarousel({
 
−
navigation : true,
 
−
pagination : false,
 
−
slideSpeed : 700,
 
−
paginationSpeed : 400,
 
−
singleItem:true,
 
−
navigationText: ["<i class='fa fa-angle-left fa-lg'></i>","<i class='fa fa-angle-right fa-lg'></i>"]
 
−
});
 
−
 
−
 
−
/* ========================================================================= */
 
−
/* Featured Project Lightbox
 
−
/* ========================================================================= */
 
−
 
−
$(".fancybox").fancybox({
 
−
padding: 0,
 
−
 
−
openEffect : 'elastic',
 
−
openSpeed  : 650,
 
−
 
−
closeEffect : 'elastic',
 
−
closeSpeed  : 550,
 
−
 
−
closeClick : true,
 
−
 
−
beforeShow: function () {
 
−
this.title = $(this.element).attr('title');
 
−
this.title = '<h3>' + this.title + '</h3>' + '<p>' + $(this.element).parents('.portfolio-item').find('img').attr('alt') + '</p>';
 
−
},
 
−
 
−
helpers : {
 
−
title : {
 
−
type: 'inside'
 
−
},
 
−
overlay : {
 
−
css : {
 
−
'background' : 'rgba(0,0,0,0.8)'
 
−
}
 
−
}
 
−
}
 
−
});
 
−
 
 
});
 
});
  
−
 
+
// Closes the Responsive Menu on Menu Item Click
−
/* ==========  START GOOGLE MAP ========== */
+
$('.navbar-collapse ul li a').click(function() {
−
 
+
     $(this).closest('.collapse').collapse('toggle');
−
// When the window has finished loading create our google map below
+
−
google.maps.event.addDomListener(window, 'load', init);
+
−
 
+
−
function init() {
+
−
     // Basic options for a simple Google Map
+
−
    // For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
+
−
 
+
−
    var myLatLng = new google.maps.LatLng(22.402789, 91.822156);
+
−
 
+
−
    var mapOptions = {
+
−
        zoom: 15,
+
−
        center: myLatLng,
+
−
        disableDefaultUI: true,
+
−
        scrollwheel: false,
+
−
        navigationControl: true,
+
−
        mapTypeControl: false,
+
−
        scaleControl: false,
+
−
        draggable: true,
+
−
 
+
−
        // How you would like to style the map.  
+
−
        // This is where you would paste any style found on Snazzy Maps.
+
−
        styles: [{
+
−
            featureType: 'water',
+
−
            stylers: [{
+
−
                color: '#46bcec'
+
−
            }, {
+
−
                visibility: 'on'
+
−
            }]
+
−
        }, {
+
−
            featureType: 'landscape',
+
−
            stylers: [{
+
−
                color: '#f2f2f2'
+
−
            }]
+
−
        }, {
+
−
            featureType: 'road',
+
−
            stylers: [{
+
−
                saturation: -100
+
−
            }, {
+
−
                lightness: 45
+
−
            }]
+
−
        }, {
+
−
            featureType: 'road.highway',
+
−
            stylers: [{
+
−
                visibility: 'simplified'
+
−
            }]
+
−
        }, {
+
−
            featureType: 'road.arterial',
+
−
            elementType: 'labels.icon',
+
−
            stylers: [{
+
−
                visibility: 'off'
+
−
            }]
+
−
        }, {
+
−
            featureType: 'administrative',
+
−
            elementType: 'labels.text.fill',
+
−
            stylers: [{
+
−
                color: '#444444'
+
−
            }]
+
−
        }, {
+
−
            featureType: 'transit',
+
−
            stylers: [{
+
−
                visibility: 'off'
+
−
            }]
+
−
        }, {
+
−
            featureType: 'poi',
+
−
            stylers: [{
+
−
                visibility: 'off'
+
−
            }]
+
−
        }]
+
−
    };
+
−
 
+
−
    // Get the HTML DOM element that will contain your map
+
−
    // We are using a div with id="map" seen below in the <body>
+
−
    var mapElement = document.getElementById('map-canvas');
+
−
 
+
−
    // Create the Google Map using our element and options defined above
+
−
    var map = new google.maps.Map(mapElement, mapOptions);
+
−
 
+
−
    // Let's also add a marker while we're at it
+
−
    var marker = new google.maps.Marker({
+
−
        position: new google.maps.LatLng(22.402789, 91.822156),
+
−
        map: map,
+
−
icon: 'https://static.igem.org/mediawiki/2016/6/66/Map-marker.png',
+
−
    });
+
−
}
+
−
 
+
−
// ========== END GOOGLE MAP ========== //
+
−
 
+
−
var wow = new WOW ({
+
−
offset:      75,          // distance to the element when triggering the animation (default is 0)
+
−
mobile:      false,      // trigger animations on mobile devices (default is true)
+
 
});
 
});
−
wow.init();
 

Revision as of 06:35, 1 October 2016

// jQuery to collapse the navbar on scroll function collapseNavbar() { 

   if ($(".navbar").offset().top > 50) {
       $(".navbar-fixed-top").addClass("top-nav-collapse");
   } else {
       $(".navbar-fixed-top").removeClass("top-nav-collapse");
   }

}

$(window).scroll(collapseNavbar); $(document).ready(collapseNavbar);

// jQuery for page scrolling feature - requires jQuery Easing plugin $(function() { 

   $('a.page-scroll').bind('click', function(event) {
       var $anchor = $(this);
       $('html, body').stop().animate({
           scrollTop: $($anchor.attr('href')).offset().top
       }, 1500, 'easeInOutExpo');
       event.preventDefault();
   });

});

// Closes the Responsive Menu on Menu Item Click $('.navbar-collapse ul li a').click(function() { 

   $(this).closest('.collapse').collapse('toggle');

});