|
YaWK
24.1
Yet another WebKit
|
This file contains all custom javascript functions for the YaWK bootstrap4 template. More...
Go to the source code of this file.
Functions | |
| document | ready (function() { $('#navbar').addClass('animated fadeIn slow');function setSticky(domElement, stickTo, offset) { if(domElement) { console.log('domElement:'+domElement);} else { console.error('Unable to setSticky - domElement is null or undefined:'+domElement);alert('Unable to setSticky - domElement is null or undefined:'+domElement);} if(!stickTo) { console.error('Unable to setSticky - stickTo is null or undefined:'+stickTo);alert('Unable to setSticky - stickTo is null or undefined:'+stickTo);} if(!offset) offset=0;$(window).scroll(function() { if($(window).scrollTop() > $(stickTo).outerHeight()) { $('#'+domElement).addClass('fixed-top shadow');var navbar_height=$('.'+domElement).outerHeight();$('body').css('padding-top', navbar_height+ 'px');} else { $('#'+domElement).removeClass('fixed-top');$('body').css('padding-top', 0);} });} setSticky('navbar', '#intro', 0);setSticky('MySidebar', '#intro', 100);$('#subMenu li').click(function(e) { e.preventDefault();var linkObject=$(this).find('a');var href=linkObject.attr('href');var target=linkObject.attr('target');if(href.charAt(0)==='#') { try { $('html, body').velocity('scroll', { offset:$(href).offset().top - 250, duration:2400, easing:'easeOutQuart' });} catch(error) { console.log('Info:Velocity.js is not loaded. Please consider loading velocity.js within the template assets if you want the smoothest scroll experience. Error message:', error.message);$('html, body').animate({ scrollTop:$(href).offset().top - 250 }, 2400);} } else { if(target) { window.open(href, target);} else { window.open(href, '_self');} } });$('.scrollup').click(function() { try{ $("html, body").velocity("scroll", { duration:2400, easing:"easeOutExpo" });} catch { console.log('Error:Velocity.js is not loaded. Please consider loading velocity.js within the assets if you want the smoothest scroll experience. Error message:', error.message);$("html, body").animate({scrollTop:0}, 1200);} });$('#darkMode').click(function() { var id=$('#darkMode').data('id');document.cookie='frontendSwitchID='+id;});$('#lightMode').click(function() { var id=$('#lightMode').data('id');document.cookie='frontendSwitchID='+id;});$(window).scroll(function() { var screenWidth=$(window).width();var scrollTop=$(window).scrollTop();var fadeOutValue=1 -(scrollTop/(screenWidth/3));$(".scrollDownFadeOut").css("opacity", fadeOutValue);});var $scrollingDiv=$("#scrollingDiv");$(window).scroll(function() { $scrollingDiv.stop().animate({"marginTop":($(window).scrollTop())}, 0);});$(".sliding-link").click(function(e) { e.preventDefault();var aid=$(this).attr("href");$('html, body').animate({scrollTop:$(aid).offset().top - 150}, 'slow');window.location.hash=aid;});$(function() { $('[data-toggle="tooltip"]').tooltip();});const options={ controlColor:"#FFFFFF", controlShadow:true, addCircle:true, addCircleBlur:true, showLabels:true, labelOptions:{ before:'Before', after:'After', onHover:true }, smoothing:true, smoothingAmount:80, hoverStart:true, verticalMode:false, startingPoint:50, fluidMode:false };$('.image-compare').each(function() { let view=new ImageCompare(this, options).mount();});}) |
This file contains all custom javascript functions for the YaWK bootstrap4 template.
this file is loaded after all other javascript files, so you can overwrite any function you like this provides generic methods to set a navbar sticky on scroll, smooth scrolling to any element on the page and a scroll to top button handling. You can add / change / remove any function you like. This gives you the flexibility to customize your template to your needs.
If you are not familiar with javascript, you can find a lot of tutorials on the web.
Definition in file custom.js.
| document ready | ( | function() { $('#navbar').addClass('animated fadeIn slow');function setSticky(domElement, stickTo, offset) { if(domElement) { console.log('domElement:'+domElement);} else { console.error('Unable to setSticky - domElement is null or undefined:'+domElement);alert('Unable to setSticky - domElement is null or undefined:'+domElement);} if(!stickTo) { console.error('Unable to setSticky - stickTo is null or undefined:'+stickTo);alert('Unable to setSticky - stickTo is null or undefined:'+stickTo);} if(!offset) offset=0;$(window).scroll(function() { if($(window).scrollTop() > $(stickTo).outerHeight()) { $('#'+domElement).addClass('fixed-top shadow');var navbar_height=$('.'+domElement).outerHeight();$('body').css('padding-top', navbar_height+ 'px');} else { $('#'+domElement).removeClass('fixed-top');$('body').css('padding-top', 0);} });} setSticky('navbar', '#intro', 0);setSticky('MySidebar', '#intro', 100);$('#subMenu li').click(function(e) { e.preventDefault();var linkObject=$(this).find('a');var href=linkObject.attr('href');var target=linkObject.attr('target');if(href.charAt(0)==='#') { try { $('html, body').velocity('scroll', { offset:$(href).offset().top - 250, duration:2400, easing:'easeOutQuart' });} catch(error) { console.log('Info:Velocity.js is not loaded. Please consider loading velocity.js within the template assets if you want the smoothest scroll experience. Error message:', error.message);$('html, body').animate({ scrollTop:$(href).offset().top - 250 }, 2400);} } else { if(target) { window.open(href, target);} else { window.open(href, '_self');} } });$('.scrollup').click(function() { try{ $("html, body").velocity("scroll", { duration:2400, easing:"easeOutExpo" });} catch { console.log('Error:Velocity.js is not loaded. Please consider loading velocity.js within the assets if you want the smoothest scroll experience. Error message:', error.message);$("html, body").animate({scrollTop:0}, 1200);} });$('#darkMode').click(function() { var id=$('#darkMode').data('id');document.cookie='frontendSwitchID='+id;});$('#lightMode').click(function() { var id=$('#lightMode').data('id');document.cookie='frontendSwitchID='+id;});$(window).scroll(function() { var screenWidth=$(window).width();var scrollTop=$(window).scrollTop();var fadeOutValue=1 -(scrollTop/(screenWidth/3));$(".scrollDownFadeOut").css("opacity", fadeOutValue);});var $scrollingDiv=$("#scrollingDiv");$(window).scroll(function() { $scrollingDiv.stop().animate({"marginTop":($(window).scrollTop())}, 0);});$(".sliding-link").click(function(e) { e.preventDefault();var aid=$(this).attr("href");$('html, body').animate({scrollTop:$(aid).offset().top - 150}, 'slow');window.location.hash=aid;});$(function() { $('[data-toggle="tooltip"]').tooltip();});const options={ controlColor:"#FFFFFF", controlShadow:true, addCircle:true, addCircleBlur:true, showLabels:true, labelOptions:{ before:'Before', after:'After', onHover:true }, smoothing:true, smoothingAmount:80, hoverStart:true, verticalMode:false, startingPoint:50, fluidMode:false };$('.image-compare').each(function() { let view=new ImageCompare(this, options).mount();});} | ) |
| function() | { $('#navbar').addClass('animated fadeIn slow');function setSticky(domElement, stickTo, offset) { if(domElement) { console.log('domElement:'+domElement);} else { console.error('Unable to setSticky - domElement is null or undefined:'+domElement);alert('Unable to setSticky - domElement is null or undefined:'+domElement);} if(!stickTo) { console.error('Unable to setSticky - stickTo is null or undefined:'+stickTo);alert('Unable to setSticky - stickTo is null or undefined:'+stickTo);} if(!offset) offset=0;.scroll(function() { if(.scrollTop() > .outerHeight()) { $('#'+domElement).addClass('fixed-top shadow');var navbar_height=$('.'+domElement).outerHeight();$('body').css('padding-top', navbar_height+ 'px');} else { $('#'+domElement).removeClass('fixed-top');$('body').css('padding-top', 0);} });} setSticky('navbar', '#intro', 0);setSticky('MySidebar', '#intro', 100);$('#subMenu li').click(function(e) { e.preventDefault();var linkObject=.find('a');var href=linkObject.attr('href');var target=linkObject.attr('target');if(href.charAt(0)==='#') { try { $('html, body').velocity('scroll', { offset:.offset().top - 250, duration:2400, easing:'easeOutQuart' });} catch(error) { console.log('Info:Velocity.js is not loaded. Please consider loading velocity.js within the template assets if you want the smoothest scroll experience. Error message:', error.message);$('html, body').animate({ scrollTop:.offset().top - 250 }, 2400);} } else { if(target) { window.open(href, target);} else { window.open(href, '_self');} } });$('.scrollup').click(function() { try{ $("html, body").velocity("scroll", { duration:2400, easing:"easeOutExpo" });} catch { console.log('Error:Velocity.js is not loaded. Please consider loading velocity.js within the assets if you want the smoothest scroll experience. Error message:', error.message);$("html, body").animate({scrollTop:0}, 1200);} });$('#darkMode').click(function() { var id=$('#darkMode').data('id');document.cookie='frontendSwitchID='+id;});$('#lightMode').click(function() { var id=$('#lightMode').data('id');document.cookie='frontendSwitchID='+id;});.scroll(function() { var screenWidth=.width();var scrollTop=.scrollTop();var fadeOutValue=1 -(scrollTop/(screenWidth/3));$(".scrollDownFadeOut").css("opacity", fadeOutValue);});var $scrollingDiv=$("#scrollingDiv");.scroll(function() { $scrollingDiv.stop().animate({"marginTop":(.scrollTop())}, 0);});$(".sliding-link").click(function(e) { e.preventDefault();var aid=.attr("href");$('html, body').animate({scrollTop:.offset().top - 150}, 'slow');window.location.hash=aid;});$(function() { $('[data-toggle="tooltip"]').tooltip();});const options={ controlColor:"#FFFFFF", controlShadow:true, addCircle:true, addCircleBlur:true, showLabels:true, labelOptions:{ before:'Before', after:'After', onHover:true }, smoothing:true, smoothingAmount:80, hoverStart:true, verticalMode:false, startingPoint:50, fluidMode:false };$('.image-compare').each(function() { let view=new ImageCompare(this, options).mount();});} fadeInNavbar adds a fadeIn animation to the navbar on page load |
you can change the animation type and speed by changing the class name Take a look at https://daneden.github.io/animate.css/ for a list of all available animations
setSticky makes a navbar sticky on scroll
this is achieved by adding a fixed-top class to the navbar
| domElement | the id of the navbar element |
| stickTo | the id of the element to stick to |
| offset | the offset in px to stick to |
if enabled, this will set a cookie to remember the user choice of dark or light mode this code sets the cookie for the frontend switch
this code will fade out an element on scroll down
this works well with images, like a carousel on top of the page that fades out on scroll down If you want to use this, add a div with class="scrollDownFadeOut" or add scrollDownFadeOut class to any element.
this code will add a tooltip to any element with data-toggle="tooltip"
this works well with any elemnt that has a title attribute
import image compare viewer
this will add a before/after image comparison slider to any element with class="image-compare" take a look at the options below to customize the slider