Reply to thread

Message

<blockquote data-quote="Finley" data-source="post: 289468" data-attributes="member: 7334">Hi there,I am going to explain to you how to make your custom right-click contextmenu. I am going to explain every part.It is very simple. We will be using jQuery so include the library in your &lt;head&gt; tag.I am asuming you have the [very, very] basic knowledge of HTML, CSS and JavaScriptStep 1We begin with creating an simple eventlistener.[code]window.addEventListener('contextmenu', function(e) {&nbsp; &nbsp; // When you click on the contextmenu, trigger this function})[/code]Step 2In this step we will be creating the 'pop-up' of our own context menu. We are using the jQuery .css() function for that.[code]&nbsp; &nbsp; $('.rightclickmenu').css({ // $('CHANGE_THIS_TO_YOUR_MENU_CLASS')&nbsp; &nbsp; &nbsp; &nbsp; &quot;margin-left&quot;: e.clientX, // position of the mouse X&nbsp; &nbsp; &nbsp; &nbsp; &quot;margin-top&quot;: e.clientY // position of the mouse Y&nbsp; &nbsp; }).show() // Showing the actual menu[/code]Step 3In the 3rd step we are going to disable the default context menu, so it doesn't show up when you right-click your screen.For this, is one simple line needed.[code]e.preventDefault();[/code]Step 4In the 4th and final step we are going to make the custom menu dissapear, as soon as you click somewere out of the menu.We will be using another eventlistener for that[code]window.addEventListener('click', function(){ // as soon as you click&nbsp; &nbsp;&nbsp; $('.rightclickmenu').hide(); // hide the contextmenu})[/code]Okay then, lets put it all together nowIt will look something like this:[code]window.addEventListener('contextmenu', function(e) {&nbsp; &nbsp; $('.rightclickmenu').css({&nbsp; &nbsp; &nbsp; &nbsp; &quot;margin-left&quot;: e.clientX,&nbsp; &nbsp; &nbsp; &nbsp; &quot;margin-top&quot;: e.clientY&nbsp; &nbsp; }).show()&nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; window.addEventListener('click', function(){&nbsp; &nbsp; &nbsp; &nbsp; $('.rightclickmenu').hide();&nbsp; &nbsp; })}) [/code]For a full HTML page: <a href="http://pastebin.com/SKtFiEgL" target="_blank">http://pastebin.com/SKtFiEgL</a>For a live demo: <a href="http://finleyhd.nl" target="_blank">http://finleyhd.nl</a>Kind regardsFinley</blockquote>

[QUOTE="Finley, post: 289468, member: 7334"] Hi there, I am going to explain to you how to make your custom right-click contextmenu. I am going to explain every part. It is very simple. We will be using jQuery so include the library in your <head> tag. I am asuming you have the [very, very] basic knowledge of HTML, CSS and JavaScript [b]Step 1[/b] We begin with creating an simple eventlistener. [code] window.addEventListener('contextmenu', function(e) { // When you click on the contextmenu, trigger this function }) [/code] [b]Step 2[/b] In this step we will be creating the 'pop-up' of our own context menu. We are using the jQuery .css() function for that. [code] $('.rightclickmenu').css({ // $('CHANGE_THIS_TO_YOUR_MENU_CLASS') "margin-left": e.clientX, // position of the mouse X "margin-top": e.clientY // position of the mouse Y }).show() // Showing the actual menu [/code] [b]Step 3[/b] In the 3rd step we are going to disable the default context menu, so it doesn't show up when you right-click your screen. For this, is one simple line needed. [code] e.preventDefault(); [/code] [b]Step 4[/b] In the 4th and final step we are going to make the custom menu dissapear, as soon as you click somewere out of the menu. We will be using another eventlistener for that [code] window.addEventListener('click', function(){ // as soon as you click $('.rightclickmenu').hide(); // hide the contextmenu }) [/code] [b]Okay then, lets put it all together now[/b] It will look something like this: [code] window.addEventListener('contextmenu', function(e) { $('.rightclickmenu').css({ "margin-left": e.clientX, "margin-top": e.clientY }).show() e.preventDefault(); window.addEventListener('click', function(){ $('.rightclickmenu').hide(); }) }) [/code] For a full HTML page: [URL]http://pastebin.com/SKtFiEgL[/URL] For a live demo: [URL]http://finleyhd.nl[/URL] Kind regards Finley [/QUOTE]

Verification

Reply to thread

Connect with us

Newest members