https://tisb.org/assets/js/main.js

1/*=====================================================
2Template Name   : Eduka
3Description     : School, College, University And Courses HTML5 Template
4Author          : LunarTemp
5Version         : 1.0
6=======================================================*/
7
8(function ($) {
9  "use strict";
10
11  // multi level dropdown menu
12  $(".dropdown-menu a.dropdown-toggle").on("click", function (e) {
13    if (!$(this).next().hasClass("show")) {
14      $(this)
15        .parents(".dropdown-menu")
16        .first()
17        .find(".show")
18        .removeClass("show");
19    }
20    var $subMenu = $(this).next(".dropdown-menu");
21    $subMenu.toggleClass("show");
22
23    $(this)
24      .parents("li.nav-item.dropdown.show")
25      .on("hidden.bs.dropdown", function (e) {
26        $(".dropdown-submenu .show").removeClass("show");
27      });
28    return false;
29  });
30
31  // data-background
32  $(document).on("ready", function () {
33    $("[data-background]").each(function () {
34      $(this).css(
35        "background-image",
36        "url(" + $(this).attr("data-background") + ")"
37      );
38    });
39  });
40
41  // navbar Search
42  if ($(".search-box-outer").length) {
43    $(".search-box-outer").on("click", function () {
44      $("body").addClass("search-active");
45    });
46    $(".close-search").on("click", function () {
47      $("body").removeClass("search-active");
48    });
49  }
50
51  // wow init
52  new WOW().init();
53
54  // hero slider
55  $(".hero-slider").owlCarousel({
56    loop: true,
57    nav: true,
58    dots: false,
59    margin: 0,
60    autoplay: true,
61    autoplayHoverPause: true,
62    autoplayTimeout: 5000,
63    items: 1,
64    navText: [
65      "<i class='far fa-long-arrow-left'></i>",
66      "<i class='far fa-long-arrow-right'></i>",
67    ],
68
69    onInitialized: function (event) {
70      var $firstAnimatingElements = $(".owl-item")
71        .eq(event.item.index)
72        .find("[data-animation]");
73      doAnimations($firstAnimatingElements);
74    },
75
76    onChanged: function (event) {
77      var $firstAnimatingElements = $(".owl-item")
78        .eq(event.item.index)
79        .find("[data-animation]");
80      doAnimations($firstAnimatingElements);
81    },
82  });
83
84  //hero slider do animations
85  function doAnimations(elements) {
86    var animationEndEvents =
87      "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend";
88    elements.each(function () {
89      var $this = $(this);
90      var $animationDelay = $this.data("delay");
91      var $animationDuration = $this.data("duration");
92      var $animationType = "animated " + $this.data("animation");
93      $this.css({
94        "animation-delay": $animationDelay,
95        "-webkit-animation-delay": $animationDelay,
96        "animation-duration": $animationDuration,
97        "-webkit-animation-duration": $animationDuration,
98      });
99      $this.addClass($animationType).one(animationEndEvents, function () {
100        $this.removeClass($animationType);
101      });
102    });
103  }
104
105  // testimonial-slider
106
107  $(document).ready(function () {
108    let started = false;
109    let timer = null;
110    const $section = $("#testimonial-area");
111
112    if ($section.length === 0) return; // no element -> no error
113
114    $(window).on("scroll", function () {
115      const sectionTop = $section.offset().top;
116      const scrollTop = $(this).scrollTop();
117      const windowHeight = $(window).height();
118
119      if (!started && scrollTop + windowHeight >= sectionTop) {
120        if (!timer) {
121          // Wait **3 seconds** after the section becomes visible
122          timer = setTimeout(function () {
123            $(".testimonial-slider").owlCarousel({
124              loop: true,
125              margin: 10,
126              nav: false,
127              dots: true,
128              autoplay: true,
129              responsive: {
130                0: { items: 1 },
131                600: { items: 2 },
132                1000: { items: 4 },
133              },
134            });
135            started = true;
136          }, 3000); // ⏳ 3 second delay
137        }
138      }
139    });
140  });
141
142  // $(document).ready(function () {
143  //   let started = false;
144  //   let timer = null; // to prevent multiple timers
145
146  //   $(window).on("scroll", function () {
147  //     const sectionTop = $("#testimonial-area").offset().top;
148  //     const scrollTop = $(window).scrollTop();
149  //     const windowHeight = $(window).height();
150
151  //     if (!started && scrollTop + windowHeight >= sectionTop) {
152  //       if (!timer) {
153  //         // Wait **3 seconds** after the section becomes visible
154  //         timer = setTimeout(function () {
155  //           $(".testimonial-slider").owlCarousel({
156  //             loop: true,
157  //             margin: 10,
158  //             nav: false,
159  //             dots: true,
160  //             autoplay: true,
161  //             responsive: {
162  //               0: { items: 1 },
163  //               600: { items: 2 },
164  //               1000: { items: 4 },
165  //             },
166  //           });
167  //           started = true;
168  //         }, 3000); // ⏳ 3 second delay
169  //       }
170  //     }
171  //   });
172  // });
173
174  // event-slider
175  $(".event-slider").owlCarousel({
176    loop: true,
177    margin: 25,
178    nav: true,
179    dots: true,
180    autoplay: false,
181    navText: [
182      "<i class='far fa-angle-left'></i>",
183      "<i class='far fa-angle-right'></i>",
184    ],
185    responsive: {
186      0: {
187        items: 1,
188      },
189      600: {
190        items: 2,
191      },
192      1000: {
193        items: 3,
194      },
195    },
196  });
197
198  // department-slider
199  $(".department-slider").owlCarousel({
200    loop: true,
201    margin: 25,
202    nav: true,
203    dots: true,
204    autoplay: false,
205    navText: [
206      "<i class='far fa-angle-left'></i>",
207      "<i class='far fa-angle-right'></i>",
208    ],
209    responsive: {
210      0: {
211        items: 1,
212      },
213      600: {
214        items: 2,
215      },
216      1000: {
217        items: 2,
218      },
219    },
220  });
221
222  // partner-slider
223  $(".partner-slider").owlCarousel({
224    loop: true,
225    margin: 70,
226    nav: false,
227    dots: false,
228    autoplay: true,
229    autoplayTimeout: 1000,
230    responsive: {
231      0: {
232        items: 2,
233      },
234      600: {
235        items: 3,
236      },
237      1000: {
238        items: 6,
239      },
240    },
241  });
242
243  // preloader
244  //   $(window).on("load", function () {
245  //     $(".preloader").fadeOut(2000); // 5000ms = 5 seconds
246  // });
247
248  $(document).ready(function () {
249    // Hide the preloader after 2 seconds (no fade)
250    setTimeout(function () {
251      $(".preloader").hide();
252    }, 2000);
253  });
254
255  // fun fact counter
256  $(".counter").countTo();
257  $(".counter-box").appear(
258    function () {
259      $(".counter").countTo();
260    },
261    {

262      accY: -100,
263    }
264  );
265
266  // magnific popup init
267  $(".popup-gallery").magnificPopup({
268    delegate: ".popup-img",
269    type: "image",
270    gallery: {
271      enabled: true,
272    },
273  });
274
275  $(".popup-youtube, .popup-vimeo, .popup-gmaps").magnificPopup({
276    type: "iframe",
277    mainClass: "mfp-fade",
278    removalDelay: 160,
279    preloader: false,
280    fixedContentPos: false,
281    iframe: {
282      patterns: {
283        youtube: {
284          index: "youtube.com/",
285          id: "v=",
286          src: "https://www.youtube.com/embed/%id%?rel=0",
287        },
288      },
289    },
290  });
291
292  // scroll to top
293  $(window).on("scroll", function () {
294    if (
295      document.body.scrollTop > 100 ||
296      document.documentElement.scrollTop > 100
297    ) {
298      $("#scroll-top").addClass("active");
299    } else {
300      $("#scroll-top").removeClass("active");
301    }
302  });
303
304  $("#scroll-top").on("click", function () {
305    $("html, body").animate({ scrollTop: 0 }, 1500);
306    return false;
307  });
308
309  // navbar fixed top
310  $(window).on("scroll", function () {
311    if ($(this).scrollTop() > 50) {
312      $(".navbar").addClass("fixed-top");
313    } else {
314      $(".navbar").removeClass("fixed-top");
315    }
316  });
317
318  // project filter
319  $(window).on("load", function () {
320    if ($(".filter-box").children().length > 0) {
321      $(".filter-box").isotope({
322        itemSelector: ".filter-item",
323        masonry: {
324          columnWidth: 1,
325        },
326      });
327
328      $(".filter-btn").on("click", "li", function () {
329        var filterValue = $(this).attr("data-filter");
330        $(".filter-box").isotope({ filter: filterValue });
331      });
332
333      $(".filter-btn li").each(function () {
334        $(this).on("click", function () {
335          $(this).siblings("li.active").removeClass("active");
336          $(this).addClass("active");
337        });
338      });
339    }
340  });
341
342  // progress bar
343  $(document).ready(function () {
344    var progressBar = $(".progress");
345    if (progressBar.length) {
346      progressBar.each(function () {
347        var Self = $(this);
348        Self.appear(function () {
349          var progressValue = Self.data("value");
350          Self.find(".progress-bar").animate(
351            {
352              width: progressValue + "%",
353            },
354            1000
355          );
356        });
357      });
358    }
359  });
360
361  // countdown
362  if ($("#countdown").length) {
363    $("#countdown").countdown("2030/01/30", function (event) {
364      $(this).html(
365        event.strftime(
366          "" +
367            '<div class="row">' +
368            '<div class="col countdown-single">' +
369            '<h2 class="mb-0">%-D</h2>' +
370            '<h5 class="mb-0">Day%!d</h5>' +
371            "</div>" +
372            '<div class="col countdown-single">' +
373            '<h2 class="mb-0">%H</h2>' +
374            '<h5 class="mb-0">Hours</h5>' +
375            "</div>" +
376            '<div class="col countdown-single">' +
377            '<h2 class="mb-0">%M</h2>' +
378            '<h5 class="mb-0">Minutes</h5>' +
379            "</div>" +
380            '<div class="col countdown-single">' +
381            '<h2 class="mb-0">%S</h2>' +
382            '<h5 class="mb-0">Seconds</h5>' +
383            "</div>" +
384            "</div>"
385        )
386      );
387    });
388  }
389
390  //title
391  // $(function () {
392  //   const $breadcrumb = $(".custom-breadcrumb");
393  //   let $title;
394  //   if ($breadcrumb.length) {
395  //     $title = $breadcrumb.find(".site-title").first();
396  //     document.title =
397  //       $title.text().trim() + " | The International School Bangalore";
398  //   }
399  // });
400
401  // Accordin menu
402  document.addEventListener("DOMContentLoaded", function () {
403    let accordionItems = document.querySelectorAll(".accordion-collapse");
404
405    accordionItems.forEach((item) => {
406      item.addEventListener("shown.bs.collapse", function () {
407        let header = this.previousElementSibling; // accordion header
408
409        // Get position relative to the document
410        let topPos = header.getBoundingClientRect().top + window.scrollY;
411
412        // Scroll with 100px offset
413        window.scrollTo({
414          top: topPos - 100,
415          behavior: "smooth",
416        });
417      });
418    });
419  });
420
421  // copywrite date
422  let date = new Date().getFullYear();
423  $("#date").html(date);
424})(jQuery);
425
426const preloaderBox = document.querySelector(".preloader-box");
427
428if (preloaderBox) {
429  preloaderBox.style.setProperty("display", "none", "important");
430}
431
432// Select the .preloader element
433const preloader = document.querySelector(".preloader");
434
435if (preloader) {
436  // Create the loader div
437  const loaderDiv = document.createElement("div");
438  loaderDiv.className = "loader";
439
440  // Create the image element

441  const img = document.createElement("img");
442  img.src = "/assets/img/shape/03.png";
443  img.alt = "Logo";
444
445  // Append the image inside loader div
446  loaderDiv.appendChild(img);
447
448  // Append the loader div inside .preloader
449  preloader.appendChild(loaderDiv);
450}