The option to "open in new tab" is absent from the right-click menu when clicking a link on a website

Why does the option to open a link in a new tab not appear when using JavaScript or jQuery, but it works with an anchor tag? I have tried using window.location and window.open, as well as adding the onclick attribute to a div, but the option still doesn't show up. Does it only work with anchor tags?

div class='miniShell'>          <!-- m1 m2 m3 m4 used for seperate goto links   search if 'mp3' you will find next usage -->
      <div class='mini' onclick="openLink('<?php echo $UrlA?>')"> <img src=''>  <div class="miniTitle"><?php echo ucwords($TitleA) ?></div>   </div>
      <div class='mini' onclick="openLink('<?php echo $UrlB?>')"> <img src=''><div class="miniTitle"><?php echo ucwords($TitleB) ?></div>   </div>
      <div class='mini' onclick="openLink('<?php echo $UrlC?>')"> <img src=''>  <div class="miniTitle"><?php echo ucwords($TitleC) ?></div>   </div>
      <div class='mini' onclick="openLink('<?php echo $UrlD?>')"> <img src=''><div class="miniTitle"><?php echo ucwords($TitleD) ?></div>   </div>
     </div>

using jQuery:

function openLink(link){
                 window.open('http://localhost/mysite/story/'+link,'_self');
             }

Browser:google chrome

Answer №1

An anchor element must be used to create a link, not a div. By replacing the div tag with an a tag, you can achieve the same result as your HTML currently redirects to a specific link but is not recognized as a valid link by the browser.

Answer №2

Building on the previous response by @Rigidity, it's important to note that a window.open is not simply a generic link but a JavaScript method. Because of this distinction, the browser won't recognize it as a traditional link and therefore the context menu typically associated with links won't appear within your div element.

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 is the best way to recycle a variable in TypeScript?

I am trying to utilize my variable children for various scenarios: var children = []; if (folderPath == '/') { var children = rootFolder; } else { var children = folder.childs; } However, I keep receiving the following error message ...

KnockoutJS is unable to assign a negative value to an input field

Is there a way to assign the value of an <input> as false? It seems to work fine with true. Data Model: function DataModel(){ self = this; self.Flag = ko.observable(false); }; HTML Code: <input type="text" data-bind="value:Flag"/> ...

Showing a section of a DIV inside an iframe

I have implemented an HTML object in the following way: <object id="foo" name="foo" type="text/html" data="mypage.aspx"> </object> However, I do not want to display the entire content of mypage.aspx within the HTML object/iframe. In ...

Limiting overflow:visible to input and select fields only

I'm currently facing an issue with a Lightning Web Component in Salesforce, however, I believe the root cause of this problem is not specific to this platform. Within my container div, I have row divs displaying select/combobox fields that need to ex ...

Adding a new column for each array element within a jQuery foreach loop is a simple task that

I have a request where I am receiving three arrays in JSON format and I want to showcase each array in its own column. How can I accomplish this task? Below is the $.post function: $.post("/booking/times", { id: $("#user_id").val(), ...

Add Content to Textbox by Clicking

In my current setup, I have a variety of buttons that, when clicked, should add the text from the button to a text box. Each time a button is clicked, I want the text to be appended to whatever is already in the input field. Current Approach $('#js- ...

In order to ensure functionality on Firefox 3 and Opera, it is essential to include multiple <script> tags and the <!-- //required for FF3 and

I have utilized Spring Roo to create a basic web project. The user interface is JSP-based with a Tiles layout. Upon examining the default layout code, I noticed that the script tags were defined as: <script src="${dojo_url}" type="text/javascript" > ...

Tips for preventing the unwanted portrayal of a rectangle on canvas?

As a beginner in javascript, I am currently learning about the canvas. I have a question regarding drawing rectangles from right to left and seeing negative numbers in the inputs. Is there a way to display the real size of the rectangle regardless of the d ...

Arrangement of elements with no space at the top

Does the position.top of an element with a top-margin set to a value larger than 0 get calculated from the top-left point of the element or its margin when retrieving its position? ...

Get the final element with a for loop in Angular 2

I am currently utilizing angular 2 in conjunction with mongoDb. The service I am employing is responsible for calling the API. Here is a snippet of my code: this.at represents a token, similar to fdfdsfdffsdf... This token serves as an authorization key ...

What can I do to stop hidden HTML tags from loading on my page? Is it possible to completely remove them from the page

I previously inquired about this question but did not receive a satisfactory answer. Here are the input fields I am working with: <form method ="post" action="select.php"> <input id="nol" style="width: 350px;" type="text" name="searchdisease" pl ...

Is there a way to remove information with react and axios?

While working on a project, I encountered an issue with using .map() to create a list. When I console log the user._id on my backend, it displays all the ids instead of just the one I want to use for deleting individual posts by clicking a button. Each pos ...

The magic of jQuery when chaining AJAX callback functions

I have a centralized ajaxSuccess callback function that needs to initialize components from various AJAX calls across the project. Here is an example: $(document).ajaxSuccess(function (response, status, xhr) { initComponents(); }); For module-level a ...

Equalizing the space between table headings and content

I am struggling with aligning the heading and entries in my table properly. https://i.stack.imgur.com/IYtY1.jpg My goal is to ensure that the heading and entries are perfectly aligned with each other. This is how my Table.jsx looks like: <div classNa ...

Choosing the most suitable stylesheet in Angular 8 when multiple CSS files are present

In my project, I have several CSS stylesheets for angular components. I am curious if there is a method to designate a preferred stylesheet when multiple sheets loaded by a component contain the same styles but with different values. ...

Ensure that the line above is shorter in length compared to the following line

Is there a way to ensure that the previous line of text is always shorter than the next one, even if the length of the text is unknown? For example: Lorem ipsum dolor sit amet, consectetur adipiscing et libero posuere pellentesque. Vivamus quis nulla jus ...

Utilizing the reduce method to transform an array containing nested arrays into a different structure

I'm having trouble figuring out how to restructure the array below. I attempted to utilize the reduce function in JavaScript but unfortunately, I couldn't make it work. So far, this is the function I have come up with: var comb = [] var setEle ...

Tips for replacing all occurrences of a specific string in HTML while preserving JavaScript attributes

Is there a way to use RegEx to replace part of an HTML document without affecting the root element or other elements like event listeners? Consider this scenario: for (; document.body.innerHTML.indexOf(/ea/) != -1;) { document.body.innerHTML = docu ...

Using the power of AJAX, retrieve data from a PHP script and showcase the response within

Within my HTML file, I have implemented a feature that allows users to input a value. To validate this input, I created a PHP script that checks if the entered value exists in the database. The script returns the following JSON response: {"active":true} ...

Backstretch.js experiencing issues with element functionality, but functioning correctly with body element

I'm having trouble getting backstretch to work on a div. It works perfectly when applied to the body with no errors, but when I try to apply it to a <div>, I get this error: Uncaught TypeError: Object [object Object] has no method 'backs ...