How to stop any moving object from moving with vanilla JavaScript

JavaScript
1

Generally speaking, video files and audio files in websites, can be blocked this way:

document.querySelectorAll('video').forEach(video=>{
    video.pause();
    video.remove();
});

document.querySelectorAll('audio').forEach(audio=>{
    audio.pause();
    audio.remove();
});

But is there a broader command also blocking things like:

  • Sliders
  • Moving text (loop-moving-text).
  • gif files or any other animation files.

I think I am looking for a “freeze almost anything” command but one which would still allow me to select text (to copy-paste it), scrolling, clicking links, etc.

1 Like
2

Well, you’re describing two different scenarios:

Scenario 1: Audio/Video elements.

  • Standardized
  • Selectable
  • Supported Methods.

Scenario 2: “Other Stuff”

  • Not well defined
  • Not generalizably selectable
  • Not standardized methods

… shrug

Note: I’m not saying its not possible to make things not do what they are currently doing. What i’m saying is your scope for what you’re asking for is so unbelievably broad that there’s not going to be an answer. If your question is “how do i stop this specific animation from playing on this specific website”, someone can offer a suggestion. But it will work for that situation, not all of them.

1 Like
4

If I reduce the question to sliders (which personally I find most distracting), will it help?

Can we stop an HTML element from showing different images in it? From switching images in it?

5

We can do something like document.querySelector('#mySlider').remove() but is there a more sophisticated approach?

6

Oh so just sliders.

Would that be…
a standard HTML <input type='range'>?
a css hidden slider?
a jQuery slider?
how about a multi-range one?
etc.
etc…
etc…

(Can you see yet why any answer is going to be problematic?)

7

Indeed.

8

And that’s why

will work… IF the slider is a standard input range with an ID mySlider, and nowhere else. You CAN target all input range elements:
querySelectorAll("input[type='range']") will target all such elements, and you can walk through them and remove them.
But that wont stop other kinds… shrug

9

I realize that I might need to open a new thread for this but about gif files in particular, is that a good basic code?

document.querySelectorAll('img[src*=".gif"]').forEach((element)=>{
    element.remove();
});
//srcANYTHINGAFTER_IT_WITH".gif" (without double quote marks)

Ignoring the messy JavaScript+CSS combo syntax, this removed gif files from a particular webpage, but when I have changed 'img[src*=".gif"]' to one of the following:

  • 'img[src*=".png"]'
  • 'img[src*=".jpg"]'
  • 'img[src*=".bmp"]'
  • 'img[src*=".webp"]'

Then, nothing was removed.

Apparently, this is gif selective but I am not sure if in 100% of the cases.
If I recall correctly, a filename (and hence its file type) can be hidden somehow, by loading it asychronously from a Binary Large Object (BLOb) perhaps?

10

I would exclude the . but other than that it should work. (a Data URL containing a GIF will not contain the period, but will begin “data:image/gif”…)

1 Like
11

If it is not being removed then there is something wrong with the selector.
Console.log the element and the element’s parent.
If the parent is null it will do nothing and if the element is not an element it will not be removed

12

if the element is not an element it will not be removed

I think we can remove shadow roots if they are open (or at least an element containing them).

What did you mean exactly?

13

If the variable you have selected is not an html element then it will not be removed.
Elements are nodes but not all nodes are elements.
Because the element.remove() method only works on variables which are elements.

19

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.