Context menu in jQuery

Content menu for every element on the page. NOTE: same functionality can be used in restricting the context-menu on the page.

by Avinash_R

HTML

<div id='element'>
    <p>A context menu (also called contextual, shortcut, and popup or pop-up menu) is a menu in a graphical user interface (GUI) that appears upon user interaction, such as a right mouse click or middle click mouse operation. A context menu offers a limited set of choices that are available in the current state, or context, of the operating system or application. Usually the available choices are actions related to the selected object.</p>
<br><p>Context menus first appeared in the Smalltalk environment on the Xerox Alto computer, where they were called pop-up menus. The NEXTSTEP operating system further developed the idea, incorporating a feature whereby the right or middle mouse button brought the main menu (which was vertical and automatically changed depending on context) to the location of the mouse, thereby eliminating the need to move the mouse pointer all the way across the large (for the time) NextStep screen.</p>
</div>

CSS

body{
    height:100%;
    width: 100%;
}
div#element{
    height:100px;
    overflow: hidden;
    width:97%;
}
div#element:hover{
    overflow: auto;
    width:auto;
}

JavaScript

$(function() {
    var $elem = $('#element').bind('contextmenu oncontextmenu', function() {
        alert('context menu!!!');
        return false;
    });
    $(document).bind('contextmenu oncontextmenu', function() {
        alert('context menu for whole page!!!');
        return false;
    }).bind('selectstart', function() {
        return false;
    });

})