Html Question posted in
Some basic documentation can be found here.

Html – Hide/Disable element when scrolling, and as soon as scrolling stop, make it appear again

I am trying to create a div tag to cover an embed tag, and did a little javascript so user can not right click the pdf inside embed tag to download it (I know it is useless, I doing this because my customer requested it). And this is the main part:
I want user still be able to scroll to pdf.
I programmed the scroll so that everytime user scroll, the div tag mentioned above will disappear, SO THAT USERS CAN SCROLL THROUGH THE PDF. But as soon as they stop scrolling, it will appear again, to prevent user from right click the pdf.
This is my code so far:

var wheeling;
window.addEventListener('wheel', function (e) {
        if (!wheeling) {
            console.log('start wheeling!');
            document.querySelector("#lesson_pdf").style.display = "none";
        }

        clearTimeout(wheeling);
        wheeling = setTimeout(function() {
            console.log('stop wheeling!');
            document.querySelector("#lesson_pdf").style.display = "block";
            wheeling = undefined;
        }, 300);
    });

My html:

<div>
    <div style="position: relative;">
        //the embed tag I want to cover
        <embed src=" {{ getImageFile($pdf_src) }}" class="tw-w-full tw-h-[500px] pdf-reader-frame" style="position: absolute;">
    </div>
    //The div tag I mentioned
    <div style="position: absolute;
                height: 100%;
                width: 100%;
                display: block;
                z-index: 1;" id="lesson_pdf">
    </div>
</div>

The thing is, it doesn’t work as expected. I sometimes have to scroll a lot of time before be able to scroll through the pdf file. Can somebody help me with this?

Tags:

3

Answers


  1. 0

    If your goal is to "to prevent user from right click the pdf", why not just disable the context menu? You can do that using the contextmenu event. It will be more efficient than displaying and hiding a div overlay (unless that was a super specific client request?)

    const img = document.querySelector("img")

img.addEventListener("contextmenu", (e) => {
  e.preventDefault();
  return false
})
    <img src="http://via.placeholder.com/640x360" />
    Login or Signup to reply.
  2. 0

    I hope below code will help you.don’t forget to add the css

    var preventElement = document.getElementById('embed-document');
preventElement.addEventListener("contextmenu", (e) => {
e.preventDefault();
});
    embed {
            background:#cccccc;
            pointer-events: none;
        }
    <div>
    <div id="embed-document">
      <embed src="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf" class="tw-w-full tw-h-[500px] pdf-reader-frame">
    </div>
</div>
    Login or Signup to reply.
  3. 0

    From what I understand, your goal ultimately is to prevent the user from downloading the pdf.

    It had been covered in this answer on the question
    How to disable right click on embed tag?

    If your end goal is to prevent a user downloading a pdf, or any file for that matter, you’re going to have issues.

    Malicious users with a little know how can get any file you serve
    them. If they can see it, they can download it. Javascript may prevent
    right clicking on the embeded but won’t prevent them from downloading
    it.

    The answer links to an answer that disables context menu (The right click menu) on the div that contains the embed element, this essentially let the user unable to right click on the embed tag.

    Disable right click on pdf inside embed element

    Hopes this helps!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search