<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
<title>
Contextmenu – doctypehtml.net – doctypehtml.net
</title>
<base href="http://doctypehtml.net/">
<link rel="stylesheet" href="http://doctypehtml.net/assets/css/layout.css" type="text/css">
<link rel="stylesheet" href="http://doctypehtml.net/assets/css/mobile.css" type="text/css" media="screen and (max-width: 780px)">
<link href="http://fonts.googleapis.com/css?family=Maven+Pro" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script src="http://doctypehtml.net/assets/js/jquery.DOMWindow.js"></script><!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<link href="http://doctypehtml.net/html5/contextmenu/css/contextmenu.css" rel="stylesheet" type="text/css">
</head>
<body>
<a href="http://github.com/manuelbieh/doctypehtml.net"><img style="position: absolute; top: 0; right: 0; border: 0;" src=
"https://a248.e.akamai.net/assets.github.com/img/7afbc8b248c68eb468279e8c17986ad46549fb71/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67"
alt="Fork me on GitHub"></a>
<div id="wrapper">
<header>
<h1>
<a href="/"><!DOCTYPEhtml.net><br>
HTML5/CSS3 Demos + Experiments</a>
</h1>
</header>
<section id="content">
<section contextmenu="imagemenu">
<p>
Right-click the image to rotate and resize
</p>
<p style="text-align: center;">
<img src="http://doctypehtml.net/html5/contextmenu/images/html5.png" alt="HTML5" id="menudemo">
</p>
<menu type="context" id="imagemenu">
<menuitem label="Rotate" onclick="rotate()" icon="http://doctypehtml.net/html5/contextmenu/images/arrow_rotate_clockwise.png"></menuitem> <menuitem label="Resize" onclick=
"resize()" icon="http://doctypehtml.net/html5/contextmenu/images/image-resize.png"></menuitem>
<menu label="Social Media">
<menuitem label="Twitter" icon="http://doctypehtml.net/html5/contextmenu/images/twitter.png" onclick=
"location.href = 'http://twitter.com/?status=http://doctypehtml.net/html5/contextmenu&via=ManuelBieh'"></menuitem> <menuitem label="Facebook" icon=
"http://doctypehtml.net/html5/contextmenu/images/facebook.png" onclick=
"location.href = 'http://www.facebook.com/sharer/sharer.php?u=http://doctypehtml.net/html5/contextmenu';"></menuitem>
</menu>
</menu>
</section>
<section contextmenu="countmenu">
<h2>
Non-Interactive context menu
</h2>
<p>
Right-click anywhere in here to see context menu
</p>
<menu type="context" id="countmenu">
<menuitem class="wordcount" label="count words"></menuitem>
</menu>
<p class="demo">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
<section id="interactive" contextmenu="countmenuinteractive">
<h2>
Interactive context menu
</h2>
<p>
Right-click anywhere in here to see context menu - if you have nothing selected, the "count words" menu is not active.
</p>
<menu type="context" id="countmenuinteractive">
<menuitem class="wordcount" label="count words"></menuitem>
</menu>
<p class="demo">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
<script src="http://doctypehtml.net/html5/contextmenu/js/contextmenu.js"></script><br style="clear: both;">
</section>
</div>
<footer>
<div>
<a href="http://doctypehtml.net/index.html">Overview</a> – All examples are lovingly handcrafted by <a href="http://www.twitter.com/ManuelBieh">@ManuelBieh</a> | <a href=
"http://www.manuel-bieh.de/en/">http://www.manuel-bieh.de</a>. Inspired by <a href="http://www.html5demos.com">html5demos.com</a> from the great <a href=
"http://www.twitter.com/rem">@rem</a> | <a href="http://doctypehtml.net/viewsource/index.php?url=http://doctypehtml.net/html5/contextmenu" class="viewsource">view source</a> |
<iframe src="http://platform.twitter.com/widgets/tweet_button.html?url=http://doctypehtml.net/&via=manuelbieh" style=
"vertical-align: middle; width: 110px; height: 21px; overflow: hidden; border: 0;"></iframe> <iframe src=
"http://www.facebook.com/plugins/like.php?href=http://doctypehtml.net/&send=false&layout=button_count&width=130&show_faces=false&action=recommend&colorscheme=light&font&height=21"
style="vertical-align: middle; border:none; overflow:hidden; width:130px; height:21px; overflow: hidden; border: 0;"></iframe>
<div class="g-plusone" data-size="medium" data-count="true"></div>
</div>
</footer>
<script>
$('.viewsource').openDOMWindow({
height:'90%',
width:'90%',
positionType:'absolute',
positionTop:50,
eventType:'click',
positionLeft:'5%',
windowSource:'iframe',
windowPadding:0,
loader:1,
// loaderImagePath:'animationProcessing.gif',
loaderHeight:16,
loaderWidth:17
});
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-16083973-9']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
</body>
</html>