1
\$\begingroup\$

I created floating input labels, however, I don't think the way I wrote the code is the best way and seems redundant. For example I'm targeting the same elements more than once in different functions and using 3 different timelines, two of which are the reverse of the other. Can anyone suggest a better way of writing this so it's more modular?

// INPUT CONTAINER
const container = $(".form-group");

// CLICK EVENT
container.on("focusin", function() {

  // TARGET ELEMENTS
  const label = $(this).find(".control-label");
  const input = $(this).find(".form-control");

  // TIMELINE INIT
  this.tl = new TimelineMax();

  // TWEEN
  this.tl.to(label, 0.25, {y: -20, fontSize: 12, ease: Power2.easeNone});  

});

// FOCUSOUT EVENT
container.on("focusout", function() {

  // TIMELINE INIT
  this.tl = new TimelineMax();

  // TARGET ELEMENTS
  const input = $(this).find(".form-control");
  const label = $(this).find(".control-label");

  // VALUE CHECK
  if (!input.val()) {

    // TWEEN
    this.tl.to(label, 0.25, {y: '-11', fontSize: 16, ease: Power2.easeNone});

  }

});


// CHECK FOR PREFILLED INPUT
(function() {

  $(container).each((index, element) => {

    // console.log(element);

    // TARGET ELEMENTS
    const label = $(element).find(".control-label");
    const input = $(element).find(".form-control");

    console.log(input.val());

    if(input.val() !== "") {

      // TIMELINE INIT
      this.tl = new TimelineMax();  

      // TWEEN
      this.tl.set(label, {y: -20, fontSize: 12, ease: Power2.easeNone});  

    }    

  });

}());
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.