Ever since I’ve added the color-choice script, my hamburger menu isn’t working anymore. I don’t know what is in conflict but the only thing that happens when I click on the hamburger menu is that I get a notification ‘Javascript:void(0)’. Can anyone help me figure this problem out? Of course I need the mobile menu to work before I can launch my website, but I also really want to keep my color choice script because I think that’s a cool feature. Hope someone can help me out.
$(window).on("load", function () {
"use strict";
/* ===================================
Loading Timeout
====================================== */
$('.side-menu').removeClass('hidden');
setTimeout(function(){
$('.preloader').fadeOut();
}, 1000);
});
jQuery(function ($) {
"use strict";
/* ===================================
Side Menu
====================================== */
if ($("#sidemenu_toggle").length) {
$("#sidemenu_toggle").on("click", function () {
$(".side-menu").removeClass("side-menu-opacity");
$(".pushwrap").toggleClass("active");
$(".side-menu").addClass("side-menu-active"), $("#close_side_menu").fadeIn(700)
}), $("#close_side_menu").on("click", function () {
$(".side-menu").removeClass("side-menu-active"), $(this).fadeOut(200), $(".pushwrap").removeClass("active");
setTimeout(function(){
$(".side-menu").addClass("side-menu-opacity");
}, 500);
}), $(".side-menu .navbar-nav .nav-link").on("click", function () {
$(".side-menu").removeClass("side-menu-active"), $("#close_side_menu").fadeOut(200), $(".pushwrap").removeClass("active");
setTimeout(function(){
$(".side-menu").addClass("side-menu-opacity");
}, 500);
}), $("#btn_sideNavClose").on("click", function () {
$(".side-menu").removeClass("side-menu-active"), $("#close_side_menu").fadeOut(200), $(".pushwrap").removeClass("active");
setTimeout(function(){
$(".side-menu").addClass("side-menu-opacity");
}, 500);
});
}
/* ===================================
Bottom Nav Appear
====================================== */
$(function () {
var $win = $(window);
jQuery(function($) {
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() > $(document).height() - 200) {
// alert("near bottom!");
$('.sidenav-bottom').css('opacity','1');
$('.sidenav-bottom').addClass('sidenav-bottom-fixed');
}
if($(window).scrollTop() + $(window).height() < $(document).height() - 300 && $(window).scrollTop() + $(window).height() > $(document).height() - 400 ) {
$('.sidenav-bottom').css('opacity','0');
$('.sidenav-bottom').removeClass('sidenav-bottom-fixed');
}
});
});
});
if ($(window).width() <= 991) {
$(".scroll").on("click", function (event) {
event.preventDefault();
$('html,body').animate({
scrollTop: $(this.hash).offset().top - 40
}, 200);
});
}
/* ===================================
Header Appear
====================================== */
$(window).on('scroll', function () {
if ($(this).scrollTop() > 260) { // Set position from top to add class
$('.sidenav-bottom').css('opacity','0');
$('header .inner-header').addClass('header-appear');
}
if($(this).scrollTop() < 260) {
$('.sidenav-bottom').css('opacity','1');
$('header .inner-header').removeClass('header-appear');
}
});
/*===================================
Go Top Scroll
====================================== */
$(function(){
// Scroll Event
$(window).on('scroll', function(){
var scrolled = $(window).scrollTop();
if (scrolled > 260) $('.go-top').addClass('active');
if (scrolled < 260) $('.go-top').removeClass('active');
});
// Click Event
$('.go-top').on('click', function() {
$("html, body").animate({ scrollTop: "0" }, 100);
});
});
/* ===================================
Portfolio Carousel
====================================== */
$('.portfolio-carousel').owlCarousel({
loop:true,
margin:10,
slideSpeed: 5000,
slideTransition:'linear',
nav:false,
dots:false,
autoplay:false,
autoplayTimeout:8000,
autoplayHoverPause:false,
responsive:{
0:{
items:1
},
600:{
items:1
},
1000:{
items:1
},
}
});
$('.portfolio-right-arr').click(function() {
var owl = $('.portfolio-carousel');
owl.owlCarousel();
owl.trigger('next.owl.carousel');
});
$('.portfolio-left-arr').click(function() {
var owl = $('.portfolio-carousel');
owl.owlCarousel();
owl.trigger('prev.owl.carousel');
});
/* ===================================
Banner Carousel
====================================== */
$('.slider-carousel').owlCarousel({
loop: true,
margin: 10,
slideSpeed: 9999,
slideTransition: 'linear',
nav: false,
dots: false,
autoplay: true,
smartSpeed: 450,
autoplayTimeout: 3000,
autoplayHoverPause: false,
responsive:{
0:{
items:1
},
600:{
items:1
},
1000:{
items:1
},
}
});
/* ===================================
Testimonial Carousel
====================================== */
$('.review-carousel').owlCarousel({
loop:true,
margin:10,
slideSpeed: 5000,
slideTransition:'linear',
nav:false,
dots:false,
autoplay:false,
autoplayTimeout:8000,
autoplayHoverPause:true,
responsive:{
0:{
items:1
},
600:{
items:1
},
1000:{
items:1
},
}
});
/* ===================================
Wow Effects
======================================*/
var wow = new WOW(
{
boxClass:'wow', // default
animateClass:'animated', // default
offset:0, // default
mobile:false, // default
live:true // default
}
);
wow.init();
});
$(document).ready(function() {
// Toon de kleurkeuze pop-up bij het laden van de pagina
setTimeout(function() {
$("#color-choice-popup").fadeIn();
$("#color-choice-overlay").fadeIn(); // Laat ook de overlay zien
$("body").addClass("no-scroll"); // Voeg een klasse toe om scrollen te voorkomen
}, 1500);
// Functie om de themaklasse van de website aan te passen
function updateThemeClass(themeClass) {
document.documentElement.className = themeClass; // Stel de klasse van het root element in
}
// Event listener voor kleurkeuze
$(".color-choice").on("click", function() {
var themeClass = $(this).data("theme");
updateThemeClass(themeClass); // Pas de themaklasse aan met de gekozen klasse
$("#color-choice-popup").fadeOut(); // Verberg de pop-up
$("#color-choice-overlay").fadeOut(); // Verberg ook de overlay
$("body").removeClass("no-scroll"); // Verwijder de klasse om scrollen mogelijk te maken
});
// Controleer of de kleurindicator al bestaat om te voorkomen dat deze meerdere keren wordt toegevoegd
if($("#color-indicator-menubar").length === 0) {
// Zorg ervoor dat dit geplaatst wordt in het juiste header-element, naast de Get a Quote knop
$("<div id='color-indicator-menubar'></div>")
.insertBefore(".inner-header .row .col-lg-4.d-flex.justify-content-end .btn-main");
}
// Laat de kleurkeuzepopup opnieuw zien wanneer op de kleurindicator wordt geklikt
$("#color-indicator-menubar").on("click", function() {
$("#color-choice-popup").fadeIn();
$("#color-choice-overlay").fadeIn(); // Laat ook de overlay zien
$("body").addClass("no-scroll"); // Voeg een klasse toe om scrollen te voorkomen
});
});