This hyperlink is not redirecting to an external website

Question

This hyperlink is not redirecting to an external website

I recently downloaded a one pager template that has a unique design. All the hyperlinks within the template are set to link to specific sections on the page and use a data-link="" parameter.

However, I encountered an issue when trying to link one of the menu items to an external URL with target _blank. Instead of directing me to the external page, it was looking for a section on the same page based on the URL I provided (e.g., www.example.com/).

The links in the template have href values 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>

Even when attempting without target _blank, the external linking did not work:

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

I am curious to know what technology is being used here and how I can successfully link a new menu item to an external page.

UPDATE:

I managed to locate the code responsible for 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;

});

Upon clicking the link, I am receiving the following error in the 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

Answer 1

Answer №1

To capture all "a" clicks and prevent their default behavior, it's important to implement a piece of code for that purpose. Try removing the data attribute and using a simple href instead. This approach should be effective.

If following strict coding guidelines poses an issue, consider implementing a workaround such as using a div element and attaching a click handler to it.

Answer 2

To capture all "a" clicks and prevent their default behavior, it's important to implement a piece of code for that purpose. Try removing the data attribute and using a simple href instead. This approach should be effective.

If following strict coding guidelines poses an issue, consider implementing a workaround such as using a div element and attaching a click handler to it.

Answer 3

Answer №2

If you are unsure about the type of template you are using, you can try implementing the following code snippet:

<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.com', '_blank')">Menu</a></li>
</ul>

By using this code, you will be redirected to another page in a new tab. Give it a try and see if it meets your needs as a simple workaround solution.

Answer 4

If you are unsure about the type of template you are using, you can try implementing the following code snippet:

<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.com', '_blank')">Menu</a></li>
</ul>

By using this code, you will be redirected to another page in a new tab. Give it a try and see if it meets your needs as a simple workaround solution.

Answer 5

Answer №3

Alright, let's take a look at this line:

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

If you want to exclude another class from the selection, you can add a new class (.external-link) and adjust the code like this:

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

Alternatively, you can make your code smarter by detecting external links based on their href attribute (currently only checking for http, not https):

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

Answer 6

Alright, let's take a look at this line:

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

If you want to exclude another class from the selection, you can add a new class (.external-link) and adjust the code like this:

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

Alternatively, you can make your code smarter by detecting external links based on their href attribute (currently only checking for http, not https):

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

Answer 7

Answer №4

One of the key observations is that JavaScript intercepts all links (potentially with a more specific selector), halts their default action (i.e., following the link), and smoothly scrolls to the designated section. Here's an example using jQuery:

$("a").each(function(i, el) {
  const $el = $(el);
  $el.click(function(e) {
    const href = $el.attr("href");
    // Locate the element with the matching ID
    // Scroll to said element
    $("html, body").scrollTop($("#" + href).offset().top);
    // Prevent default action to avoid redirecting
    e.preventDefault();
  });
});

Regarding your recent modification. Personally, I find the provided JS code lacking in quality. However, focusing on the issue: If you wish some links to open in a new tab, assign them a distinct class such as external.

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

Update the first line of the jQuery snippet as follows, ensuring that the click event handler excludes elements with the class .external:

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

Answer 8

One of the key observations is that JavaScript intercepts all links (potentially with a more specific selector), halts their default action (i.e., following the link), and smoothly scrolls to the designated section. Here's an example using jQuery:

$("a").each(function(i, el) {
  const $el = $(el);
  $el.click(function(e) {
    const href = $el.attr("href");
    // Locate the element with the matching ID
    // Scroll to said element
    $("html, body").scrollTop($("#" + href).offset().top);
    // Prevent default action to avoid redirecting
    e.preventDefault();
  });
});

Regarding your recent modification. Personally, I find the provided JS code lacking in quality. However, focusing on the issue: If you wish some links to open in a new tab, assign them a distinct class such as external.

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

Update the first line of the jQuery snippet as follows, ensuring that the click event handler excludes elements with the class .external:

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

This hyperlink is not redirecting to an external website

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The point in the vector data is incorrectly positioned on the map in OpenLayers

I tried utilizing the wrapper feature, but unfortunately, the modal did

Display everything when an option is clicked

Problem with Material-UI Drawer

What is the best way to update a specific section of my website by modifying the URL while keeping the menus fixed and the site functioning smoothly?

I'm receiving the error message "Fatal error: Call to a member function query() on a non-object," what could be causing this issue?

Facing issues with integrating Mixpanel with NestJS as the tracking function cannot be located

Most efficient method to upload numerous images without any lag

Trigger Element Upon Click

Issue with CORS when starting SAM local API

In AngularJS, modifying the value of a copied variable will result in the corresponding change in the value of the main

Establish a single route for executing two different statements in MSSQL: one for updating and the other for inserting data into the MS-SQL

Spinning html/css content using JavaScript

Unclear when notifying div content

Nuxt.js - Struggling to Remove Event Listener

Tips for maintaining the height of the outer div consistent with that of the inner div

Encountering an issue with Angular 5.2 application build on VSTS build server: Running into "CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory" error

Retrieve the value of the key in my AngularJS JSON object

Mocking Ext.Ajax.request in ExtJS 4.2.1 is a process of em

Is there a way to manage the iteration of $scope.$watch?