0

i am facing issue on jquery while using hover listener event, the code is just working on desktop while on mobile i can't get it to work with the hover listener.So i just wanna implement click function instead of hover when the site is being displayed on mobile and hover on pc/laptop.I am sharing my code below. Also i am using blastjs and animate.css for text animation.

Header Element for the animation

<h2>About Me..</h2>

Jquery Code

$(document).ready(function () {
  $("h2").blast({
    delimiter: "character",
    tag: "span",
  });

  var pageAbout = $(".about_wrapper");

  $(".blast").on("hover", function () {
    var el = $(this);

    $(this).addClass("animated rubberBand");
    $(this).one(
      "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend",
      function () {
        el.removeClass("animated rubberBand");
      }
    );
  });
});
Marshal
  • 16
  • 3
  • 1
    A rough idea would be to check *within* the function - so include both `hover` and `click` and have the first line make your check and return if it fails. – freedomn-m Mar 04 '22 at 10:05
  • Hello thanks for helping but it would be greatfull if you can elaborate just a bit more – Marshal Mar 04 '22 at 10:12

1 Answers1

1

You can check the device width before making the event listener

$(document).ready(function () {
  $("h2").blast({
   delimiter: "character",
   tag: "span",
  });

  // You choose the event depending on the screen width
  let event;
  screen.width > 400 ? event = 'hover' : event = 'click'
  //
  var pageAbout = $(".about_wrapper");

  $(".blast").on(event, function () {
    var el = $(this);

    $(this).addClass("animated rubberBand");
    $(this).one(
      "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend",
  function () {
    el.removeClass("animated rubberBand");
  }
);

}); });

If the screen.width was not suitable, you can find some ways to detect the device type on this discussion

Chakib Salah
  • 499
  • 1
  • 10