jQuery toggleClass example

Toggle class name on click in jQuery

by joshmoto

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>

SCSS

HTML {
  cursor: url("data:image/svg+xml,%3Csvg x='0px' y='0px' width='50px' height='50px' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50' cy='50' r='50' fill='%23000000' /%3E%3C/svg%3E") 25 25, auto;
}

JavaScript

// document on mouse move
$(document).on('mousemove', function(e) {

  // window dimensions
  winDimensions.x = $(window).outerWidth();
  winDimensions.y = $(window).outerHeight();

  // update cursor mouse position x and y
  cursorMousePos.x = e.pageX - $(this).scrollLeft();
  cursorMousePos.y = e.pageY - $(this).scrollTop();

  // set crosshair x y position css
  $('[data-o]', crosshair).css({
    left: cursorMousePos.x + 'px',
    top: cursorMousePos.y + 'px'
  })

  // set css var property --cursor-x position
  let x = $('[data-x]', crosshair);
  let y = $('[data-y]', crosshair);

  crosshairStyle(x, y);

});