Advanced Search

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>

Expand | Embed | Plain Text

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.