MegaMenu throws error if smooth scroll is enabled


Topic: MegaMenu throws error if smooth scroll is enabled

Kurt asked 7 years ago

my code (from examples MDB Mega Menu): ... <!-- Links --> <ul class="navbar-nav mr-auto smooth-scroll"> ... <li class="nav-item dropdown mega-dropdown active"> <a class="nav-link dropdown-toggle font-up no-caret" ... ... after click an the menu-button, Safari throws the following error TypeError: undefined is not an object (evaluating '$(e).offset().top') an mdb.min.js 8450   Without smooth-scroll, there is no error Regards Kurt

Jakub Strebeyko staff answered 7 years ago

Hi Kurt,
The issue seems to be caused by the .scroll()ing functionality checking for navbar offset. Upcoming MDB update will to solve it, but if you can easily fix it yourself, right now. To do it, please refer to the mdb.js included in your project and find this fragment:

$(window).scroll(function () {
if ($('.navbar').offset().top > OFFSET_TOP) {
$('.scrolling-navbar').addClass('top-nav-collapse');
} else {
$('.scrolling-navbar').removeClass('top-nav-collapse');
}
});

...and wrap the if statement in another, checking whether an element with class navbar exists - like so:

$(window).scroll(function () {
if ( $( '.navbar' ).length ) {
if ($('.navbar').offset().top > OFFSET_TOP) {
$('.scrolling-navbar').addClass('top-nav-collapse');
} else {
$('.scrolling-navbar').removeClass('top-nav-collapse');
}
}
});

Please let us know if it resolved the problem.
With Best Regards,
Kuba


Kurt answered 7 years ago

Hi Kuba, sorry, does not run. First: it seems to be syntax error: & } else {   ----> unexpected Token & Second: if i remove the & error is thrown at line 14732 Best regards Kurt

Jakub Strebeyko staff commented 7 years ago

Hi Kurt, Yes, the & was typo, sorry. Could you please be more specific about the error you're getting? Regards, Kuba

Kurt answered 7 years ago

Hi Kuba, ok, Error is: TypeError: undefined is not an object (evaluating '$(elAttr).offset().top') referenced to line 14732: 14731: $('body,html').animate({ 14732: scrollTop: $(elAttr).offset().top - offset 14733: }, 700); 14734: if (typeof setHash !== typeof undefined && setHash !== false) { 14735: history.replaceState(null, null, elAttr); Regards, Kurt  

Jakub Strebeyko staff commented 7 years ago

Hi Kurt, The error is caused by the very same issue - scroll functionality tries to adjust to a potential offset value. Looking up an element with a particular attribute may throw back a undefined or false depending on a browser, yet again, an easy fix would be to wrap the insides of the smooth scroll inside of an if statement, which'd be checking whether the necessary variables are properly defined, like so: $(".smooth-scroll").on('click', 'a', function(event) { event.preventDefault(); var elAttr = $(this).attr('href'); if ( typeof elAttr !== typeof undefined && elAttr !== false) { var offset = ($(this).attr('data-offset') ? $(this).attr('data-offset') : 0); var setHash = $(this).closest('ul').attr('data-allow-hashes'); $('body,html').animate({ scrollTop: $(elAttr).offset().top - offset }, 700); if (typeof setHash !== typeof undefined && setHash !== false) { history.replaceState(null, null, elAttr); } } }); This is an instant fix suggestion, yet it does not 100% guarantee success, as the issue may have some contextual background. In case the above solution does not bring desired results, please provide the name and version of browser used, as well as an MDB version. With Best Regards, Kuba

Kurt commented 7 years ago

Hi Kuba, OS X 10.13.1, Safari 11.0.1 Best Regards Kurt

Kurt answered 7 years ago

and MDB PRO 4.4.3

Jakub Strebeyko staff commented 7 years ago

Dear Kurt, Thanks for providing the additional details. As I mentioned, the "smooth scroll trouble" is caused by the scrolling script considering variables that are not necessarily present. The issue surfaced several times before, but always was possible to resolve through extra if conditions checking for smooth scroll required elements. If I understand correctly, it is not your case and adding these does not get rid of the problem. Are you still getting the same error that you mentioned (line 14732-related) despite adding ifs checking the type of elAttr? Regards, Kuba

Kurt answered 7 years ago

Hi Kuba, i made a clean and small testing environment with examples from mdb for a normal menu with two entries and a normal dropdown (not mega). As result i got the error, if there is an undefined link on an normal menu-item or if i click at the dropdown button. The error is: TypeError: undefined is not an object (evaluating '$(e).offset().top') ... at line 18242 in mdb.min.js   her is my testing code (only for the navbar): <!-- Links --> <ul class="navbar-nav mr-auto smooth-scroll"> <li class="nav-item active"> <a class="nav-link" href="#intro">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#undefined">undefined link</a> </li> <!-- Dropdown --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a> <div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#intro">defined link</a> <a class="dropdown-item" href="#undefined">Undefined link</a> </div> </li> </ul> <!-- Links --> Best Regards Kurt

Jakub Strebeyko staff commented 7 years ago

Dear Kurt, I got to make sure, considering the nature of errors presented - do you have any content to smooth-scroll to? Smooth-scroll feature works only on elements below the element with "smooth-scroll" class with IDs mentioned in href attribute. With Best Regards, Kuba

Kurt answered 7 years ago

Dear Kuba, of course there is content to smooth scroll. Here are the additional lines in the testing page: <!-- Links --> </div> <!-- Collapsible content --> </nav> <!--/.Navbar--> <div id="intro" class="view hm-black-light"> <div class="full-bg-img flex-center"> <div class="container text-center white-text"> <div class="white-text text-center wow fadeInUp"> <h2>This Navbar is fixed</h2> <h5>It will always stay visible on the top, even when you scroll down</h5> <br> <p>Full page intro with background image will be always displayed in full screen mode, regardless of device </p> </div> </div> </div> </div> </header> <!--Main Navigation--> <!--Main Layout--> <main class="text-center py-5"> <div class="container"> <div class="row"> <div id="zwei" class="col-md-12"> <p align="justify">quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> </div> </main> <!--Main Layout--> best regards Kurt

Jakub Strebeyko staff answered 7 years ago

Dear Kurt, Thank you for confirmation. I understand that #intro & #zwei are where you want to smoothly scroll to, but you don't seem to be declaring it clear enough, i.e. by giving a navbar link href="#zwei" attribute. In the above example you're actually trying to anchor menu items to a non-existent element - #undefined, which seems to be bringing about the errors you're experiencing. With Best of Regards, Kuba

Kurt answered 7 years ago

Dear Kuba, thanks for your patience :). Last try to explain. I stripped my example again and put only valid links in there. Result is the same, if clicking an drop down menu (The error is: TypeError: undefined is not an object (evaluating ‘$(e).offset().top’) … at line 18242 in mdb.min.js) Below you see my coding. Best Regards, Kurt <!--Main Navigation--> <header> <!--Navbar--> <nav class="navbar navbar-expand-lg navbar-dark fixed-top"> <!-- Navbar brand --> <a class="navbar-brand" href="#">Navbar</a> <!-- Collapse button --> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button> <!-- Collapsible content --> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <!-- Links --> <ul class="navbar-nav mr-auto smooth-scroll"> <li class="nav-item active"> <a class="nav-link" href="#intro">Intro <span class="sr-only">(current)</span></a> </li> <li class="nav-item active"> <a class="nav-link" href="#zwei">Zwei <span class="sr-only">(current)</span></a> </li> <!-- Dropdown --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a> <div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#intro">Intro</a> <a class="dropdown-item" href="#zwei">Zwei</a> </div> </li> </ul> <!-- Links --> </div> <!-- Collapsible content --> </nav> <!--/.Navbar--> <div id="intro" class="view hm-black-light"> <div class="full-bg-img flex-center"> <div class="container text-center white-text"> <div class="white-text text-center wow fadeInUp"> <h2>This Navbar is fixed</h2> <h5>It will always stay visible on the top, even when you scroll down</h5> <br> <p>Full page intro with background image will be always displayed in full screen mode, regardless of device </p> </div> </div> </div> </div> </header> <!--Main Navigation--> <!--Main Layout--> <main class="text-center py-5"> <div class="container"> <div class="row"> <div id="zwei" class="col-md-12"> <p align="justify">quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> </div> </div> </div> </main> <!--Main Layout-->
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No