There is a problem in my JavaScript code that I have been struggling with for about 2 days.
jQuery(document).ready(function($) {
function ClickArrowsSubMenu($menu) {
if ( ! $menu.hasClass( 'clickarrowssubmenu' ) ) {
return;
}
$menu.find('.menu-item-has-children > a').off('click').click(function(e) {
var $this = $(this);
var offset = $this.offset();
var x = e.pageX - offset.left;
var y = e.pageY - offset.top;
var isParentLevel = $this.closest('ul').parent().is('nav');
var clickOnAfter = false;
if (window.innerWidth > 768) {
if (isParentLevel) {
clickOnAfter = (x < 9) && (y > 8 && y < 15);
} else {
clickOnAfter = (x > 8 && x < 20) && (y > 20 && y < 27);
}
} else {
if ($this.closest('nav').hasClass('account')) {
if (isParentLevel) {
clickOnAfter = (x < 9) && (y > 13 && y < 20);
} else {
clickOnAfter = (x > 8 && x < 20) && (y > 20 && y < 27);
}
} else {
clickOnAfter = (x > 7 && x < 20) && (y > 20 && y < 27);
}
}
if (clickOnAfter) {
e.preventDefault();
var $parent = $this.parent();
var $submenu = $parent.children('.sub-menu');
$('nav.menu').not($menu).find('.menu-item-has-children.active').removeClass('active').children('.sub-menu').slideUp();
$('nav.menu').not($menu).prev('.hamburger-menu.open').click();
if ($parent.hasClass('active')) {
$parent.removeClass('active');
$submenu.slideUp().find('.menu-item-has-children').removeClass('active').children('.sub-menu').slideUp();
} else {
$parent.siblings('.menu-item-has-children').removeClass('active').children('.sub-menu').slideUp().find('.menu-item-has-children').removeClass('active').children('.sub-menu').slideUp();
$parent.addClass('active');
$submenu.slideDown(function() {
$(this).removeAttr('style');
$submenu.data('current-page', 0);
showPage($submenu, 0);
});
}
}
});
}
function HamburgerMenu($menu) {
if ( ! $menu.hasClass( 'hamburgermenu' ) ) {
return;
}
if ($menu.prev('.hamburger-menu').length === 0) {
$('<div class="hamburger-menu"><i class="fas fa-bars"></i></div>').insertBefore($menu);
$menu.prev('.hamburger-menu').click(function() {
$('nav.menu').not($menu).find('.menu-item-has-children.active').removeClass('active').children('.sub-menu').slideUp();
$('nav.menu.hamburgermenu').not($menu).prev('.hamburger-menu.open').click();
if ($(this).hasClass('open')) {
$menu.slideUp(function() {
$(this).removeAttr('style');
$(this).removeClass('act');
});
$(this).removeClass('open').html('<i class="fas fa-bars"></i>');
} else {
$menu.slideDown(function() {
$(this).removeAttr('style');
$(this).addClass('act');
});
$(this).addClass('open').html('<i class="fas fa-times"></i>');
}
});
}
}
function showPage($subMenu, page) {
var $items = $subMenu.children('li');
var totalItems = $items.length;
var itemsPerPage = 2;
$items.each(function(index) {
if (index >= page * itemsPerPage && index < (page + 1) * itemsPerPage) {
$(this).addClass('activ');
} else {
$(this).removeClass('activ');
if (!$(this).attr('class')) {
$(this).removeAttr('class');
}
}
});
if (page > 0) {
$subMenu.addClass('has-previous');
} else {
$subMenu.removeClass('has-previous');
}
if ((page + 1) * itemsPerPage < totalItems) {
$subMenu.addClass('has-next');
} else {
$subMenu.removeClass('has-next');
}
}
function Paginations($menu) {
if ( ! $menu.hasClass( 'paginations' ) ) {
return;
}
$menu.find('ul ul.sub-menu').each(function() {
var $subMenu = $(this);
var currentPage = 0;
$subMenu.data('current-page', currentPage);
$subMenu.on('click', function(event) {
var offsetTop = $subMenu.offset().top;
var offsetLeft = $subMenu.offset().left;
var offsetRight = offsetLeft + $subMenu.outerWidth();
var offsetBottom = offsetTop + $subMenu.outerHeight();
var clickY = event.pageY;
var clickX = event.pageX;
var hasPrevious = $subMenu.hasClass('has-previous');
var hasNext = $subMenu.hasClass('has-next');
var $visibleItems = $subMenu.children('li:visible');
var displayedItems = $visibleItems.length;
var page = $subMenu.data('current-page');
if (displayedItems === 1) {
if (hasPrevious && hasNext) {
var upArrowClickTop = offsetTop + 14;
var upArrowClickBottom = offsetBottom - 95;
var downArrowClickTop = offsetTop + 95;
var downArrowClickBottom = offsetBottom - 14;
var ArrowClickRight = (offsetLeft + offsetRight) / 2 + 6;
var ArrowClickLeft = (offsetLeft + offsetRight) / 2 - 7;
} else if (hasPrevious && !hasNext) {
var upArrowClickTop = offsetTop + 14;
var upArrowClickBottom = offsetBottom - 62;
var ArrowClickRight = (offsetLeft + offsetRight) / 2 + 6;
var ArrowClickLeft = (offsetLeft + offsetRight) / 2 - 7;
} else if (!hasPrevious && hasNext) {
var downArrowClickTop = offsetTop + 62;
var downArrowClickBottom = offsetBottom - 14;
var ArrowClickRight = (offsetLeft + offsetRight) / 2 + 6;
var ArrowClickLeft = (offsetLeft + offsetRight) / 2 - 7;
} else {
var upArrowClickTop = 0;
var upArrowClickBottom = 0;
var downArrowClickTop = 0;
var downArrowClickBottom = 0;
var ArrowClickRight = 0;
var ArrowClickLeft = 0;
}
} else if (displayedItems === 2) {
if (hasPrevious && hasNext) {
var upArrowClickTop = offsetTop + 14;
var upArrowClickBottom = offsetBottom - 142;
var downArrowClickTop = offsetTop + 142;
var downArrowClickBottom = offsetBottom - 14;
var ArrowClickRight = (offsetLeft + offsetRight) / 2 + 6;
var ArrowClickLeft = (offsetLeft + offsetRight) / 2 - 7;
} else if (hasPrevious && !hasNext) {
var upArrowClickTop = offsetTop + 14;
var upArrowClickBottom = offsetBottom - 109;
var ArrowClickRight = (offsetLeft + offsetRight) / 2 + 6;
var ArrowClickLeft = (offsetLeft + offsetRight) / 2 - 7;
} else if (!hasPrevious && hasNext) {
var downArrowClickTop = offsetTop + 109;
var downArrowClickBottom = offsetBottom - 14;
var ArrowClickRight = (offsetLeft + offsetRight) / 2 + 6;
var ArrowClickLeft = (offsetLeft + offsetRight) / 2 - 7;
} else {
var upArrowClickTop = 0;
var upArrowClickBottom = 0;
var downArrowClickTop = 0;
var downArrowClickBottom = 0;
var ArrowClickRight = 0;
var ArrowClickLeft = 0;
}
}
var withinUpArrowArea = (clickY >= upArrowClickTop && clickY <= upArrowClickBottom && (clickX >= ArrowClickLeft && clickX <= ArrowClickRight));
var withinDownArrowArea = (clickY >= downArrowClickTop && clickY <= downArrowClickBottom && (clickX >= ArrowClickLeft && clickX <= ArrowClickRight));
if (withinUpArrowArea) {
event.stopPropagation();
if (page > 0) {
page--;
$subMenu.data('current-page', page);
showPage($subMenu, page);
}
} else if (withinDownArrowArea) {
event.stopPropagation();
if ((page + 1) * 2 < $subMenu.children('li').length) {
page++;
$subMenu.data('current-page', page);
showPage($subMenu, page);
}
}
if (withinUpArrowArea || withinDownArrowArea) {
$subMenu.find('.menu-item-has-children.active').removeClass('active').children('.sub-menu').slideUp();
}
});
showPage($subMenu, 0);
});
}
function ResetMenu($menu) {
if (window.innerWidth > 768) {
$menu.prev('.hamburger-menu').remove();
$menu.removeAttr('style').show();
$menu.find('.menu-item-has-children').removeClass('active').children('.sub-menu');
} else {
if ( $menu.hasClass( 'hamburgermenu' ) ) {
HamburgerMenu($menu);
}
$menu.find('.menu-item-has-children').removeClass('active').children('.sub-menu');
}
}
function checkWindowWidth() {
$('nav.menu').each(function() {
var $menu = $(this);
var isLargeScreen = window.innerWidth > 768;
var isCurrentlyLargeScreen = $menu.hasClass('large-screen');
var isCurrentlySmallScreen = $menu.hasClass('small-screen');
if (isLargeScreen) {
if (!isCurrentlyLargeScreen) {
$menu.addClass('large-screen').removeClass('small-screen');
if ( $menu.hasClass( 'clickarrowssubmenu' ) ) {
ClickArrowsSubMenu($menu);
}
if ( $menu.hasClass( 'paginations' ) ) {
Paginations($menu);
}
ResetMenu($menu);
}
} else {
if (!isCurrentlySmallScreen) {
$menu.addClass('small-screen').removeClass('large-screen');
if ( $menu.hasClass( 'hamburgermenu' ) ) {
HamburgerMenu($menu);
}
if ( $menu.hasClass( 'clickarrowssubmenu' ) ) {
ClickArrowsSubMenu($menu);
}
if ( $menu.hasClass( 'paginations' ) ) {
Paginations($menu);
}
ResetMenu($menu);
}
}
});
}
checkWindowWidth();
$(window).resize(checkWindowWidth);
function serach() {
$( '.search-icon' ).on( 'click', function() { $( '.search' ).css( 'display', 'flex' ).fadeIn(); } );
$( '.times' ).on( 'click', function() { $( '.search' ).removeAttr( 'style' ).fadeOut(); } );
}
serach();
});
- If the width of the browser is greater than 768 pixels or less than
768 pixels (without switching to each other): by opening and closing
the hierarchy (level), items 1 and 2 are displayed first, and when
using hierarchy pagination (Level) The next items are also displayed
until the last item. - If the width of the browser is greater than 768 pixels or less than 768 pixels (by switching to each other): By opening and closing the hierarchy (level), items 1 and 2 are displayed first, and when using hierarchy pagination (level) after item 1 and 2, item 3 and 4 are displayed in order, but after item 3 and 4, the display order of the items is messed up and items 9, 10 and … are displayed to give.
When I am in position #1, there is no problem. But when I’m in situation number 2, the display order of the items gets messed up, and when I see item 1 and 2, by clicking on the next page, it jumps to item 7 and 8 and it doesn’t display in that order.
I was really confused.