The hyperlinks are not functioning correctly on my template

I'm using a template with the following preview link:

The template includes an image of a laptop on the left side, with clickable points representing links.

My goal is to make these points clickable so that they open specific pages like mbank.pl or wp.pl when clicked.

Here's the code I have:

<script type="text/javascript">
    var pointCount = 0;
    $(document).ready(function () {

        $(".deleteMyAccount").click(function (e) {
            e.preventDefault();
            $('#dialog').modal('show');
        });
        // More JavaScript code...
    });

</script>
<!-- Additional modal windows and form elements -->

<section class="section_100">
    <!-- Section content -->
</section>

<a href="" class="btn btn-default btn-rounded mb-4 formAdd" data-toggle="modal" data-target="#modalSubscriptionForm"
   style="display:none"></a>

<script type="text/javascript">
    $(document).ready(function () {
        $('.imgpo').click(function (e) {
            // Image click functionality
        });

        // Other JavaScript functionalities...

    });
</script>

I am encountering an issue where clicking on the selected page does not redirect as intended. Do you know how to resolve this?

Any help or suggestions would be greatly appreciated. Thank you!

Answer ā„–1

When crafting a URL for the href tag, remember to include "http://", "https://", or "//" at the beginning. Failure to do so will result in the URL being treated as relative (for example: ).

To ensure links work properly, always add the appropriate protocol at the start of the link.

Answer ā„–2

It seems like the event is being blocked in this section:

$('.tooltips').on('click', (ev) => {
            ev.stopPropagation();
});

You may want to try commenting out that block and making a modification to the code below:

$(document).ready(function () {

        $('.imgpo').click(function (e) {
            // var posX = $(this).position().left, posY = $
            [...]
            $('.formAdd').click();
        });

Instead of removing the ";" at the end, consider adding the following directly after the closing bracket ")":

.children().click(function() {
  return false;
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What could be causing the issue with the malfunctioning Ajax pagination?

I attempted to incorporate ajax-loaded pagination into my project. I successfully followed a tutorial for implementing it in a blank project, but when trying to apply it to my current project, I encountered issues. Although I can navigate through the pagin ...

What is the method to integrate PHP with HTML code?

Apologies if this question has been asked before, but I have not found anyone with the same query as mine. I am new to HTML and PHP, and I am looking to enhance my skills by creating a registration form and storing all the data in a MySQL database using XA ...

What is the process of invoking a Java method through AJAX on a website?

I am trying to figure out how to call the Java method getMessage() from a jar file whenever a button on my webpage is clicked. Can anyone help me achieve this? File name: index.html <!doctype html> <html> <head> <meta charset="utf-8" ...

Submitting two arrays via form

Having trouble getting a form to submit. The form should allow the user to select a task, then display several rows with checkboxes and dropdown selects with values ranging from 1-10. If a checkbox is selected, the values from the corresponding select sh ...

Tips on incorporating a button to enable text formatting to 'bold' within a Text Area on an HTML webpage:

In the process of creating an online text editor, I am looking to incorporate a button above the text area that can be used to make selected text and/or upcoming text bold. To provide more clarity, I envision adding a bold button similar to the one found a ...

Eliminate the div element using jQuery if it contains a line break tag but no text

I am faced with a situation on a page where some div elements contain content while others only have a BR tag. I am attempting to remove the div elements that contain only the BR tag. Below is the HTML format in question: Here is an example of one type: ...

What is the best way to merge two tables together using the server-side JQuery Datatable plugin?

I recently came across an amazing example of a server-side ColdFusion jQuery datatable on this website: Check it out here However, I am facing an issue with adding a second table in the lookup. Specifically, while the primary table lists location_id, I al ...

Unsuccessful retrieval of hidden property's value following ajax request

While using my web app, I encountered an issue with my ajax script that submits form data to a different div based on an input tag within the submitting form. Everything works smoothly until the moment the ajax script needs to read the returned ajax data. ...

Issue with jQuery .hover() not functioning as expected

The issue I'm encountering is just as described in the title. The code functions correctly on all divs except for one! $(".complete-wrapper-1").hide(); var panelHH = $(".file-select-wrapper").innerHeight; $(".files-button").hover(function(){ $(" ...

Integrating a footer into the enhanced search tab slider

I'm struggling to create a sticky footer like the one on w3schools. Even though I used the same code in my material UI demo, it's not functioning properly. I tried debugging by changing the position from fixed to absolute, but it still isn&apos ...

What could be the reason for my Vue application failing to load, even though the mounted event is being triggered

Here's an interesting scenario. The code functions correctly in CodePen and even in Stack Overflow's code renderer, but it fails to work on my GitHub Pages site. No errors are triggered, and the console logs for the created and mounted events ex ...

How can I iterate over an array in JavaScript to create posts for an HTML feed using Bootstrap?

I have created a simple Bootstrap website in HTML that resembles a news feed. To populate the feed with various posts, I am using Javascript to work with arrays containing images, headlines, and captions for each post. My initial approach involves looping ...

Modification of encapsulated class in Angular is not permitted

Within Angular, a div element with the class "container" is automatically created and inserted into my component's HTML. Is there a way to modify this class to "container-fluid"? I understand that Angular utilizes encapsulation, but I am unsure of how ...

Variations in speed with closely related jQuery expressions in Internet Explorer

When running in Internet Explorer, test the performance of executing an expression like: $('div.gallery div.product a"); against a similar expression: $('div.gallery').find("div.product").find("a"); It has been found that sometimes the s ...

Sending a parameter to a different function (on a separate webpage)

At the start of my webpage, there are two radio buttons on the first page, each with its own value. Upon clicking a link to move to the second page, a for loop is activated to grab the value of the selected button. The script has been tested and works as e ...

How to Ensure Uniform Visual Border-Radius Across Buttons of Varying Sizes with CSS calc() Function

Iā€™m currently tackling a project that involves the use of two buttons with different sizes. Despite both buttons having the same specified border-radius of 6px, they seem to display differently in the browser. The smaller button appears to have a larger ...

Unexpected outcome: Laravel query yields multiple results instead of a single object

I have a 'posts' table and a 'post_images' table. I am attempting to retrieve data from both tables and also link the 'users' table to it. While the query is functional, it is returning separate objects for each post image. H ...

Troubleshooting issues when utilizing flexbox in Firefox and Chrome version 48

Chrome 47 Behavior: The .scroll div scrolls correctly in Chrome 47, taking up 100% height using flex. Firefox Behavior: In Firefox, the .scroll div does not scroll properly and instead uses the content height. What is the solution that works across diffe ...

What is the best way to utilize an onClick on a button to update a value that is being utilized in a useEffect hook?

I am looking for a way to dynamically change the content displayed in this section without navigating to another page. I have two sets of data - one displaying all blogs and the other showing only blogs authored by "mario". How can I implement a button cli ...

What is the process for implementing the tooltip plugin within a modal dialog in Twitter Bootstrap?

Hello there, I am currently using the latest version of Bootstrap, v2.1.1. I am trying to implement a tooltip in my modal dialog. <!DOCTYPE html> <html lang="zh-CN"> <head> <title>Bootstrap v2.1.1</title> <meta htt ...