CODEWITHSUNDEEP
javascripthtml
Sveninho
Sveninho

Reputation: 15

Executing Javascript only if min-width is 800px

For my project I want a parallax scrolling effect only if the screen size is equal or wider than 800px. To do this I wrote following code:

<script>
    if (window.screen.width >= 800) {
        function parallax() {
            var parallax = document.getElementById("box01");
            parallax.style.top = -(window.pageYOffset / 4) + "px";

        }
    }

    window.addEventListener("scroll", parallax, false);

</script>

The parallax scrolling works fine but the "window.screen.width" command is ignored by the browser. Means: The parallax scrolling is also enabled for screen smaller than 800px.

Any help is appreciated!

Upvotes: 1

Views: 400

Answers (3)

Harden Rahul
Harden Rahul

Reputation: 938

You should try this 

if (window.matchMedia('(min-width: 800px)').matches) {
  function parallax() {
        var parallax = document.getElementById("box01");
        parallax.style.top = -(window.pageYOffset / 4) + "px";

    }
} else {};
window.addEventListener("scroll", parallax, false);

Upvotes: 0

Jared Smith
Jared Smith

Reputation: 21926

What you're looking for is window.matchMedia. 

function executeIfMinWidth800 (e) {
  if (window.matchMedia('(min-width: 800px)').matches) {
    // do stuff
  }
}

// call initially
executeIfMinWidth800();

// add handler for resize
window.addEventListener('resize', executeIfMinWidth800);

Upvotes: 2

nicholaswmin
nicholaswmin

Reputation: 22949

window.screen gets you the size of the monitor.

What you want is the size of the viewport, accessible via:

// width
window.innerWidth
// height
window.innerHeight

Upvotes: 0

Related Questions