Indicate position: absolute instead of position: fixed. Here:
...
$("#rmenu").css({
position: "absolute",
top: e.pageY,
left: e.pageX
});
...
Solution 1 :
Solution 2 :
Well i will suggest you to convert your images or whole HTML page into canvas.If the purpose is to hide code or not to download images.
Problem :
I want to disable right-click on an image. When a user right-clicks on an image, I want it to show a message (please run the code snippet below).
In the code below, I have two images. If I right-click on the top of the image, it pops up a window and says “Right click not allowed”. However, if I scroll down and right-click on the image, this pop-up window shows up at the bottom of the website.
Can you please tell me how can I make this pop-up window open up at the place where I am right-clicking? (for example, if I right-click on the second image, this popup window doesn’t even show up).
<script>
if (document.getElementById('test1').addEventListener) {
document.getElementById('test1').addEventListener('contextmenu', function(e) {
$("#rmenu").toggleClass("hide");
$("#rmenu").css({
position: "fixed",
top: e.pageY,
left: e.pageX
});
e.preventDefault();
}, false);
}
$(document).bind("click", function(event) {
document.getElementById("rmenu").className = "hide";
});
</script>Comments
Comment posted by D P.
The code shown is for testing purposes to learn about the subject. It is not to annoy anyone.
Comment posted by Andrew Ray
Okay, for learning purposes, that’s fine. It just drives me insane when people do it in the real world without justification.
Comment posted by jsfiddle.net/T32ZV
@DP., Try setting up an event with a target specifically for img tag, like here –
Comment posted by D P.
Thank you for all your help. Appreciate it.