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

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