I want to to make my website have multiple context menus

Question

Hi I want my website to have multiple context menus each answering to a right-click inside a div. (different menus for different divs). The problem is all the menus I found so far don't allow me to use this html 5 force download link:

<a href="Title Blue.png" download="Title Blue.png">Download Title Picture</a>

I want this to be the link for one of the items on my context menu.

I found this piece of script but it doesn't work because there is a syntax error somewhere in it.

<script>
$(document).bind(“contextmenu”,(e)) {
   e.preventDefault();                 // To prevent the default context menu.
   $(“#cntnr”).css(“left”, e.pageX);   // For updating the menu position.
   $(“#cntnr”).css(“top”, e.pageY);    // 
   $(“#cntnr”).fadeIn(500, startFocusOut()); //  For bringing the context menu in picture.
};
function startFocusOut() {
    $(document).on(“click”, function () {   
        $(“#cntnr”).hide(500);              // To hide the context menu
        $(document).off(“click”);           
    });
}
$(“#items > li”).click(function () {
    $(“#op”).text(“You have selected “ + $(this).text());  // Performing the selected function.
});
</script>"

The other half is just standard html list which would be compatible with my html 5 download link:

<span id=”op”>Demo Time</span> // For showing output.
  <div id=’cntnr’>                         // Context menu container. 
    <ul id=’items’>                        // List of items in context menu.   
      <li>Item1</li>                      // Items to show in context menu. 
      <li>Item2</li>
      <li>Item3</li>
      <li>Item4</li>
      <li>Item5</li>
    </ul>
  </div>

Can anyone identify the error or give me away of using my html 5 link inside a different context menu?

Thanks

Answer 1

First you need to change all ” in your code with ' or "

HTML:

<a href="Title Blue.png" download="Title Blue.png">Download Title Picture</a>

<span id='op'>Demo Time</span> 
  <div id='cntnr'>                         
    <ul id='items'>                      
      <li>Item1</li>                     
      <li>Item2</li>
      <li>Item3</li>
      <li>Item4</li>
      <li>Item5</li>
    </ul>
  </div>

JS:

$(document).bind('contextmenu',function(e) {
   e.preventDefault();                 // To prevent the default context menu.
   $('#cntnr').css('left', e.pageX);   // For updating the menu position.
   $('#cntnr').css('top', e.pageY);    // 
   $('#cntnr').fadeIn(500, startFocusOut()); //  For bringing the context menu in picture.
});
function startFocusOut() {
    $(document).on('click', function () {   
        $('#cntnr').hide(500);              // To hide the context menu
        $(document).off('click');           
    });
}
$('#items > li').click(function () {
    $('#op').text('You have selected ' + $(this).text());  // Performing the selected function.
});

Working Fiddle here