Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

HTML5 context menus in Firefox 8+

DZone's Guide to

HTML5 context menus in Firefox 8+

· Web Dev Zone ·
Free Resource

Learn how error monitoring with Sentry closes the gap between the product team and your customers. With Sentry, you can focus on what you do best: building and scaling software that makes your users’ lives better.

Starting with version 8, Firefox supports HTML5 context menus. This post is a summary of “ HTML5 context menus in Firefox (Screencast and Code)” by Chris Heilmann for Mozilla Hacks.

Example: The following HTML source code defines a section with a context menu. The menu has one item and a sub-menu with two items.

    <section id="noninteractive" contextmenu="imagemenu">
 
      <img src="html5.png" alt="HTML5" id="menudemo">
 
        <menu type="context" id="imagemenu">
          <menuitem label="rotate" onclick="rotate()"
                    icon="arrow_rotate_clockwise.png">
          </menuitem>
          <menu label="share">
            <menuitem label="twitter" onclick="alert('not yet')">
            </menuitem>
            <menuitem label="facebook" onclick="alert('not yet')">
            </menuitem>
          </menu>
        </menu>
    </section>

 

Naturally, you don’t need to rely on inline event handlers, all usual registration methods are available. When the context menu is activated, it looks like this:

 

The article also covers:

  • How to check whether a browser supports context menus.
  • How to dynamically enable/disable menu items depending on what state and app is currently in (active selection etc.): A menu fires a contextmenu event every time it opens.
  • A CSS cursor called context-menu is available to give a visual clue as to where context menus are available.

You can try out context menus on a demo page.

 

Source: http://www.2ality.com/2011/11/ff8-html5-context-menus.html

What’s the best way to boost the efficiency of your product team and ship with confidence? Check out this ebook to learn how Sentry's real-time error monitoring helps developers stay in their workflow to fix bugs before the user even knows there’s a problem.

Topics:

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}