How to disable right-click with Javascript in bubble

Hello, fellow bubblers

I am trying to disable right-click on an image in Bubble using Javascript but I’m not sure how to go about it. I found this code online :point_down: but I don’t know how to implement it in Bubble.

<script>
document.addEventListener('contextmenu', event => event.preventDefault());
</script>

I know the ToolBox plugin can be used to run JavaScript codes in Bubble (I don’t know how to use it yet) but if this can be done using the HTML element that Bubble provides, I would love that.

I would be glad if someone could show me the steps to get this to work. (My Javascript knowledge is very much at the novice level :grin:)

Hi there, @mikeolas… if you are open to the idea of disabling right-click on the entire page, it couldn’t hurt to give this free plugin a look.

Best…
Mike

Hmm… Thanks, Mike but I actually just need it on a single image and not the entire page.

If you’re willing to drop a few bucks, this plugin looks like it might do the trick.

1 Like

Awesome… Thanks, Mike. This would do the trick.

Although this might work, I would still like to know how to do it with Bubble. I’m just that curious :grinning:

1 Like

The funny part about my responses is that I rarely, if ever, use plugins because I, too, am curious when it comes to doing anything and everything with Bubble itself.

Since you mentioned the Toolbox plugin, though, I thought I would poke around and see if I could get something to work with it. Much to my amazement because this kind of thing is definitely not in my wheelhouse, this workflow on page load appears to disable right-clicking on an image element.

True, we’re still using a plugin, but I have heard folks refer to the Toolbox plugin as pretty much essential Bubble functionality, so I’m calling it a win. :slight_smile:

In case you want to try it, here is the code so you can copy it.

$(document).ready(function() {
     $("img").on("contextmenu",function(){
        return false;
     }); 
 });
3 Likes

Nice… :man_dancing: :man_dancing: :man_dancing:
Quick question, the img in $(“img”), should that be the element name of the image or an ID attribute attached to the image?

Make no mistake, I don’t pretend to know what I am doing with that code. :slight_smile:

I literally have the workflow set up the way I am showing it in the screenshot, and it is disabling the right-click menu on every image element on the page.

1 Like

Haha :slightly_smiling_face:… I just tested it and yes, it disables all the image elements on the page. Now I have to figure out how to target just a single image…

1 Like

Well, this is where I get off this particular train, so best of luck with that! :slight_smile:

1 Like

Thanks a lot, Mike. I really appreciate your help…

2 Likes

Hi!

Tere you are selecting all every img tags. To select a particular image, you could add an ID to that element (using Bubble’s input) or add a class to every image you want to disable using the css plugin from the marketplace.

Then you could change (in that code u are using Jquery)

For ID (ID with # before) (

$(document).ready(function() {
$("#IDNAME").on(“contextmenu”,function(){
return false;
});
});

For classes (CLASSNAME with a dot before)

$(document).ready(function() {
$(".CLASSNAME").on(“contextmenu”,function(){
return false;
});
});

4 Likes

Thanks, @tgmoron!

A quick note, @mikeolas, because I had a little trouble getting it to work (not that you would, but just in case)… don’t put the # in front of the ID attribute on the element… just use that symbol in the code the way tgmoron is showing.

2 Likes

:smiling_face_with_three_hearts: … It worked (I actually tried with the ID earlier but I didn’t add the # sign, so it didn’t work). Thank you so much. @tgmoron and @mikeloc, you guys have made my night. Now, I can sleep smiling. :grin:

2 Likes

Hmm… I shouldn’t use #?
I tried it without the # and it didn’t work…

If you had it working, just ignore me. :slight_smile:

I’m just saying I had the # in front of the ID attribute on the element itself, and that didn’t work. You do need the # in the code.

Oh… Ok… Got it :+1:

1 Like

Amazing!!! Thanks :smiling_face_with_three_hearts:

2 Likes

This topic was automatically closed after 70 days. New replies are no longer allowed.