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 14KB

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