Html/JS: script doesn't apply for other pages

Question

0.00/5 (No votes)

See more:

, +

I work on a Social Media Page with Django/Python.

The feed.html diplays the Posts of Users. It is paginated, but I have an Infinite script where it automatically displays the next page, without needing to click to the next page. Users can upload Videos and Images, if you hover over the videos, it gets played.

The script:

JavaScript

var videos = document.querySelectorAll('video');
  for(var i=0; i<videos.length; i++)
     videos[i].addEventListener('play', function(){pauseAll(this)}, true);
  
  function pauseAll(elem){
    for(var i=0; i<videos.length; i++){
      //Is this the one we want to play?
      if(videos[i] == elem) continue;
      //Have we already played it && is it already paused?
      if(videos[i].played.length > 0 && !videos[i].paused){
      // Then pause it now
        videos[i].pause();
      }
    }
    }

prevents multiple videos from getting played, so if you hover over a video and it plays, but you hover over another video, the video before stops playing. That works well.

The Script for my infinite scroll is as follows:

JavaScript

var infinite = new Waypoint.Infinite({
    element: $('.infinite-container')[0],

    offset: 'bottom-in-view',

    onBeforePageLoad: function () {
      $('.loading').show();
    },
    onAfterPageLoad: function ($items) {
      $('.loading').hide();
    }
  });

But on the next Page, it doesn't apply, how do I fix that?

P.S.: Sorry for my bad English!

What I have tried:

I could not come up with a solution, so I tried nothing yet.

Posted 22-Aug-23 9:37am

Berk Ö.

Updated 23-Aug-23 1:59am

Deeksha Shenoy

v2

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Dave Kreskowiak · Answer 1 · 2023-08-22T17:54:00

This code executes once, when the page loads:

JavaScript

var videos = document.querySelectorAll('video');
  for(var i=0; i<videos.length; i++)
     videos[i].addEventListener('play', function(){pauseAll(this)}, true);

If you want the play function to apply to the new elements in the page, you'll have to execute a selector against the new items that DO NOT have the event listener applied to them already.

Richard Deeming · Answer 2 · 2023-08-22T21:38:00

The standard approach for handling events on new elements which don't exist when you assign the event handler is to use event delegation[^]. You wire up the handler to a parent element, and check the target to ensure that it's an element you want to process.

JavaScript

document.addEventListener('play', e => {
    if (e.target.tagName !== "VIDEO") { return; }
    pauseAll(e.target);
});

NB: You can't pass true for the useCapture parameter in this case:

EventTarget: addEventListener() method - Web APIs | MDN[^]
Events that are bubbling upward through the tree will not trigger a listener designated to use capture.

Html/JS: script doesn't apply for other pages

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0