Remove custom cursor on touch screen

Question

I have a custom cursor that I implemented using some JS found on here. It work's perfectly - BUT, I need to turn it off on touch screens, otherwise it just sits on the screen as a big yellow dot.

Unfortunately, apart from the inline styles, I don't understand the JS enough to edit it to achieve this.

This is the JS

$("body").append('<div class="cursor"></div>');
$("html").append('<style>html, body, .msty_notcur {cursor:none !important;}.cursor {z-index:10000000000000; mix-blend-mode: difference; position: fixed;background-color:#FDFF07; width:25px;height:25px;border-radius:100%;transform:translate(-50%,-50%);top:0px;left:0px;pointer-events:none; -webkit-transition: width 200ms, height 300ms; -webkit-transition: height 200ms, width:300ms; } .overlink {width:45px;height:45px; -webkit-transition: width 300ms, height 300ms; -webkit-transition: height 200ms, width:200ms;} .overtext {background-color:rgba(100,100,255,0.25) !important;border: 1px solid rgba(0,0,100,0.25) !important;}</style>');
var scrollY = 0, scrollX = 0;
$(document).mousemove(function(e){
   $(".cursor").css("top",e.pageY - scrollY + "px").css("left",e.pageX - scrollX + "px");
});
$(document).scroll(function(e){
   scrollY = $(window).scrollTop();
   scrollX = $(window).scrollLeft();
});
setInterval(function(){scroll = $(window).scrollTop();}, 1000);
$("*").hover(function(e){
   var index = -1;
   try {
      index = $(this).attr("class").toLowerCase().indexOf("button");
      if (index == -1) {
         index = $(this).attr("class").toLowerCase().indexOf("link");
      }
   }
   catch(e) {
      index = -1;
   }
   if($(this).css("cursor") == "pointer" || $(this).get(0).tagName == "A" || $(this).get(0).tagName == "BUTTON" || $(this).hasClass("msty_cur") || index > -1) {
      $(this).addClass("msty_cur");
      $(this).css("cursor","none");
      $(".cursor").addClass("overlink");
   }
   if($(this).css("cursor") != "none") {
      $(this).addClass("msty_notcur")
   }
}, function(e){
   $(this).css("cursor","none");
   $(".cursor").removeClass("overlink");
});

And the website where it is implemented is here

The difficulty I have with using just CSS is applying the mix-blend-mode to the cursor

Answer 1

Using JavaScript, your best bet is to try and detect the screen size. It looks like 768 is a safe bet for max-width.

You'd want to add both a conditional statement (for when the page loads) onresize for the document. I'd also wrap the cursor creation into a function for re-usability/convenience.

customCursor = () => {
  $("body").append('<div class="cursor"></div>');
  $("html").append('<style>.cursor {z-index:10000000000000; mix-blend-mode: difference; position: fixed;background-color:#FDFF07; width:25px;height:25px;border-radius:100%;transform:translate(-50%,-50%);top:0px;left:0px;pointer-events:none; -webkit-transition: width 200ms, height 300ms; -webkit-transition: height 200ms, width:300ms; } .overlink {width:45px;height:45px; -webkit-transition: width 300ms, height 300ms; -webkit-transition: height 200ms, width:200ms;} .overtext {background-color:rgba(100,100,255,0.25) !important;border: 1px solid rgba(0,0,100,0.25) !important;}</style>');

  var scrollY = 0,
    scrollX = 0;

  $(document).mousemove(function(e) {
    $(".cursor").css("top", e.pageY - scrollY + "px").css("left", e.pageX - scrollX + "px");
  });
  $(document).scroll(function(e) {
    scrollY = $(window).scrollTop();
    scrollX = $(window).scrollLeft();
  });
  setInterval(function() {
    scroll = $(window).scrollTop();
  }, 1000);
  $("*").hover(function(e) {
    var index = -1;

    try {

      index = $(this).attr("class").toLowerCase().indexOf("button");
      if (index == -1) {
        index = $(this).attr("class").toLowerCase().indexOf("link");
      }
    } catch (e) {
      index = -1;
    }
    if ($(this).css("cursor") == "pointer" || $(this).get(0).tagName == "A" || $(this).get(0).tagName == "BUTTON" || $(this).hasClass("msty_cur") || index > -1) {

      $(this).addClass("msty_cur");
      $(this).css("cursor", "none");
      $(".cursor").addClass("overlink");
    }
    if ($(this).css("cursor") != "none") {
      $(this).addClass("msty_notcur")
    }
  }, function(e) {
    $(this).css("cursor", "none");
    $(".cursor").removeClass("overlink");
  });
}

if (window.innerWidth <= 768) {
  document.getElementsByTagName('BODY')[0].style.cursor = 'default'
} else {
  customCursor()
}

$(window).resize(function() {
  if (window.innerWidth <= 768) {
    var cursor = $(".cursor")
    cursor.remove()
    $('body').css({
      cursor: "default",
    })
  } else {
    $('body').css({
      cursor: "none",
    })
    customCursor()
  }
});

Honestly, your best bet is to utilize CSS more as opposed to using jQuery to append/manipulate things but that's up to you.