A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://webplatform.github.io/docs/html/attributes/contextmenu below:

contextmenu ยท WebPlatform Docs

contextmenu Summary

Used to associate the menu element in the DOM to the given element as its context menu.

Applies to html/elements/menu

The contextmenu attribute allows a developer to modify the menu shown upon interacting with an element. Its value must be set to be the ID of a **menu** element contained within the DOM which has a type of context.

Examples 
<!doctype html>
<title>Demo for contextmenu attribute</title>

<img src="/logo/logo-with-text.png" alt="WPD" width="500" height="500" contextmenu="imageMenu">


<menu id="imageMenu" type="context">
    
    <menu label="resize">
        
        <menuitem label="Increase" id="increaseImageSize">
        <menuitem label="Decrease" id="decreaseImageSize">
    </menu>
</menu>

<script>


var increaseItem = document.getElementById('increaseImageSize'),
    decreaseItem = document.getElementById('decreaseImageSize'),
    image = document.querySelector('[contextmenu="imageMenu"]'),
    increaseSize,
    decreaseSize;

    
    
    
    increaseSize = function () {
        image.width = image.width + 100;
        image.height = image.height + 100;
    };
    decreaseSize = function () {
        image.width = image.width - 100;
        image.height = image.height - 100;
    };

    
    
    increaseItem.addEventListener("click", increaseSize);
    decreaseItem.addEventListener("click", decreaseSize);
</script>

View live example

Usage 
 This feature may only work in Firefox currently. (Untested in IE and Safari.)
Related specifications
HTML5
Candidate Recommendation

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4