Remove function on browser width

Question

I'm still very new to javascript and I'm learning as I build. This may be a simple fix but how would I disable a function on my parallax images ( or disable a specific js function in general ) on a smaller width?

Here's what I have so far that doesn't quite work but shows "undefined". I've been searching for a solution for a couple of days now with no luck. Any help would be appreciated.

  var paraLlaxS = document.querySelector("#firstImgc2");
  var paraLlaxS = document.querySelector("#secondImgc2");
  var paraLlaxS = document.querySelector("#backbox1");

  function setTranslate(xPos, yPos, el) {
      el.style.transform = "translate3d(" + xPos + ", " + yPos + "px, 0)";
  }

  window.addEventListener("DOMContentLoaded", scrollLoop, false);

  var xScrollPosition;
  var yScrollPosition;

  function scrollLoop() {

      xScrollPosition = window.scrollX;
      yScrollPosition = window.scrollY;

      setTranslate(0, yScrollPosition * -0.2, firstImgc2);
      setTranslate(0, yScrollPosition * 0.15, secondImgc2);
      setTranslate(0, yScrollPosition * -0.6, backbox1);

      requestAnimationFrame(scrollLoop); 


      if(window.innerWidth < 900) {
        document.querySelector('#firstImgc2').innerHTML = window.removeEventListener("DOMContentLoaded", scrollLoop, false);
        return;
      } else {

      }
}

Most likely the problem is that you are setting the image inner html to a remove function. The image tag does not have the inner html property. You should just remove the function in its own JavaScript statement. Hope this help. — Ryan, Aug 07 '18 at 17:54
Possible duplicate of [Stopping a JavaScript function when a certain condition is met](https://stackoverflow.com/questions/3536055/stopping-a-javascript-function-when-a-certain-condition-is-met) — Heretic Monkey, Aug 07 '18 at 17:59

score 1 · Accepted Answer · answered Aug 07 '18 at 17:51

1

You could add a conditional return at the beginning of you function. But if the width increases again you would need to listen for that to start the loop again.

function scrollLoop() {
   if(window.innerWidth < 900)return;
   ...

answered Aug 07 '18 at 17:51

Sebastian Speitel

7,166
2
19
38

Thanks for the quick response. The conditional does work under 900 fine however, yes, I would like to re-enable the function over 900px. I've been trying multiple combinations and still, I cannot get this to work. I'm obviously doing something wrong. – devk Aug 07 '18 at 18:57
1

Add an onresize listener, check for your condition and when it is met call `scrollLoop()`. – Sebastian Speitel Aug 07 '18 at 18:58
I was still very confused but I managed to get it to work, when I resize under 900 the effect stops, I then go back to the larger width and effect continues as I wanted, prefect. See the updated js code here: https://jsfiddle.net/dvkds/njLaw94q/ The only problem now is when I'm testing, meaning going back and forth resizing from large to small widths live. When I'm manually resizing to the small width the parallax effect makes huge spaces in between the images. Technically the effect works fine for viewers who don't resize from either width but I feel this can be improved on. – devk Aug 08 '18 at 13:37
You could reset all parallaxing when stopping the effect – Sebastian Speitel Aug 08 '18 at 13:59

score 0 · Answer 2 · answered Aug 07 '18 at 17:54

I borrowed a solution from another post. Listen for browser width for responsive web design?

This code is compatible with a wider variety of browsers as getting the screen size can vary depending on the browser.

var width = 0;
function getWindowSize() {
    if (document.body && document.body.offsetWidth) {
      width = document.body.offsetWidth;
    }
    if (document.compatMode=='CSS1Compat' &&
        document.documentElement &&
        document.documentElement.offsetWidth ) {
       width = document.documentElement.offsetWidth;
    }
    if (window.innerWidth) {
       width = window.innerWidth;
    }
    return(width);
}

How does this answer the question of how to disable a function when a browser is at a certain width? I mean, it's a great job of copying and pasting the code, and likely to be helpful to the OP, but it's not an answer. You likely should have just added a comment with a link to that answer... — Heretic Monkey, Aug 07 '18 at 17:57

Remove function on browser width

2 Answers2