Disabled right click on word document open using fancy box

JavaScript
1

Hi,

I am able to view word document using fancy box.

I do not want user to download document therefore I want to disable right click on open word document using fancy box.

I have added jquery function to disable right click but it work on page from where fancy box pop up open but not on image.

I want to disable right click on open word document using pop up.

fancy box files can be downloded from

http://fancyapps.com/fancybox/

<!DOCTYPE html>
<html>
  <head>
	<title>
      fancyBox - Fancy jQuery Lightbox Alternative | Demonstration
  </title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

  <!-- Add jQuery library -->
  <script type="text/javascript" src="../lib/jquery-1.10.1.min.js">
  </script>

  <!-- Add mousewheel plugin (this is optional) -->
  <script type="text/javascript" src="../lib/jquery.mousewheel-3.0.6.pack.js">
  </script>

  <!-- Add fancyBox main JS and CSS files -->
  <script type="text/javascript" src="../source/jquery.fancybox.js?v=2.1.5">
  </script>
  <link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css?v=2.1.5" media="screen" />

  <!-- Add Button helper (this is optional) -->
  <link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
  <script type="text/javascript" src="../source/helpers/jquery.fancybox-buttons.js?v=1.0.5">
  </script>

  <!-- Add Thumbnail helper (this is optional) -->
  <link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />
  <script type="text/javascript" src="../source/helpers/jquery.fancybox-thumbs.js?v=1.0.7">
  </script>

  <!-- Add Media helper (this is optional) -->
  <script type="text/javascript" src="../source/helpers/jquery.fancybox-media.js?v=1.0.6">
  </script>

  <script>
      $(document).ready(function() {
        $(".word").fancybox({
          'width': 800, // or whatever
          'height': 520,
          'type': 'iframe'
        }
                           );

      }
                       );
      //  ready


  </script>

  <script type="text/javascript">
    $(function () {
      $(document).bind("contextmenu",function(e){
        e.preventDefault();
        alert("Right Click is not allowed");
      }
                      );

      /*$('.dvOne').bind("contextmenu",function(e){
e.preventDefault();
alert("Right Click is not allowed on div");
}
);
*/
    }
     );
  </script>

  </head>
  <body>
	<h1>
      fancyBox
  </h1>
  <a class="word" href="https://docs.google.com/file/d/0BwG1v_57BaGoaDNLLWQySTFlYkk/preview">
    open a word document in fancybox
  </a>
  </body>
</html>

Any idea?

-Thanks

2

The only thing that can be disabled from JavaScript is JavaScript itself.

Anything else you try to block from JavaScript can be overridden by your visitors - often by just setting their browser to ignore the disable attempt - at worst by their disabling JavaScript for your page.

Anyway there are lots of other ways they can get a copy of the document without needing to use right click.

3

Hi,

I know there are different ways to download document even right click is disabled on fancybox popup.

I want to disable right click on fancy box pop up and if user download document other way then no problem.

Any idea?

-Thanks

4

Since you can’t disable right click in people’s browser without their permission you will need to get all your visitors to agree to allow you to disable it.

5

Don’t do this!
It achieves nothing other than annoying users, and as felgall says, so many browsers have a security option to disallow disabling of the right click (context) menu anyway.

However … if you absolutely have to, look at your event handler.

You currently have:

$(document).bind("contextmenu",function(e){
  e.preventDefault();
  alert("Right Click is not allowed");
}

but FancyBox is loading your content in an iframe, which is not selected via $(document).

I would guess that adding this code to your iframe as well should do the trick.

6

Hi Pullo,

You are right this will not work in fancybox iframe and I have following solution working on images but not on documents from google docs.

http://jsfiddle.net/QNHN5/.

Documents from google docs are showing in images and above should works.

But I don’t know why it is not working.

Any Idea?

-Thanks

7

Hi there,

Could you make a demo with a Google Doc?

I would guess that you are fighting a loosing battle at this point, but maybe something can be done.

8

Please check following link for demo with google documents

http://jsfiddle.net/QNHN5/186/

-Thanks

9

It seems that the Google Doc is not working in conjunction with FancyBox and that when I click on the link it opens on Google’s servers (not in FancyBox on your page).

10

Hi Pullo,

Fancy box popup work with google documents but in jsfiddle.net it is going to google server and right click is working.

Can we achive this using colorbox?

I will prepare demo using colorbox and send the working link.

-Thanks

11

Hi Pullo,

Following is the demo with colorbox opening document from google document.

<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script>
<link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example1/colorbox.css" />
<script>
    $(document).ready(function(){
		$(".document1-link").colorbox({rel:'document1-link', iframe:true, transition:"none", width:"1000px", height:"610px"});
    });
</script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <a href="https://docs.google.com/document/d/19YexFnS8ZeYcGgedia_6RerHAdJOaLU2dubZQd9lRIw/preview" style="color:#5D8BA6;" class="document1-link" >
    Sample Document</a>
</body>
</html>

I think we can disable right click ,other way to download and print document.

Any idea?

-Thanks

12

Hi there,

As I said before, I’m not sure if this is even possible or how effective it will be if it is possible, however I don’t mind having a look.

If you have the demo working in FancyBox, then the best thing to do is to use that.

Could you post a link to a working page (not JSFiddle), or PM me the link if you don’t want to share it.

13

Hi Pullo,

I want to with colorbox as i am using colorbox always in website and it is showing better in colorbox than fancybox for me.

I will send demo same as colorbox in fancybox.

If solution work either in colorbox or fancybox ,I will use it.

If you could provide solution in colorbox will be great help.

Any idea?

-Thanks

14

I’m a bit busy right now, but leave it with me and I’ll get back to you.

15

Ok Pullo.

Many thanks for support.

16

Are you sure that you have your browser set to give scripts permission to disable right click? If your browser isn’t set to allow it then nothing you try will work.

17

Hi felgall,

It is okay.

If user download file using any other way no problem.

I just want to disable right click.

-Thanks

18

You can only do that if your visitor configures their browser to let you do it. They have the final say on whether disabling right click is or isn’t allowed in their browser. If they have their browser set to disallow disabling right click then you can’t disable right click.

19

Hi there,

This was the best I could come up with:

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8 />
    <title>Right click shenanigins</title>
    <link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example1/colorbox.css" />
    <style>
      #overlay{
        display: block;
        position: absolute;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        z-index:9999;
      }
    </style>
  </head>
  <body>
    <a href="https://docs.google.com/document/d/19YexFnS8ZeYcGgedia_6RerHAdJOaLU2dubZQd9lRIw/preview" style="color:#5D8BA6;" class="document1-link">Sample Document</a>
    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script>
    <script>
      $(".document1-link").colorbox({rel:'document1-link', iframe:true, transition:"none", width:"1000px", height:"610px"});

      $(document).on('cbox_open', function(){
        $('<div>', {
          id: 'overlay',
          click: function(){
            $(this).remove();
            $.colorbox.close();
          }, 
          contextmenu: function(){
            alert("Naughty, naughty!");
            return false;
          }
        }).appendTo('body');
      });
    </script>
  </body>
</html>

Basically, what it’s doing is when the colorbox fires, it’s creating a <div> element with a width of 100% and a height of 100% and laying it over the colorbox. It’s then catching right clicks on this <div> and preventing them.

This kind of works, but it is at best a flimsy barrier which is more likely to annoy your users than prevent content theft.
I wouldn’t use it.

20

Thanks Pullo.

Your solution is excellant.

-Thanks