https://durban.gov.za/assets/js/main.js

1(function($) {
2  "use strict";
3
4  /*--------------------------
5  loader
6  ---------------------------- */
7  $(window).on('load', function() {
8    var pre_loader = $('#preloader');
9    pre_loader.fadeOut('slow', function() {
10      $(this).remove();
11    });
12  });
13
14  // Toggle .header-scrolled class to #header when page is scrolled
15  $(window).scroll(function() {
16    if ($(this).scrollTop() > 100) {
17      $('#header').addClass('header-scrolled');
18    } else {
19      $('#header').removeClass('header-scrolled');
20    }
21  });
22
23  if ($(window).scrollTop() > 100) {
24    $('#header').addClass('header-scrolled');
25  }
26
27  // Smooth scroll for the navigation menu and links with .scrollto classes
28  var scrolltoOffset = $('#header').outerHeight() - 21;
29  if (window.matchMedia("(max-width: 991px)").matches) {
30    scrolltoOffset += 20;
31  }
32  $(document).on('click', '.nav-menu a, .mobile-nav a, .scrollto', function(e) {
33    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
34      var target = $(this.hash);
35      if (target.length) {
36        e.preventDefault();
37
38        var scrollto = target.offset().top - scrolltoOffset;
39
40        if ($(this).attr("href") == '#header') {
41          scrollto = 0;
42        }
43
44        $('html, body').animate({
45          scrollTop: scrollto
46        }, 1500, 'easeInOutExpo');
47
48        if ($(this).parents('.nav-menu, .mobile-nav').length) {
49          $('.nav-menu .active, .mobile-nav .active').removeClass('active');
50          $(this).closest('li').addClass('active');
51        }
52
53        if ($('body').hasClass('mobile-nav-active')) {
54          $('body').removeClass('mobile-nav-active');
55          $('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
56          $('.mobile-nav-overly').fadeOut();
57        }
58        return false;
59      }
60    }
61  });
62
63  // Mobile Navigation
64  if ($('.nav-menu').length) {
65    var $mobile_nav = $('.nav-menu').clone().prop({
66      class: 'mobile-nav d-lg-none'
67    });
68    $('body').append($mobile_nav);
69    $('body').prepend('<button type="button" class="mobile-nav-toggle d-lg-none"><i class="icofont-navigation-menu"></i></button>');
70    $('body').append('<div class="mobile-nav-overly"></div>');
71
72    $(document).on('click', '.mobile-nav-toggle', function(e) {
73      $('body').toggleClass('mobile-nav-active');
74      $('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
75      $('.mobile-nav-overly').toggle();
76    });
77
78    $(document).on('click', '.mobile-nav .drop-down > a', function(e) {
79      // e.preventDefault();
80      $(this).next().slideToggle(300);
81      $(this).parent().toggleClass('active');
82    });
83
84    $(document).click(function(e) {
85      var container = $(".mobile-nav, .mobile-nav-toggle");
86      if (!container.is(e.target) && container.has(e.target).length === 0) {
87        if ($('body').hasClass('mobile-nav-active')) {
88          $('body').removeClass('mobile-nav-active');
89          $('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
90          $('.mobile-nav-overly').fadeOut();
91        }
92      }
93    });
94  } else if ($(".mobile-nav, .mobile-nav-toggle").length) {
95    $(".mobile-nav, .mobile-nav-toggle").hide();
96  }
97
98  // Activate smooth scroll on page load with hash links in the url
99  // $(document).ready(function() {
100  //   if (window.location.hash) {
101  //     var initial_nav = window.location.hash;
102  //     if ($(initial_nav).length) {
103  //       var scrollto = $(initial_nav).offset().top - scrolltoOffset;
104  //       $('html, body').animate({
105  //         scrollTop: scrollto
106  //       }, 1500, 'easeInOutExpo');
107  //     }
108  //   }
109  // });
110
111  /*----------------------------
112   wow js active
113  ------------------------------ */
114  new WOW().init();
115
116  //---------------------------------------------
117  //Nivo slider
118  //---------------------------------------------
119  $('#ensign-nivoslider').nivoSlider({
120    effect: 'random',
121    slices: 15,
122    boxCols: 12,
123    boxRows: 8,
124    animSpeed: 500,
125    pauseTime: 5000,
126    startSlide: 0,
127    directionNav: true,
128    controlNavThumbs: false,
129    pauseOnHover: true,
130    manualAdvance: false,
131  });
132
133  /*----------------------------
134   Scrollspy js
135  ------------------------------ */
136  var Body = $('body');
137  Body.scrollspy({
138    target: '.navbar-collapse',
139    offset: 80
140  });
141
142  /*---------------------
143    Venobox
144  --------------------- */
145  var veno_box = $('.venobox');
146  veno_box.venobox();
147
148  /*----------------------------
149  Page Scroll
150  ------------------------------ */
151  var page_scroll = $('a.page-scroll');
152  page_scroll.on('click', function(event) {
153    var $anchor = $(this);
154    $('html, body').stop().animate({
155      scrollTop: $($anchor.attr('href')).offset().top - 55
156    }, 1500, 'easeInOutExpo');
157    event.preventDefault();
158  });
159
160  /*--------------------------
161    Back to top button
162  ---------------------------- */
163  $(window).scroll(function() {
164    if ($(this).scrollTop() > 100) {
165      $('.back-to-top').fadeIn('slow');
166    } else {
167      $('.back-to-top').fadeOut('slow');
168    }
169  });
170
171  $('.back-to-top').click(function() {
172    $('html, body').animate({
173      scrollTop: 0
174    }, 1500, 'easeInOutExpo');
175    return false;

176  });
177
178  /*----------------------------
179   Parallax
180  ------------------------------ */
181  var well_lax = $('.wellcome-area');
182  well_lax.parallax("50%", 0.4);
183  var well_text = $('.wellcome-text');
184  well_text.parallax("50%", 0.6);
185
186  /*--------------------------
187   collapse
188  ---------------------------- */
189  var panel_test = $('.panel-heading a');
190  panel_test.on('click', function() {
191    panel_test.removeClass('active');
192    $(this).addClass('active');
193  });
194
195  /*---------------------
196   Testimonial carousel
197  ---------------------*/
198  $(".testimonial-carousel").owlCarousel({
199    autoplay: true,
200    dots: true,
201    loop: true,
202    responsive: {
203      0: {
204        items: 1
205      },
206      768: {
207        items: 1
208      },
209      900: {
210        items: 1
211      }
212    }
213  });
214  /*----------------------------
215   isotope active
216  ------------------------------ */
217  // portfolio start
218  $(window).on("load", function() {
219    var $container = $('.awesome-project-content');
220    $container.isotope({
221      filter: '*',
222      animationOptions: {
223        duration: 750,
224        easing: 'linear',
225        queue: false
226      }
227    });
228    var pro_menu = $('.project-menu li a');
229    pro_menu.on("click", function() {
230      var pro_menu_active = $('.project-menu li a.active');
231      pro_menu_active.removeClass('active');
232      $(this).addClass('active');
233      var selector = $(this).attr('data-filter');
234      $container.isotope({
235        filter: selector,
236        animationOptions: {
237          duration: 750,
238          easing: 'linear',
239          queue: false
240        }
241      });
242      return false;
243    });
244
245  });
246  //portfolio end
247
248  /*---------------------
249   Circular Bars - Knob
250--------------------- */
251  if (typeof($.fn.knob) != 'undefined') {
252    var knob_tex = $('.knob');
253    knob_tex.each(function() {
254      var $this = $(this),
255        knobVal = $this.attr('data-rel');
256
257      $this.knob({
258        'draw': function() {
259          $(this.i).val(this.cv + '%')
260        }
261      });
262
263      $this.appear(function() {
264        $({
265          value: 0
266        }).animate({
267          value: knobVal
268        }, {
269          duration: 2000,
270          easing: 'swing',
271          step: function() {
272            $this.val(Math.ceil(this.value)).trigger('change');
273          }
274        });
275      }, {
276        accX: 0,
277        accY: -150
278      });
279    });
280  }
281
282})(jQuery);