Design updates

This commit is contained in:
genuineparts 2025-06-04 14:04:26 +02:00
parent ac623a4eee
commit 3a7f36261d
6 changed files with 277 additions and 183 deletions

View file

@ -1,79 +1,167 @@
/*-----------------------------------------------------------------------------------
/*
/* Main JS
/*
----------------------------------------------------------------------------------- */
(function($) {
/* Mobile Menu
------------------------------------------------------ */
var toggle_button = $("<a>", {
id: "toggle-btn",
html : "Menu",
title: "Menu",
href : "#" }
);
var nav_wrap = $('nav#nav-wrap')
var nav = $("ul#nav");
/* if JS is enabled, remove the two a.mobile-btns
and dynamically prepend a.toggle-btn to #nav-wrap */
nav_wrap.find('a.mobile-btn').remove();
nav_wrap.prepend(toggle_button);
toggle_button.on("click", function(e) {
e.preventDefault();
nav.slideToggle("fast");
});
if (toggle_button.is(':visible')) nav.addClass('mobile');
$(window).resize(function(){
if (toggle_button.is(':visible')) nav.addClass('mobile');
else nav.removeClass('mobile');
});
$('ul#nav li a').on("click", function(){
if (nav.hasClass('mobile')) nav.fadeOut('fast');
});
/* Smooth Scrolling
------------------------------------------------------ */
$('.smoothscroll').on('click', function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 800, 'swing', function () {
window.location.hash = target;
});
});
/* Back To Top Button
------------------------------------------------------- */
var pxShow = 300; //height on which the button will show
var fadeInTime = 400; //how slow/fast you want the button to show
var fadeOutTime = 400; //how slow/fast you want the button to hide
var scrollSpeed = 300; //how slow/fast you want the button to scroll to top. can be a value, 'slow', 'normal' or 'fast'
// Show or hide the sticky footer button
$(window).scroll(function() {
if ($(window).scrollTop() >= pxShow) {
$("#go-top").fadeIn(fadeInTime);
} else {
$("#go-top").fadeOut(fadeOutTime);
}
});
/* ===================================================================
* Keep It Simple 3.0.0 - Main JS
*
* ------------------------------------------------------------------- */
(function($) {
"use strict";
const cfg = {
scrollDuration : 800, // smoothscroll duration
mailChimpURL : '' // mailchimp url
};
const $WIN = $(window);
// Add the User Agent to the <html>
// will be used for IE10/IE11 detection (Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0; rv:11.0))
const doc = document.documentElement;
doc.setAttribute('data-useragent', navigator.userAgent);
/* preloader
* -------------------------------------------------- */
const ssPreloader = function() {
$("html").addClass('ss-preload');
$WIN.on('load', function() {
// force page scroll position to top at page refresh
// $('html, body').animate({ scrollTop: 0 }, 'normal');
// will first fade out the loading animation
$("#loader").fadeOut("slow", function() {
// will fade out the whole DIV that covers the website.
$("#preloader").delay(300).fadeOut("slow");
});
// for hero content animations
$("html").removeClass('ss-preload');
$("html").addClass('ss-loaded');
});
};
/* mobile menu
* ---------------------------------------------------- */
const ssMobileMenu = function() {
const $toggleButton = $('.header-menu-toggle');
const $headerContent = $('.header-content');
const $siteBody = $("body");
$toggleButton.on('click', function(event){
event.preventDefault();
// at 800px and below
if (window.matchMedia('(max-width: 800px)').matches) {
$toggleButton.toggleClass('is-clicked');
$siteBody.toggleClass('menu-is-open');
}
});
$WIN.on('resize', function() {
// above 800px
if (window.matchMedia('(min-width: 801px)').matches) {
if ($siteBody.hasClass("menu-is-open")) $siteBody.removeClass("menu-is-open");
if ($toggleButton.hasClass("is-clicked")) $toggleButton.removeClass("is-clicked");
}
});
// open (or close) submenu items in mobile view menu.
// close all the other open submenu items.
$('.s-header__nav .has-children').children('a').on('click', function (e) {
e.preventDefault();
// at 800px and below
if (window.matchMedia('(max-width: 800px)').matches) {
$(this).toggleClass('sub-menu-is-open')
.next('ul')
.slideToggle(200)
.end()
.parent('.has-children')
.siblings('.has-children')
.children('a')
.removeClass('sub-menu-is-open')
.next('ul')
.slideUp(200);
}
});
};
/* alert boxes
* ------------------------------------------------------ */
const ssAlertBoxes = function() {
$('.alert-box').on('click', '.alert-box__close', function() {
$(this).parent().fadeOut(500);
});
};
/* smooth scrolling
* ------------------------------------------------------ */
const ssSmoothScroll = function() {
$('.smoothscroll').on('click', function (e) {
const target = this.hash;
const $target = $(target);
e.preventDefault();
e.stopPropagation();
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, cfg.scrollDuration, 'swing').promise().done(function () {
window.location.hash = target;
});
});
};
/* back to top
* ------------------------------------------------------ */
const ssBackToTop = function() {
const pxShow = 800;
const $goTopButton = $(".ss-go-top")
// Show or hide the button
if ($(window).scrollTop() >= pxShow) $goTopButton.addClass('link-is-visible');
$(window).on('scroll', function() {
if ($(window).scrollTop() >= pxShow) {
if(!$goTopButton.hasClass('link-is-visible')) $goTopButton.addClass('link-is-visible')
} else {
$goTopButton.removeClass('link-is-visible')
}
});
};
/* initialize
* ------------------------------------------------------ */
(function ssInit() {
ssPreloader();
ssMobileMenu();
ssAlertBoxes();
ssSmoothScroll();
ssBackToTop();
})();
})(jQuery);