JS: Removing class from section

Question

I use parallax effect on my site, but when the screen is smaller the background images starts to be cut off a bit. I decided to have parallax effect only on desktops and to remove this from other smaller devices.

For example I have 3 sections:

<section class="bg1 parallax"></section> 
<section class="bg2 parallax"></section> 
<section class="bg3 parallax"></section>

Parallax class is not described in CSS, it is added just to let the JavaScript know to which section parallax should be included.

My question:

Has someone got a script which can remove class "parallax" if screen width is smaller than for example : 1280px ?

If width is bigger than 1280px

<section class="bg1 parallax"></section>

Otherwise

<section class="bg1"></section>

Welcome to Stack Overflow! Please read [ask]. Key phrases: "Search, and research" and "Explain ... any difficulties that have prevented you from solving it yourself". For instance, http://stackoverflow.com/questions/2155737/remove-css-class-from-element-with-javascript-no-jquery?rq=1 tells you how to remove a class, and http://stackoverflow.com/q/15840347/215552 tells you how to get the width of the screen. — Heretic Monkey, Feb 21 '17 at 20:23

score 0 · Answer 1 · answered Feb 21 '17 at 20:16

I haven't tested it, but this should put you in the right direction...

window.onresize = function(){ // may not be the window object
    if (screen.width < 1280) { // many ways of detecting screen width
        var sections = document.querySelectorAll("section"); // create array of all section elements
        for (var i = 0; i <= sections.length-1; i++) { // loop through them
            sections[i].classList.remove("parallax"); // remove their parallax class
        };
    };
};

score 0 · Answer 2 · answered Feb 21 '17 at 20:22

It seems a bit hacky, but you could do something like:

// closure so we don't pollute global scope. This should be run at the bottom of the page so that it can find all of the parallax elements on the page
(function(){
    var previous_width = 0;
    var cutoff = 1280;
    var $parallax_elements = $('.parallax');
    function check_width() {
        var current_width = document.body.clientWidth;
        // if the document has gone from narrow to wide, re-enable parallax
        if (current_width > cutoff && previous_width <= cutoff) {
             $parallax_elements.addClass('parallax');
        }
        // if the document has gone from wide to narrow, disable parallax
        else if (current_width <= cutoff && previous_width > cutoff) {
             $parallax_elements.removeClass('parallax');
        }
        // store the current width for the next check
        previous_width = current_width;
    }

    // run it every time the window resizes
    $(window).resize(check_width);

    // run it once to initialize
    check_width();
})();

There is no mention of jQuery in his question. – Waxi Feb 21 '17 at 20:31 — Waxi, Feb 21 '17 at 20:31

kiya · Answer 3 · 2017-02-21T21:02:42.890

0

Tried this in console and seems to work.

if(window.innerWidth < 1280){
    var parallaxes = document.getElementsByClassName('parallax');
    while(parallaxes[0]){
       parallaxes[0].classList.remove('parallax');
    }
}

edited Feb 21 '17 at 21:02

answered Feb 21 '17 at 20:41

kiya

1
1

JS: Removing class from section

3 Answers3