Diligent web site
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

custom.js 13KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383
  1. "use strict";
  2. function isOnScreen(elem) {
  3. // if the element doesn't exist, abort
  4. if( elem.length == 0 ) {
  5. return;
  6. }
  7. var $window = jQuery(window)
  8. var viewport_top = $window.scrollTop()
  9. var viewport_height = $window.height()
  10. var viewport_bottom = viewport_top + viewport_height
  11. var $elem = jQuery(elem)
  12. var top = $elem.offset().top
  13. var height = $elem.height()
  14. var bottom = top + height
  15. return (top >= viewport_top && top < viewport_bottom) ||
  16. (bottom > viewport_top && bottom <= viewport_bottom) ||
  17. (height > viewport_height && top <= viewport_top && bottom >= viewport_bottom)
  18. }
  19. // start custom scripts
  20. (function($) {
  21. jQuery(document).ready(function($){
  22. /*========== Swicher ==========*/
  23. /*========== Progress bar ==========*/
  24. function animate() {
  25. $(".progress-bar").each(function(){
  26. var progressValue = $(this).attr('data-value');
  27. $(this).animate({width: progressValue +'%'}, 6000);
  28. });
  29. }
  30. //contact form
  31. var form = document.getElementById("contact-form");
  32. var button = $("#contact-form #submit");
  33. var status = $(".log");
  34. function success(){
  35. //form.reset();
  36. button.style = "display: none ";
  37. status.addClass("successfully").text("Thanks!");
  38. }
  39. function error() {
  40. status.addClass("error").text("Oops! There was a problem.");
  41. }
  42. button.on("submit", function(ev) {
  43. ev.preventDefault();
  44. button.style = "display: none ";
  45. var data = new FormData(form);
  46. ajax(form.method, form.action, data, success, error);
  47. });
  48. function ajax(method, url, data, success, error) {
  49. var xhr = new XMLHttpRequest();
  50. xhr.open(method, url);
  51. xhr.setRequestHeader("Accept", "application/json");
  52. xhr.onreadystatechange = function() {
  53. if (xhr.readyState !== XMLHttpRequest.DONE) return;
  54. if (xhr.status === 200) {
  55. success();
  56. } else {
  57. error();
  58. }
  59. };
  60. xhr.send(data);
  61. }
  62. //end contact form
  63. $('#contact-wrap').waypoint(function() {
  64. animate();
  65. });
  66. //nikola
  67. $('.clear_storage').on('click', function(e){
  68. window.localStorage.clear();
  69. });
  70. var get_id = localStorage.getItem('pg_id');
  71. // check page id, then scroll to its div
  72. if(get_id)
  73. scrollToID(null, get_id, 300);
  74. // click event to scroll to div
  75. //section link in nav which refer to section on homepage
  76. $('.home_link').on('click', function(e){
  77. e.preventDefault();
  78. var id = '#'+$(this).data('id');
  79. localStorage.setItem('pg_id', id);
  80. var url = $(this).attr("href");
  81. scrollToID(url, id, 300);
  82. });
  83. //Link from our partners section on homepage which refer to section on portfolio page
  84. $('.partners_link').on('click', function(e){
  85. e.preventDefault();
  86. var id = '#'+$(this).data('id');
  87. localStorage.setItem('pg_id', id);
  88. var url = $(this).attr("href");
  89. scrollToID(url, id, 300);
  90. });
  91. function scrollToID(url, id, speed) {
  92. if(url!==null)
  93. {
  94. window.location.href = url;
  95. }
  96. var offSet = 50;
  97. var obj = $(id).offset();
  98. var targetOffset = $(id).offset().top - offSet;
  99. $('html,body').animate({ scrollTop: targetOffset }, speed);
  100. }
  101. window.addEventListener('scroll', function(e) {
  102. var loc = window.location;
  103. if(loc.pathname.substring(loc.pathname.lastIndexOf('/') + 1, loc.pathname.length)=='index.html')
  104. {
  105. if( isOnScreen( $( '#intro-wrap' ) ) ) { /* Pass element id/class you want to check */
  106. $("nav li.active").removeClass("active").find('.nav-active-mark').remove();
  107. $("nav li.intro-wrap").addClass("active").append('<span class="nav-active-mark"></span>');
  108. }
  109. if( isOnScreen( $( '#about-wrap' ) ) ) { /* Pass element id/class you want to check */
  110. $("nav li.active").removeClass("active").find('.nav-active-mark').remove();
  111. $("nav li.about-wrap").addClass("active").append('<span class="nav-active-mark"></span>');
  112. }
  113. if( isOnScreen( $( '#our_partners-wrap' ) ) ) { /* Pass element id/class you want to check */
  114. $("nav li.active").removeClass("active").find('.nav-active-mark').remove();
  115. $("nav li.our_partners-wrap").addClass("active").append('<span class="nav-active-mark"></span>');
  116. }
  117. if( isOnScreen( $( '#services-wrap' ) ) ) { /* Pass element id/class you want to check */
  118. $("nav li.active").removeClass("active").find('.nav-active-mark').remove();
  119. $("nav li.services-wrap").addClass("active").append('<span class="nav-active-mark"></span>');
  120. }
  121. if( isOnScreen( $( '#contact-wrap' ) ) ) { /* Pass element id/class you want to check */
  122. $("nav li.active").removeClass("active").find('.nav-active-mark').remove();
  123. $("nav li.contact-wrap").addClass("active").append('<span class="nav-active-mark"></span>');
  124. }
  125. }
  126. });
  127. //nikola
  128. /*========== Disables ==========*/
  129. if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
  130. $('#animate_css_file, #wow_js_file').remove();
  131. } else {
  132. /*========== WOW Animations ==========*/
  133. var wow = new WOW(
  134. {
  135. animateClass: 'animated',
  136. offset: 100
  137. }
  138. );
  139. wow.init();
  140. }
  141. /*========== Logo Retina ==========*/
  142. if( window.devicePixelRatio > 1 ) {
  143. var logoWidth = $('#logo img').width();
  144. var logoHeight = $('#logo img').height();
  145. $('#logo img').attr("src", "images/logo@2x.png");
  146. $('#logo img').css({ 'width': logoWidth , 'height': logoHeight });
  147. }
  148. /*========== Team Item Hover ==========*/
  149. $('.team-item').each(function(){
  150. var memberImage = $(this).find('.member-face').attr('style');
  151. var current = $(this).find('.change-color');
  152. $(this).find('.hex-in2.outer-hex').first().hover(function(){
  153. $(this).find('.member-face').css('background','#000');
  154. $(current).css('background-color','#f3b202');
  155. $(this).find('.socials').show();
  156. },function(){
  157. $(this).find('.socials').hide();
  158. $(this).find('.member-face').attr('style', memberImage);
  159. $(current).css('background-color','#000');
  160. });
  161. });
  162. /*========== Gallery Item Hover ==========*/
  163. $('.gallery-item').hover(function(){
  164. $(this).find('.gallery-info').stop(true,true).animate({ "top": "0" } );
  165. },function(){
  166. $(this).find('.gallery-info').stop(true,true).animate({ "top": "-999" } );
  167. });
  168. /*========== FlexSlider ==========*/
  169. $('.flexslider').flexslider({
  170. animation: "fade",
  171. animationLoop: false,
  172. directionNav: false,
  173. slideshow: false
  174. });
  175. /*========== Pie Chart ==========*/
  176. $('.days').waypoint(function() {
  177. $('.chart').easyPieChart({
  178. easing: 'easeOutBounce',
  179. barColor: '#f3b202',
  180. trackColor: '#595959',
  181. lineWidth: '18',
  182. lineCap: 'butt',
  183. size: '160',
  184. scaleColor: false,
  185. onStep: function(from, to, percent) {
  186. $(this.el).find('.percent').text(Math.round(percent));
  187. }
  188. });
  189. });
  190. /*========== Smooth Scroll ==========*/
  191. $('a[href*=#]:not([href=#])').click(function() {
  192. $("li.active").removeClass("active").find('.nav-active-mark').remove();
  193. $(this).parent().addClass('active').end().append('<span class="nav-active-mark"></span>');
  194. if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
  195. var target = $(this.hash);
  196. target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
  197. if (target.length) {
  198. $('html,body').animate({
  199. scrollTop: target.offset().top - 53
  200. }, 1000);
  201. return false;
  202. }
  203. }
  204. });
  205. /*========== Graph Bars Animate ==========*/
  206. $('.days').waypoint(function() {
  207. $('.graph ul li.bar').each(function() {
  208. var curBarHeight = $(this).data('bar-height');
  209. $(this).animate({ height: curBarHeight }, 2000, "easeInOutBack");
  210. });
  211. });
  212. /*========== Intro Note Box Tooltip ==========*/
  213. /*$('.note-1').hover(function(){
  214. $(this).find('.note-tooltip').fadeIn();
  215. },function(){
  216. $(this).find('.note-tooltip').fadeOut();
  217. });
  218. */
  219. /*========== PrettyPhoto ==========*/
  220. $("a[data-rel^='prettyPhoto']").prettyPhoto({theme:'dark_rounded', hook: 'data-rel'});
  221. /*========== Flickr ==========*/
  222. var flickrImageSrc = [ ];
  223. var flickrLink = [ ];
  224. $('.flickr_badge_image').each(function(i){
  225. flickrImageSrc[i] = $(this).find('img').attr('src');
  226. flickrLink[i] = $(this).find('a').attr('href');
  227. });
  228. $('.flickr-item').each(function(i){
  229. $(this).find('.hex-area').css('background-image', 'url(' + flickrImageSrc[i] + ')');
  230. $(this).find('.flickr-link').attr('href', flickrLink[i] );
  231. });
  232. /*========== Window Resize ==========*/
  233. var windowWidth = $(window).width();
  234. var numberOfHexagon = windowWidth / 106;
  235. var offsetBackground = ((numberOfHexagon - 14) * 106 ) /2;
  236. $('#hexagon-overlay').css('background-position', offsetBackground + 'px' + ' ' + 'top');
  237. $(window).resize(function() {
  238. var currentWindowWidth = $(window).width();
  239. if(currentWindowWidth <= 940) return;
  240. $('#hexagon-overlay').css('background-position', - ( ( (windowWidth - currentWindowWidth)/2 ) - offsetBackground ) + 'px' + ' ' + 'top');
  241. });
  242. /*========== Mobile Menu ==========*/
  243. $('.mobile-nav-toggle').on('click',function(){
  244. if($(this).attr('class') == 'mobile-nav-toggle deactive') {
  245. $('#mobile-navigation').fadeIn();
  246. $(this).removeClass('deactive');
  247. } else {
  248. $('#mobile-navigation').fadeOut();
  249. $(this).addClass('deactive');
  250. }
  251. });
  252. $("#mobile-navigation li a").on("click", function(){
  253. $('#mobile-navigation').fadeOut();
  254. $(".mobile-nav-toggle").addClass('deactive');
  255. });
  256. $(window).resize(function(){
  257. var w = $(window).width();
  258. if(w > 767) {
  259. $('#mobile-navigation').fadeOut();
  260. $(".mobile-nav-toggle").addClass('deactive');
  261. }
  262. });
  263. /*========== Contact Form Validation ==========*/
  264. function isValidEmailAddress(emailAddress) {
  265. var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
  266. return pattern.test(emailAddress);
  267. }
  268. $('.contact-form form').submit(function() {
  269. var hasError = false;
  270. var comment = $('#message-txt').val();
  271. if ($.trim(comment) == '') {
  272. $('#message-txt').addClass('error');
  273. $('#message-txt').focus();
  274. hasError = true;
  275. }
  276. else {
  277. $('#message-txt').removeClass('error');
  278. }
  279. var subject = $('#subject-txt').val();
  280. if ($.trim(subject) == '') {
  281. $('#subject-txt').addClass('error');
  282. $('#subject-txt').focus();
  283. hasError = true;
  284. }
  285. else {
  286. $('#subject-txt').removeClass('error');
  287. }
  288. var emailVal = $('#email-txt').val();
  289. if ($.trim(emailVal) == '' || !isValidEmailAddress(emailVal)) {
  290. $('#email-txt').addClass('error');
  291. $('#email-txt').focus();
  292. hasError = true;
  293. }
  294. else {
  295. $('#email-txt').removeClass('error');
  296. }
  297. var name = $('#name-txt').val();
  298. if ($.trim(name) == '') {
  299. $('#name-txt').addClass('error');
  300. $('#name-txt').focus();
  301. hasError = true;
  302. }
  303. else {
  304. $('#name-txt').removeClass('error');
  305. }
  306. if (!hasError) {
  307. $('#submit').fadeOut('normal', function(){
  308. $('.loading').css({
  309. display: "block"
  310. });
  311. });
  312. $.post($('.contact-form form').attr('action'), $('.contact-form form').serialize(), function(data){
  313. $('.log').html(data);
  314. $('.loading').remove();
  315. $('.contact-form form').slideUp('slow');
  316. });
  317. }
  318. return false;
  319. });
  320. }); // end jquery init
  321. })(jQuery);