HTML5 contextmenu attribute

Question

I'm following a tutorial to create a HTML5 contextmenu, and have so far got the following lines of code in my website:

<a id="logo" href="http://mywebsite.com"  contextmenu="download-logo">                  
    <img class="default-logo" alt="My Website" src="http://mywebsite.com/logox2-standard.png" />
    <img class="retina-logo" alt="My Website" src="http://mywebsite.com/logox2-retina.png" /> 

    <menu type="context" id="download-logo">
        <menu label="Looking For Our Logo?">
            <menuitem label="Download High Resolution (45KB)" icon="http://www.mywebsite.com/logo-icon.jpg" onClick="window.location.href='http://www.mywebsite.com/logo-retina.zip'"></menuitem>
            <menuitem label="Download Low Resolution (20KB)" icon="http://www.mywebsite.com/logo-icon.jpg" onClick="window.location.href='http://www.mywebsite.com/logo-standard.zip'"></menuitem>
        </menu>     
    </menu>
</a>

This works perfectly fine when viewing the website in Mozilla Firefox, which is currently the only browser that supports it:

HTML contextmenu Attribute (W3Schools).

However, there is a polyfill available that will add additional support in other web browsers:

jQuery-contextMenu (GitHub).

How do I apply this polyfill to my current code above, once I've included the JavaScript file in to the <head> tag of my website?

Please keep in mind I'm not very familiar with JavaScript.

Thank you.

The have mantioned hot wo initialize the plugin in the usage section. Are you getting any bugs when you do that ? — Alok Swain
– Alok Swain, Commented May 29, 2014 at 10:09

James Donnelly · Accepted Answer · 2014-05-29 10:20:06Z

4

The menu and menuitem elements were featured in the initial HTML5 Candidate Recommendation but have since been removed. Firefox should not be handling these elements any more and other browsers are correct to ignore them.

In fact, the entire context menus section which was present in the 20121217 draft has been removed. Within that particular draft they're marked alongside other removed elements such as hgroup and command as:

The following features are at risk and may be removed due to lack of implementation.

So in short: you shouldn't use this at all as it's no longer featured in the specification. You should instead find alternative methods to achieve what you are trying to do.

edited May 29, 2014 at 10:20

answered May 29, 2014 at 10:14

James Donnelly

129k35 gold badges215 silver badges224 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Twifty Over a year ago

This doesn't answer the question "How do I apply this polyfill"! Infact, it is outright missleading. The polyfill creates a menu using js/css and doesn't integrate with the browser, so it is a perfectly valid implementation.

DylanYoung Over a year ago

@Twifty I sort of get your point, but the thing is there's no need to use a polyfill if there is zero browser support. You'd be better off writing your own library that uses the syntax that makes sense for your project rather than trying to polyfill a non-standard syntax that has been deprecated.

Collectives™ on Stack Overflow

HTML5 contextmenu attribute

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related