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"); } ); }); });
Advertisement
Answer
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