I have searched around but no question seems to address this concern.

I have the following markup:

<li>
  <div class="box-brochure-slide" onclick="window.location='product.php?item=TEC%2FSR-888HP-SS';">
    <div class="boxInner-item">
            <div class="triangle-topright-cover"></div>
      <div class="triangle-topright-red"></div>
      <div class="label-limitedsets">LIMITED SETS</div>
      <img class="lazy" alt="" src="img/pixel.png" data-original="user/picture/TEC-SR-888HP-SS.jpg">
      <div class="ui content">
                <div class="productbrand">TECNO</div>
        <div class="productname">TECNO SR-888HP-SS 2 X HI POWER BURNERS, 1 X MED BURNER, <br>BATTERY AUTO IGNITION</div>
        <div class="price">
          <div class="specialprice"><div class="specialprice-name">Crazy Price</div><span class="pricecurrency">$</span>488<span class="pricecents">00</span></div>
          <div class="usualprice">U.P. $588.00</div>
        </div>
      </div>
    </div>
  </div>
</li>

However, when I try to right click on the <li> on the web page, there was not an option for me to open in a new tab. What is wrong with the markup here?

Edit: I have read in some sources that <a> would solve the problem, but I do not wish to wrap the entire <li> in an anchor tag. Is there a way to do this?

Note: I do not wish to right click to OPEN in a new tab. I just wish to have an option available to open in a new tab when I right click on it.

I have searched around but no question seems to address this concern.

I have the following markup:

<li>
  <div class="box-brochure-slide" onclick="window.location='product.php?item=TEC%2FSR-888HP-SS';">
    <div class="boxInner-item">
            <div class="triangle-topright-cover"></div>
      <div class="triangle-topright-red"></div>
      <div class="label-limitedsets">LIMITED SETS</div>
      <img class="lazy" alt="" src="img/pixel.png" data-original="user/picture/TEC-SR-888HP-SS.jpg">
      <div class="ui content">
                <div class="productbrand">TECNO</div>
        <div class="productname">TECNO SR-888HP-SS 2 X HI POWER BURNERS, 1 X MED BURNER, <br>BATTERY AUTO IGNITION</div>
        <div class="price">
          <div class="specialprice"><div class="specialprice-name">Crazy Price</div><span class="pricecurrency">$</span>488<span class="pricecents">00</span></div>
          <div class="usualprice">U.P. $588.00</div>
        </div>
      </div>
    </div>
  </div>
</li>

However, when I try to right click on the <li> on the web page, there was not an option for me to open in a new tab. What is wrong with the markup here?

Edit: I have read in some sources that <a> would solve the problem, but I do not wish to wrap the entire <li> in an anchor tag. Is there a way to do this?

Note: I do not wish to right click to OPEN in a new tab. I just wish to have an option available to open in a new tab when I right click on it.

• javascript
• jquery
• html
• css

• 1 Open in new tab only appears on anchor a tags – Mairaj Ahmad Commented Nov 23, 2016 at 4:21
• @Leopard That means there is no way I can get the Open in new tab option appear when I right click unless I wrap them with an anchor? – iWillGetBetter Commented Nov 23, 2016 at 4:26
• 2 @iWillGetBetter correct, otherwise, there is nothing to open in a new tab. The context menu is not aware of your js function – Wesley Smith Commented Nov 23, 2016 at 4:27
• 1 Here is an example of how you could use a custom context menu if you were so inclined jsfiddle/unzjakt0/70 – Wesley Smith Commented Nov 23, 2016 at 4:43
• 1 @DelightedD0D That's really helpful! Thanks! :) – iWillGetBetter Commented Nov 23, 2016 at 6:59

4 Answers 4

Although you don't want to use the element but if you replace the topmost div with "a" leaving the class id and css intact, you will get the same look and feel with the option of "open in new tab" as well.

For that purpose you need to use <a> tag and pass the href property to the tag

To Open in new tab on right click first we need to check the mouse click event and then open the link.

<div id="open">open</div>

$('#open').mousedown(function(event) {
if(event.which == 3) {        //Right click event
   window.open('http://google.','_newtab'); // To open in new tab
} else{
   alert('Please Right click to open');
}});

Working Code Pen

Another easiest way which I had used is , put the innermost clickable link inside an anchor. Here the product name. Then give href only for that anchor. Then for the anchor style, add this css.

a::after{
content:"";
position: absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:2;
}

And for the top most parent provide position relative. This worked well for me. The entire content was acting as anchor tag and was displaying context menu. And if you want something inside that card not to be clickable with this anchor, provide a greater z-index value.