Can&#38;#039;t figure out links in nav

Topic: Can't figure out links in nav

Steve Stacha pro asked 6 years ago

I think this is probably something simple I am missing. I took the construction example from the big bundle and simply tried to change the "#contact" to "/contact.html" and added the contact.html page. First, I get a warning when I first load the page: Velocity is already loaded. You may be needlessly importing Velocity again; note that Materialize includes Velocity. from mdb.min.js on line 14 When I click on the contact link I get the following js error in the console: jquery-3.1.1.min.js:2 Uncaught Error: Syntax error, unrecognized expression: /contact.html at Function.ga.error (jquery-3.1.1.min.js:2) at ga.tokenize (jquery-3.1.1.min.js:2) at ga.select (jquery-3.1.1.min.js:2) at Function.ga [as find] (jquery-3.1.1.min.js:2) at r.fn.init.find (jquery-3.1.1.min.js:2) at new r.fn.init (jquery-3.1.1.min.js:2) at r (jquery-3.1.1.min.js:2) at HTMLAnchorElement.<anonymous> (mdb.min.js:7) at HTMLUListElement.dispatch (jquery-3.1.1.min.js:3) at HTMLUListElement.q.handle (jquery-3.1.1.min.js:3) ga.error @ jquery-3.1.1.min.js:2 ga.tokenize @ jquery-3.1.1.min.js:2 ga.select @ jquery-3.1.1.min.js:2 ga @ jquery-3.1.1.min.js:2 find @ jquery-3.1.1.min.js:2 r.fn.init @ jquery-3.1.1.min.js:2 r @ jquery-3.1.1.min.js:2 (anonymous) @ mdb.min.js:7 dispatch @ jquery-3.1.1.min.js:3 q.handle @ jquery-3.1.1.min.js:3 Am I doing something wrong? Do i have something misconfigured or not included properly?

Add comment

Steve Stacha pro answered 6 years ago

1 0 Best answer

I don't understand the velocity error; it went away somehow, however, I think I figured the rest out. There were a couple of problems:

First and foremost, I copied one of the landing page menus from the downloaded distribution which is a one page scroller. The code that applies the smooth scrolling when you hit an anchor menu item does not account for regular links that jump you somewhere else as written. You have a couple of options.
1) If you don't need anchor elements in your menu because you are changing ALL of them to page links then all you need to do is remove the smooth-scroll from the copied <ul> element. Smooth scrolling will not execute and links will behave normally.
2) If you do need both anchor links on the same page and external menu links you can apply the following patch to the mdb.js:
At or around line 14723 you will find a smooth scrolling block of code:
<code>
//SMOOTH SCROLL
$(".smooth-scroll").on('click', 'a', function(event) {
event.preventDefault();
var elAttr = $(this).attr('href');
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);
}
});
</code>

Replace that code with this code which checks to make sure it is an anchor first otherwise does nothing:
<code>
//SMOOTH SCROLL
$(".smooth-scroll").on('click', 'a', function(event) {
var elAttr = $(this).attr('href');
var offset = ($(this).attr('data-offset') ? $(this).attr('data-offset') : 0);
var setHash = $(this).closest('ul').attr('data-allow-hashes');
// sas 12.02.17 : if the elAttr is a # we want to do this; normal links need to skip (redirect to other page)
if (typeof elAttr !== 'undefined' && elAttr.startsWith('#')) {
event.preventDefault();
$('body,html').animate({
scrollTop: $(elAttr).offset().top - offset
}, 700);
if (typeof setHash !== typeof undefined && setHash !== false) {
history.replaceState(null, null, elAttr);
}
}
});
</code>

I will post a suggestion to include this line in the base code. If anyone chooses to do this they will need to run minification and replace the mdb.min.js in the js folder. I hope this weekend of debugging helps someone.

Please insert min. 20 characters.

I don't understand the velocity error; it went away somehow, however, I think I figured the rest out. There were a couple of problems: First and foremost, I copied one of the landing page menus from the downloaded distribution which is a one page scroller. The code that applies the smooth scrolling when you hit an anchor menu item does not account for regular links that jump you somewhere else as written. You have a couple of options. 1) If you don't need anchor elements in your menu because you are changing ALL of them to page links then all you need to do is remove the smooth-scroll from the copied <ul> element. Smooth scrolling will not execute and links will behave normally. 2) If you do need both anchor links on the same page and external menu links you can apply the following patch to the mdb.js: At or around line 14723 you will find a smooth scrolling block of code:


//SMOOTH SCROLL
$(".smooth-scroll").on('click', 'a', function(event) {
event.preventDefault();
var elAttr = $(this).attr('href');
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);
}
});

Replace that code with this code which checks to make sure it is an anchor first otherwise does nothing:


//SMOOTH SCROLL
$(".smooth-scroll").on('click', 'a', function(event) {
var elAttr = $(this).attr('href');
var offset = ($(this).attr('data-offset') ? $(this).attr('data-offset') : 0);
var setHash = $(this).closest('ul').attr('data-allow-hashes');
// sas 12.02.17 : if the elAttr is a # we want to do this; normal links need to skip (redirect to other page)
if (typeof elAttr !== 'undefined' && elAttr.startsWith('#')) {
event.preventDefault();
$('body,html').animate({
scrollTop: $(elAttr).offset().top - offset
}, 700);
if (typeof setHash !== typeof undefined && setHash !== false) {
history.replaceState(null, null, elAttr);
}
}
});

Add comment

Jakub Strebeyko staff answered 6 years ago

0 0 Best answer

Please insert min. 20 characters.

Dear Steve, Thanks you for taking time and doing what you did throughout the weekend. The problem you've encountered is caused by smooth-scroll indeed, as it cannot "smooth-scroll" you into a separate webpage. To have both same page smooth-scroll and regular, resourced outside page links in your navbar, please consider moving smooth-scroll CSS class from the navbar itself to respective li elements hosting links to properly ided elements of your page. With Best Regards, Kuba

Steve Stacha pro commented 6 years ago

I went ahead and moved the about us block in the footer to a different page so I could just remove the smooth-scroll altogether. You might still consider adding a check beforehand anyway. I can't think of why you wouldn't want to skip the scrolling on anything that is not an anchor (starts with a #) and I wasn't the only one confused when using the templates we bought. I think people copying one of your pages and slowly trying to switch out links in the header as they create new pages will be a common occurrence. The less changes to tags we have to remember to make the better.

Please insert min. 15 characters.

Jakub Strebeyko staff commented 6 years ago

It's all true, Steve. With the help of people like you we get new insights we use to improve MDB. Thanks again!

Add comment

Closed

This topic is closed.

FREE CONSULTATION

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

Status

Closed

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB jQuery
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

Steve Stacha

Pro User 21Support score
1Questions 2Answers 0Snippets