Custom selection color


/ Published in: jQuery
Save to your folder(s)

<p>Little snippet, which helps to use custom colored selections.
All you need is to setup the right style and use this snippet!</p>


Copy this code and paste it in your HTML
  1. (function($) {
  2.  
  3. // needs to be defined in the used css (body.red *::selection {})
  4. // supported in IE9+, FF 1.5+, Opera 9.5+, Safari 1.1+, Chrome 2+
  5. var colors = ['red', 'blue', 'yellow', 'purple'],
  6. currentColor, startX, startY, startTime = 0,
  7. timeLimit = 100,
  8. threshold = 20;
  9.  
  10. $(window).mousedown(function(e) {
  11. startX = e.clientX;
  12. startY = e.clientY;
  13. startTime = new Date().getTime();
  14. }).mouseup(function(e) {
  15. if ((Math.abs(e.clientX - startX) > threshold || Math.abs(e.clientX - startY) > threshold) && (new Date().getTime() - startTime > timeLimit)) {
  16. $('body').removeClass(colors.join(' ')).addClass(colors[currentColor < colors.length - 1 ? ++currentColor : currentColor = 0]);
  17. console.log(currentColor);
  18. }
  19. });
  20.  
  21. })(jQuery);

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.