CODEWITHSUNDEEP
javascriptjqueryhtmlpreventdefault
knocked loose
knocked loose

Reputation: 3304

return false doesn't stop page from reloading on anchor click

we currently have a video player with 3 custom buttons to change speed. The 3 buttons are:

Slower (clicking 1 time will slow down the video 5%, slowest being 80% from 100%).

Normal on click returns the video to 100%.

Faster Same as slower, but goes fast, max is 120%.

The buttons are located slightly down the page, but on click will make the page reset to the top. I have tried both e.preventDefault(); and setting each function to return false; but neither seem to stop the reset? What would be a possible error or solution for this problem?

function speedIncrease(e) {
       e.preventDefault();
    if (currentSpeed < 1.50) {
      currentSpeed = currentSpeed + 0.05;
      hapyak.playlist.get()._player.playbackRate(currentSpeed);
      updateSpeed();
    }
  }

  function speedDecrease(e) {
    e.preventDefault();
    if (currentSpeed > .8) {
      currentSpeed = currentSpeed - 0.05;
      hapyak.playlist.get()._player.playbackRate(currentSpeed);
      updateSpeed();
    }
  }

  function resetSpeed(e) {
    e.preventDefault();
    currentSpeed = 1;
    hapyak.playlist.get()._player.playbackRate(currentSpeed);
    updateSpeed();
  }

This current code throws an unidentified e error, even though I identify it within the function's params.

I also have tried this solution with return false;

function speedIncrease() {
    if (currentSpeed < 1.50) {
      currentSpeed = currentSpeed + 0.05;
      hapyak.playlist.get()._player.playbackRate(currentSpeed);
      updateSpeed();
    }
    return false;
  }

  function speedDecrease() {
    if (currentSpeed > .8) {
      currentSpeed = currentSpeed - 0.05;
      hapyak.playlist.get()._player.playbackRate(currentSpeed);
      updateSpeed();
    }
    return false;
  }

  function resetSpeed() {
    currentSpeed = 1;
    hapyak.playlist.get()._player.playbackRate(currentSpeed);
    updateSpeed();
  }

Edit: Here is the HTML for the buttons

<div class="video-speed-buttons-container">
  <a href="#" onclick="speedDecrease()">
      <div class="video-speed-button first">Play slower</div>
  </a>
  <a href="#" onclick="resetSpeed()">
      <div class="video-speed-button">Normal speed</div>
  </a>
  <a href="#" onclick="speedIncrease()">
       <div class="video-speed-button">Play faster</div>
  </a>
</div>

I appreciate all the help on this! Thanks!

Upvotes: 0

Views: 277

Answers (3)

somdow
somdow

Reputation: 6318

i tried it myself because your code looked ok, but who knows. What i did was, i rewrote your code with some of mine and it works. Check the jsFiddle

https://jsfiddle.net/somdow/16h8go17/

here is the sample code for one link(in JS)

$('#link1').on("click", function(evt){
        evt.preventDefault();
        alert("lopan");     

        if (currentSpeed < 1.50) {
        currentSpeed = currentSpeed + 0.05;
        hapyak.playlist.get()._player.playbackRate(currentSpeed);
        updateSpeed();
        }

});

and here is sample code for HTML:

<div class="linkW">
  <div id="link1"><a href="#">Play slower</a></div>
  <div id="link2"><a href="#">Normal speed</a></div>
  <div id="link3"><a href="#">Play faster</a></div>
</div>

PS. i added a lot of loremIpsum text to make sure it wasnt jumping up, i also added your JS inside my function to make sure it'd wouldnt throw an error and it still works. I also added a random "alert" to make sure it fired and the page wouldnt jump and it also worked.

This said, id just rewrite your links and make em like my example and it should work. I just added it like this because i like to keep all JS off the page.

Good luck.

Upvotes: 0

Chris Lear
Chris Lear

Reputation: 6742

Try removing the href from the <a> tag. That will prevent it from navigating to '#' which is the top of the page.

Upvotes: 1

CBusBus
CBusBus

Reputation: 2359

You're looking for the Event preventDefault() method which will stop the link from redirecting you. See the linked post.

https://stackoverflow.com/a/11240923/871580

Upvotes: 0

Related Questions