loop an array, then put values back into elements on resize

Question

I am looking to loop through all the elements with a data-speed attribute and record them. Then loop back though that array on resize to put them back to original values.

I am able to get my data-speed attributes of all elements that contain that data attribute and log them. But now I need to record them, and then add those data-attributes back to the original elements at the original value (in my resize function). Below is my html, along with how I have the JS setup so far:

 // get all data-speed numbers and log them

    const el = document.querySelector('.smootherReset768');
    var dataAttribute = el.getAttribute('data-speed');

    $('.smootherReset768[data-speed]').each(function(){
      console.log($(this).data('speed'))
    });

    //put the values into my resize function
    $(window).resize(function (){

    var mq = window.matchMedia( "(max-width: 768px)" );

    if (mq.matches) {
        // I can change all data-speed attributes here easily
    }
    else {
        // add code to return each element to it's original data-speed
    }
    
    }).resize();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <div class="col-2 smootherReset768" data-speed=".8"><img  src="https://assets.codepen.io/181080/home-3-900x900.jpg"/></div>
    <div class="col-2  smootherReset768" data-speed="1.2"><img  src="https://assets.codepen.io/181080/home-2-900x900.jpg"/></div>

Carsten Massmann · Accepted Answer · 2022-04-23 13:52:22Z

0

The following should do the job:

const el = $('.smootherReset768'),
  factors = [.001, .002], // arbitrary factors for smaller windows --> use GSAP instead!!
  speeds = el.map((i, e) => $(e).data('speed')).get(); // collect original values

// assign speeds according to window size:
$(window).resize(function() {
  const smallWin = window.matchMedia("(max-width: 768px)").matches
  el.each((i, e) => $(e).data("speed",
    smallWin ? factors[i] * window.innerWidth  // small window: calculated speeds
             : speeds[i]));                    // large window: original speeds
  console.log(smallWin, el.map((i, e) => $(e).data("speed")).get().join(","))
}).resize()

img {
  height: 100px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-2 smootherReset768" data-speed=".8"><img src="https://assets.codepen.io/181080/home-3-900x900.jpg" /></div>
<div class="col-2 smootherReset768" data-speed="1.2"><img src="https://assets.codepen.io/181080/home-2-900x900.jpg" /></div>

Basically, everything you do here you can do in Vanilla JavaScript too. But, as you have chosen to work with jQuery you should do it consisently and avoid methods like document.querySeletor() and document.getAttribute().

Another point worth noticing might be that the callback functions for jQuery.each() and jQuery.map() require their arguments: (index, element) in the reverse order of the corresponding Array.prototype functions of JavaScript (the order here is (element,index)).

edited Apr 23, 2022 at 13:52

answered Apr 23, 2022 at 13:26

Carsten Massmann

28.4k3 gold badges25 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

celli Over a year ago

I would like to do it with vanilla javascript, but I'm not sure this does what I intend. When the screen is under 768px, I am using GSAP to set the data-speed to a single value like this smoother.effects('.smootherReset768', {speed: 1}); AND when we change the screen size back above 768px, I just would like to reset the data-speed attributes of each element to their original which is in-line in the html

Carsten Massmann Over a year ago

I am not familiar with GSAP, so: you might well have a reason to use jQuery! I have loved working with it in the past. Don't get me wrong, I still think it is a great library. The above jQuery snippet should provide you with a basis to incorporate your GSAP elements into it.

Collectives™ on Stack Overflow

loop an array, then put values back into elements on resize

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related