I downloaded a one pager template which is designed very strange. All hyperlinks are linking to sections on the page and it is using a data-link="" parameter.

Now I try to link one of the menu items to an external url with target _blank, but then it is looking for the url that I defined on the page itself (so it is looking for the section which is not there e.g. www.example/)

The links has a value on the href elements like this:

href="/home/" or href="/menu/"

<ul id="w1" class="navbar-nav nav">
    <li><a id="navhome" class="" href="/home" title="Home" data-link="home">Home</a></li>
    <li><a id="navmenu" class="" href="/menu" title="Menu" data-link="menu">Menu</a></li>

So this doesn't work (also without the target _blank:

<li><a id="navorder" href="" target="_blank">Order Now</a></li>

What technology is used here? And how can I link a new menu item to a external page?

EDIT:

I found the code that is handling the href:

$(".menu ul li a").not('.social-link').click(function(e) {
    e.preventDefault();
    $(".menu ul li a").removeClass("active");

    tabTarget = $(this).data('link');
    animateByMenu = true;

    var hash = '#' + tabTarget;
    var url = $(this).prop('href');
    var menuItem = $(this).data('link');
    $(".menu li a[data-link=" + menuItem + "]").addClass("active");

    if (url) {
        var top = $(hash).offset().top - 60;
        $('html, body').animate({
            scrollTop: top
        }, 600, function(){

        });
        history.pushState('', '', url);
        $('.navbar-toggle:visible').click();
    }

    return false;

});

And when I click the link it is giving me the following error in console:

main.js:109 Uncaught TypeError: Cannot read property 'top' of undefined
at HTMLAnchorElement.<anonymous> (main.js:109)
at HTMLAnchorElement.dispatch (jquery.min.js:3)
at HTMLAnchorElement.r.handle (jquery.min.js:3)

I downloaded a one pager template which is designed very strange. All hyperlinks are linking to sections on the page and it is using a data-link="" parameter.

Now I try to link one of the menu items to an external url with target _blank, but then it is looking for the url that I defined on the page itself (so it is looking for the section which is not there e.g. www.example./http://google.nl)

The links has a value on the href elements like this:

href="/home/" or href="/menu/"

<ul id="w1" class="navbar-nav nav">
    <li><a id="navhome" class="" href="/home" title="Home" data-link="home">Home</a></li>
    <li><a id="navmenu" class="" href="/menu" title="Menu" data-link="menu">Menu</a></li>

So this doesn't work (also without the target _blank:

<li><a id="navorder" href="http://order.pany." target="_blank">Order Now</a></li>

What technology is used here? And how can I link a new menu item to a external page?

EDIT:

I found the code that is handling the href:

$(".menu ul li a").not('.social-link').click(function(e) {
    e.preventDefault();
    $(".menu ul li a").removeClass("active");

    tabTarget = $(this).data('link');
    animateByMenu = true;

    var hash = '#' + tabTarget;
    var url = $(this).prop('href');
    var menuItem = $(this).data('link');
    $(".menu li a[data-link=" + menuItem + "]").addClass("active");

    if (url) {
        var top = $(hash).offset().top - 60;
        $('html, body').animate({
            scrollTop: top
        }, 600, function(){

        });
        history.pushState('', '', url);
        $('.navbar-toggle:visible').click();
    }

    return false;

});

And when I click the link it is giving me the following error in console:

main.js:109 Uncaught TypeError: Cannot read property 'top' of undefined
at HTMLAnchorElement.<anonymous> (main.js:109)
at HTMLAnchorElement.dispatch (jquery.min.js:3)
at HTMLAnchorElement.r.handle (jquery.min.js:3)

• javascript
• jquery
• html
• css

• 1 <a ... href="http://order.pany." ...> ... </a> should work fine... if it doesn't can you provide more code and context – oldboy Commented May 16, 2018 at 7:06
• remove data_link attribute <li><a id="navhome" class="" href="/home" title="Home">Home</a></li> because this attribute mean try to find a div container inside current page with id home – code.rider Commented May 16, 2018 at 7:09
• Try this <li><a id="navordernow" class="" href="order.pany." title="Order Now" data-link="order.pany.">Order Now</a></li> – Prachi Commented May 16, 2018 at 7:10
• IDK without see the code but perhaps the template has a script that captures all the click events on all links and is using preventdefault on the event to switch the value with the data-link to perform some type of scroll behavior – Ander Commented May 16, 2018 at 7:11
• oke I found the code that is handling the hrefs see edited post – Salihan Pamuk Commented May 16, 2018 at 7:38

4 Answers 4

There should be a piece of code capturing all "a" clicks and prevents them for their default behavior. Remove that data attribute and use simple href. That should work.

If the coder was so strict, then the solution above might not work. Then you should do some gymnastics like using a div maybe and attach a click handler to it.

So since we don't know what kinda template you use you could use this:

<ul id="w1" class="navbar-nav nav">
    <li><a id="navhome" class="" href="/home" title="Home" data-link="home">Home</a></li>
    <li><a onclick="window.open('http://www.google.', '_blank')">Menu</a></li>
</ul>

This will redirect you to another page in a new tab. Hope this works for you, it's just a simple workaround.

Ok, in this line:

$(".menu ul li a").not('.social-link').click(function(e) {

You could add a class to your links (.external-link) and remove from the selection:

$(".menu ul li a").not('.social-link').not('.external-link').click(function(e) {

Or you could be a little more clever and try to check if the link is external based on the href (the code only look for http, not https):

$(".menu ul li a").not('.social-link').click(function(e) {
    if (e.target.href.indexOf('http://') !== 0) {
        e.preventDefault();
    }
...

The most obvious thing that is happening is that JavaScript captures all links (perhaps with a more specific selector), prevents the default action (i.e. follow the link) and scrolls to the section. Something like this, in jQuery.

$("a").each(function(i, el) {
  const $el = $(el);
  $el.click(function(e) {
    const href = $el.attr("href");
    // Find an element that has href as an ID
    // Scroll to that element
    $("html, body").scrollTop($("#" + href).offset().top);
    // Prevent default action, i.e., don't follow the hyperlink
    // to a new location
    e.preventDefault();
  });
});

Following your edit. Firstly, that's some bad JS imo. But on topic: if you want to have some links to actually open a new page, add a new class to them. For instance, use a class external for external links.

<li><a id="navorder" href="http://order.pany." target="_blank" class="external">Order Now</a></li>

and change the first line of the jQuery snippet as follows, so that the click handler is not attached to your .external elements.

$(".menu ul li a").not('.social-link, .external').click(function(e) {