<input type="hidden" id="_wpnonce" name="_wpnonce" value="d589524ad4" /><input type="hidden" name="_wp_http_referer" value="/blog/wp-json/wp/v2/posts/3208" /><input type="hidden" id="_wpnonce" name="_wpnonce" value="d589524ad4" /><input type="hidden" name="_wp_http_referer" value="/blog/wp-json/wp/v2/posts/3208" />{"id":3208,"date":"2015-03-05T11:31:20","date_gmt":"2015-03-05T00:31:20","guid":{"rendered":"https:\/\/www.businesslegions.com\/blog\/?p=3208"},"modified":"2015-03-05T11:31:20","modified_gmt":"2015-03-05T00:31:20","slug":"how-to-disable-the-right-click-for-a-kiosk-website","status":"publish","type":"post","link":"https:\/\/www.businesslegions.com\/blog\/2015\/03\/05\/how-to-disable-the-right-click-for-a-kiosk-website\/","title":{"rendered":"How to disable the right click for a Kiosk website"},"content":{"rendered":"<!--CusAds0--><p>In the past several post you may have noticed that I&#8217;ve been writing quite a bit about Chrome and Kiosk. There is a reason for this as I&#8217;ve been involved in setting up a Kiosk for a project.\u00a0Now in this post I&#8217;m just going to write down how I disabled the right click (context menu) for a Kiosk website. I have discovered that disabling the Press and Hold setting in Windows did not actually disable this in Chrome. See below image as to what I&#8217;m refeering to:<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-medium wp-image-3209\" src=\"https:\/\/cdn.businesslegions.com\/blog\/wp-content\/uploads\/2015\/03\/Windows-Press-and-Hold-243x300.jpg?strip=all\" alt=\"Windows Press and Hold\" width=\"243\" height=\"300\" srcset=\"https:\/\/cdn.businesslegions.com\/blog\/wp-content\/uploads\/2015\/03\/Windows-Press-and-Hold-243x300.jpg?strip=all 243w, https:\/\/cdn.businesslegions.com\/blog\/wp-content\/uploads\/2015\/03\/Windows-Press-and-Hold.jpg?strip=all 568w, https:\/\/cdn.businesslegions.com\/blog\/wp-content\/uploads\/2015\/03\/Windows-Press-and-Hold.jpg?strip=all&amp;w=113 113w, https:\/\/cdn.businesslegions.com\/blog\/wp-content\/uploads\/2015\/03\/Windows-Press-and-Hold.jpg?strip=all&amp;w=340 340w, https:\/\/cdn.businesslegions.com\/blog\/wp-content\/uploads\/2015\/03\/Windows-Press-and-Hold.jpg?strip=all&amp;w=454 454w\" sizes=\"(max-width: 243px) 100vw, 243px\" \/><\/p>\n<p>So what I had to do was to include some code in the website page (as\u00a0is what is being displayed on the Kiosk).<\/p>\n<p>The code that I used is:<\/p>\n<div id=\"wpshdo_1\" class=\"wp-synhighlighter-outer\"><div id=\"wpshdt_1\" class=\"wp-synhighlighter-expanded\"><table border=\"0\" width=\"100%\"><tr><td align=\"left\" width=\"80%\"><a name=\"#codesyntax_1\"><\/a><a id=\"wpshat_1\" class=\"wp-synhighlighter-title\" href=\"#codesyntax_1\"  onClick=\"javascript:wpsh_toggleBlock(1)\" title=\"Click to show\/hide code block\">Source code<\/a><\/td><td align=\"right\"><a href=\"#codesyntax_1\" onClick=\"javascript:wpsh_code(1)\" title=\"Show code only\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/cdn.businesslegions.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/code.png?strip=all&w=960\" \/><\/a>&nbsp;<a href=\"#codesyntax_1\" onClick=\"javascript:wpsh_print(1)\" title=\"Print code\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/cdn.businesslegions.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/printer.png?strip=all&w=960\" \/><\/a>&nbsp;<a href=\"https:\/\/www.businesslegions.com\/blog\/wp-content\/plugins\/wp-synhighlight\/About.html\" target=\"_blank\" title=\"Show plugin information\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/cdn.businesslegions.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/info.gif?strip=all&w=960\" \/><\/a>&nbsp;<\/td><\/tr><\/table><\/div><div id=\"wpshdi_1\" class=\"wp-synhighlighter-inner\" style=\"display: block;\"><pre class=\"php\" style=\"font-family:monospace;\"><span class=\"sy0\">&lt;<\/span>script<span class=\"sy0\">&gt;<\/span>\nwindow<span class=\"sy0\">.<\/span>oncontextmenu <span class=\"sy0\">=<\/span> <span class=\"kw2\">function<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span> \n<span class=\"kw1\">return<\/span> <span class=\"kw4\">false<\/span><span class=\"sy0\">;<\/span> \n<span class=\"br0\">&#125;<\/span><span class=\"sy0\">;<\/span>\n<span class=\"kw2\">&lt;\/script&gt;<\/span><\/pre><\/div><\/div>\n<p>This disables the content menu function on that particular site but note that it&#8217;s only for this web page. If someone was to visit another web page the content menu will be displayed.<\/p>\n<p>Here&#8217;s an example code that displays a coming soon image on the web page.<\/p><!--CusAds0-->\n<p>&nbsp;<\/p>\n<div id=\"wpshdo_2\" class=\"wp-synhighlighter-outer\"><div id=\"wpshdt_2\" class=\"wp-synhighlighter-expanded\"><table border=\"0\" width=\"100%\"><tr><td align=\"left\" width=\"80%\"><a name=\"#codesyntax_2\"><\/a><a id=\"wpshat_2\" class=\"wp-synhighlighter-title\" href=\"#codesyntax_2\"  onClick=\"javascript:wpsh_toggleBlock(2)\" title=\"Click to show\/hide code block\">Source code<\/a><\/td><td align=\"right\"><a href=\"#codesyntax_2\" onClick=\"javascript:wpsh_code(2)\" title=\"Show code only\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/cdn.businesslegions.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/code.png?strip=all&w=960\" \/><\/a>&nbsp;<a href=\"#codesyntax_2\" onClick=\"javascript:wpsh_print(2)\" title=\"Print code\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/cdn.businesslegions.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/printer.png?strip=all&w=960\" \/><\/a>&nbsp;<a href=\"https:\/\/www.businesslegions.com\/blog\/wp-content\/plugins\/wp-synhighlight\/About.html\" target=\"_blank\" title=\"Show plugin information\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/cdn.businesslegions.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/info.gif?strip=all&w=960\" \/><\/a>&nbsp;<\/td><\/tr><\/table><\/div><div id=\"wpshdi_2\" class=\"wp-synhighlighter-inner\" style=\"display: block;\"><pre class=\"php\" style=\"font-family:monospace;\"><span class=\"sy0\">&lt;<\/span>html<span class=\"sy0\">&gt;<\/span>\n<span class=\"sy0\">&lt;<\/span>script<span class=\"sy0\">&gt;<\/span>\nwindow<span class=\"sy0\">.<\/span>oncontextmenu <span class=\"sy0\">=<\/span> <span class=\"kw2\">function<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span> \n<span class=\"kw1\">return<\/span> <span class=\"kw4\">false<\/span><span class=\"sy0\">;<\/span> \n<span class=\"br0\">&#125;<\/span><span class=\"sy0\">;<\/span>\n<span class=\"kw2\">&lt;\/script&gt;<\/span>\n<span class=\"sy0\">&lt;<\/span>body bgcolor<span class=\"sy0\">=<\/span><span class=\"st0\">&quot;#d2232a&quot;<\/span><span class=\"sy0\">&gt;<\/span>\n<span class=\"sy0\">&lt;<\/span>img src<span class=\"sy0\">=<\/span><span class=\"st0\">&quot;coming_soon.png&quot;<\/span> width<span class=\"sy0\">=<\/span><span class=\"st0\">&quot;1900&quot;<\/span> height<span class=\"sy0\">=<\/span><span class=\"st0\">&quot;1060&quot;<\/span><span class=\"sy0\">&gt;<\/span>\n<span class=\"sy0\">&lt;\/<\/span>body<span class=\"sy0\">&gt;<\/span>\n<span class=\"sy0\">&lt;\/<\/span>html<span class=\"sy0\">&gt;<\/span><\/pre><\/div><\/div><\/span>\r\n<\/pre>\n<p>In the above example, the webpage just displays a coming soon image. The script section disables the context menu. I had to change the body colour to red because the image was in red and didn&#8217;t want to show any white around it. The pixel size of the actual image was 1920&#215;1080 however when the image was loaded it displayed the scroll bars so to fix this issue I set the width and height to 1900&#215;1060 which fixed the problem.<\/p>\n<div class=\"lt-box\" style=\"border:1px solid #22a89f\"><div class=\"lt-box-title\" style=\"background-color:#2bd2c7;border-top:1px solid #aaede9;text-shadow:1px 1px 0 #0d3f3c\">HELP<\/div><div class=\"lt-box-content\">Did this article help? I believe there are better way to do this, if so please let me know.<\/div><\/div>\n<div class=\"lt-box\" style=\"border:1px solid #1d6a9e\"><div class=\"lt-box-title\" style=\"background-color:#2485C6;border-top:1px solid #a7cee8;text-shadow:1px 1px 0 #0b283b\">DO YOU LIKE WHAT YOU'VE READ?<\/div><div class=\"lt-box-content\">Join our subscription list and receive our content right in your mailbox. If you like to receive some Great deals our Freebies then subscribe now!\r\n\r\n<p><div class=\"tnp tnp-subscription \">\n<form method=\"post\" action=\"https:\/\/www.businesslegions.com\/blog\/wp-admin\/admin-ajax.php?action=tnp&amp;na=s\">\n<input type=\"hidden\" name=\"nlang\" value=\"\">\n<div class=\"tnp-field tnp-field-firstname\"><label for=\"tnp-1\">Name<\/label>\n<input class=\"tnp-name\" type=\"text\" name=\"nn\" id=\"tnp-1\" value=\"\" placeholder=\"\"><\/div>\n<div class=\"tnp-field tnp-field-email\"><label for=\"tnp-2\">Email<\/label>\n<input class=\"tnp-email\" type=\"email\" name=\"ne\" id=\"tnp-2\" value=\"\" placeholder=\"\" required><\/div>\n<div class=\"tnp-field tnp-field-button\" style=\"text-align: left\"><input class=\"tnp-submit\" type=\"submit\" value=\"Subscribe\" style=\"\">\n<\/div>\n<\/form>\n<\/div>\n<\/p>\r\n\r\n<\/div><\/div><!--CusAds0-->\n<div style=\"font-size: 0px; height: 0px; line-height: 0px; margin: 0; padding: 0; clear: both;\"><\/div>","protected":false},"excerpt":{"rendered":"<p>In the past several post you may have noticed that I&#8217;ve been writing quite a bit about Chrome and Kiosk. There is a reason for this as I&#8217;ve been involved in setting up a Kiosk for a project.\u00a0Now in this post I&#8217;m just going to write down how I disabled the right click (context menu) [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":3212,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[761,3],"tags":[599,1787,1777,1627,1786],"class_list":["post-3208","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-google-technology","category-technology","tag-chrome","tag-contextmenu","tag-disable","tag-kiosk","tag-rightclick"],"_links":{"self":[{"href":"https:\/\/www.businesslegions.com\/blog\/wp-json\/wp\/v2\/posts\/3208","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.businesslegions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.businesslegions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.businesslegions.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.businesslegions.com\/blog\/wp-json\/wp\/v2\/comments?post=3208"}],"version-history":[{"count":3,"href":"https:\/\/www.businesslegions.com\/blog\/wp-json\/wp\/v2\/posts\/3208\/revisions"}],"predecessor-version":[{"id":3213,"href":"https:\/\/www.businesslegions.com\/blog\/wp-json\/wp\/v2\/posts\/3208\/revisions\/3213"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.businesslegions.com\/blog\/wp-json\/wp\/v2\/media\/3212"}],"wp:attachment":[{"href":"https:\/\/www.businesslegions.com\/blog\/wp-json\/wp\/v2\/media?parent=3208"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.businesslegions.com\/blog\/wp-json\/wp\/v2\/categories?post=3208"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.businesslegions.com\/blog\/wp-json\/wp\/v2\/tags?post=3208"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}