adding animation when scrolling page

Question

I have a page where the user selects one from the list of animations and clicks the confirm button, and the animation is applied to the tags entered by the user.

Everything is fine for the first time, but when the user selects a new animation , a problem occurs

When everything is fine : _link When a new animation is entered : _link

my object something like this :

  [{
 'target_tag': '.box-1',
'animation_status': 'animation-1',
 ...}
 ,
 {'target_tag': '.box-2',
 'animation_status': 'animation-2',
   ...},]

handle functuin :

document.querySelector(".page_frame").onclick = preview;

function preview() { var data = '';

// ------------- check feilds is empty or not
var feilds = jQuery(".sts_create input").filter('[type="text"]');

for (var i = 0; i < feilds.length; i++) {
  if (feilds[i].value == "") {
    new novaAlert({
      icon: "danger",
      title: "خطا",
      text: "یک یا چند کادر خالی یافت شد لطفا تمامی کادر هارا با دقت پر کنید",
      confirmButtonText: "متوجه شدم",
      dismissButton: false,
    }).then();
  }
}

const sts_mode = jQuery('.sts_create input[type="radio"]:checked').val();
// alert(sts_mode)

const obj = jQuery(".sts_create form").serializeArray();

const collate = (obj) => {
  const result = [{}];

  for (const [_, input_info] of Object.entries(obj)) {
    // check to see if the last item in the results array has an entry for the
    // current input name, create a new object at the end of the array if it does

    if (
      input_info.name != "target_page_name" &&
      input_info.name != "target_page" &&
      input_info.name != "sts_mode"
    ) {
      if (result[result.length - 1].hasOwnProperty(input_info.name))
        result.push({});

      // add entry to object at end of result array
      result[result.length - 1][input_info.name] = input_info.value;
    }
  }

  // convert result array to object
  return Object.fromEntries(Object.entries(result));
};

 data = collate(obj);

let x = "";
console.log(data);



for (var item in data) {
   x = data[item];
    if(remove____animation(x.target_tag)) {
      if (sts_mode == "show-after-page-load") {
        page____load(x);
      } else if (sts_mode == "show-when-element-seeing") {
        page____scroll(x);
      }
    }

}

}

main function :

function page____scroll(obj){
if (obj.target_tag != "") {

  
  document.querySelector('.page_frame').addEventListener('scroll',()=>{

 
      var all_elements = jQuery(
        ".frame " + obj.target_tag
      );
      for (var i = 0; i < all_elements.length; i++) {
        var _innerHeight = window.innerHeight;
        var elm = all_elements[i].getBoundingClientRect().top;
   
        if (elm < _innerHeight - 200) {
          jQuery(all_elements[i]).css("animation-duration", obj.duration);
         jQuery(all_elements[i]).css(
            "animation-delay",
            obj.animation_delay
          )

        jQuery(all_elements[i]).attr('data-animation',obj.animation_status);

        }
        
        else if(obj.sts_show_again == 'on') {
          jQuery(all_elements[i]).attr('data-animation','hidden');
        }

      }
    
    })

}

I guess the previous animation will not be deleted at all...

faebster · Answer 1 · 2023-04-04T12:38:26.060

Some code changes to avoid unexpected behaviour:

truthy vs falsy

replace != with !==
replace == with ===

// truthy/false behaviour in JS
"" ==  0     // true
"" === 0     // false
"" ==  false // true
"" === false // false

Good article about truthy/falsy values

ESLint can enforce === and thousand other things:

Rule: eqeqeq: ["error", "smart"]

radio buttons in HTML ok?

Do your radio buttons have a name and value?

<input name='animation' type='radio' value='anim1'>
<input name='animation' type='radio' value='anim2'>

for loop isn't awaiting using .then() You want to await the promise to resolve in the loop? Without having it tested, it looks like for() iterates over all items immediately (parallel) and .then() does nothing.

Found this example on how to solve this:

you can also use .reduce() and async/await:

async function(){
  await fields.reduce(async (promise, field) => {
    await promise;
    await longRunningTask(field);
  }, Promise.resolve()); // param: resolved promise for first iteration
}

Show Nova Message multiple times?

It looks like if you're doing nothing with fields[i] but show a alert notification each time when empty. (without using fields[i]

Maybe you want to show the alert only once? depends...

const hasEmptyField = fields.some((field) => !field.value);

if (hasEmptyField) new NovaAlert(options);

to be continued... I really should work on my project now Let me know about your progress & we go from there?

BTW the animation (1st link) looks amazing!

adding animation when scrolling page

my object something like this :

handle functuin :

main function :

1 Answers1