Category: JavaScript

Scroll inner hash links

JS

// scroll
$('a[href*="#"]:not([href="#"])').click(function() {
	if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
		var target = $(this.hash);
		target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
		if (target.length) {
			$('html, body').animate({
				scrollTop: target.offset().top
			}, 800);
			return false;
		}
	}
});

Bootstrap 4 dropdown hover

CSS

.dropdown:hover>.dropdown-menu {
    display: block;
}

or

JavaScript

function toggleDropdown (e) {
  const _d = $(e.target).closest('.dropdown'),
    _m = $('.dropdown-menu', _d);
  setTimeout(function(){
    const shouldOpen = e.type !== 'click' && _d.is(':hover');
    _m.toggleClass('show', shouldOpen);
    _d.toggleClass('show', shouldOpen);
    $('[data-toggle="dropdown"]', _d).attr('aria-expanded', shouldOpen);
}, e.type === 'mouseleave' ? 150 : 0);
}

$('body')
  .on('mouseenter mouseleave','.dropdown',toggleDropdown)
  .on('click', '.dropdown-menu a', toggleDropdown);

Remove focus outline and add it on tab key

HTML

<body class="no-focus-outline">
<!-- WordPress -->
<body <?php body_class("no-focus-outline"); ?>>

SCSS

.no-focus-outline {
  a, button, input {
    &:focus {
      outline: none;
      box-shadow: none !important;
    }
}

JS

// body remove no-focus-outline on tab key
document.body.addEventListener('keydown', function(e) {
    if (e.which === 9) /* tab */ {
        $("body").removeClass('no-focus-outline');
    }
});

Scroll fixed header functions

// menu scroll
var lastScrollTop = 0;
var lastScrollChange = 0;
var scrollDown = true;
var topOffset = 100;
var lastScrollChangeOffset = 100;

$(window).scroll(function(event){
    checkScroll();
});
checkScroll();

function checkScroll(){
    var st = $(this).scrollTop();
    if(st < lastScrollTop){
        if(!scrollDown){
            lastScrollChange = st;
            scrollDown = true;
        }
    }else{
        if(scrollDown){
            lastScrollChange = st;
            scrollDown = false;
        }
    }
    if(st - lastScrollChange > lastScrollChangeOffset){
        lastScrollChange = st;
        if(!scrollDown){
            $("body").addClass("down");
        }else{
            $("body").removeClass("down");
        }
    }
    if(st > topOffset){
        $("body").addClass("scroll");
    }else{
        $("body").removeClass("scroll");
    }
    lastScrollTop = st;
}

Setting first-row, last-row, single-in-row classes

HTML

<div class="row first-last-row">
    <div class="col-6 col-md-4">
    </div>
    <div class="col-6 col-md-4">
    </div>
    ...
</div>

JavaScript

// first last row
function firstLastRow(){
    if($(".row.first-last-row").length){
        $(".row.first-last-row").each(function(){
            var col_items = new Array();
            var item_offset = false;
            var item_single = true;
            var items_length = $(this).find(">div").length;
            $(this).find(">div").each(function(index){
                $(this).removeClass("first-row");
                $(this).removeClass("last-row");
                $(this).removeClass("single-in-row");
                if(item_offset === false){
                    item_first_row_offset = $(this).offset().top;
                }else{
                    if(item_offset != $(this).offset().top){
                        if(item_single){
                            $(col_items[col_items.length - 1]).addClass("single-in-row");
                        }
                        item_single = true;
                    }else{
                        item_single = false;
                    }
                }
                if(index == items_length - 1 && item_offset != $(this).offset().top){
                    $(this).addClass("single-in-row");
                }
                item_offset = $(this).offset().top;
                col_items.push($(this));
            });
            if(item_offset !== false){
                item_last_row_offset = item_offset;
                item_offset = false;
                $(this).find(">div").each(function(e){
                    item_offset = $(this).offset().top;
                    if(item_offset == item_first_row_offset){
                        $(this).addClass("first-row");
                    }
                    if(item_offset == item_last_row_offset){
                        $(this).addClass("last-row");
                    }
                });
            }
        });
    }
}
firstLastRow();
$( window ).resize(function() {
    firstLastRow();
});

Bootstrap accordion scroll to opened item

$(".accordion .collapse").on('shown.bs.collapse', function(e){
    if($(".main-menu") != $(this)){
        // get clicked item
        $clickedElement = $($(e.target).data('bs.collapse')._triggerArray);
        clickedElementOffsetTop = $clickedElement.offset().top;
        // add additional offset for top fixed elements
        headerOffset = $(".main-header-top").outerHeight();
        // check if element is outside viewport
        if(clickedElementOffsetTop - headerOffset < $(window).scrollTop()){
            $('html, body').animate({
                scrollTop: clickedElementOffsetTop - headerOffset
            }, 300);
        }
    }
});