Return to Snippet

Revision: 54142
at December 11, 2011 22:25 by schmizpeter


Initial Code
(function($) {

	// needs to be defined in the used css (body.red *::selection {})
	// supported in IE9+, FF 1.5+, Opera 9.5+, Safari 1.1+, Chrome 2+
	var colors = ['red', 'blue', 'yellow', 'purple'],
		currentColor, startX, startY, startTime = 0,
		timeLimit = 100,
		threshold = 20;

	$(window).mousedown(function(e) {
		startX = e.clientX;
		startY = e.clientY;
		startTime = new Date().getTime();
	}).mouseup(function(e) {
		if ((Math.abs(e.clientX - startX) > threshold || Math.abs(e.clientX - startY) > threshold) && (new Date().getTime() - startTime > timeLimit)) {
			$('body').removeClass(colors.join(' ')).addClass(colors[currentColor < colors.length - 1 ? ++currentColor : currentColor = 0]);
			console.log(currentColor);
		}
	});

})(jQuery);

Initial URL


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

Initial Title
Custom selection color

Initial Tags
color

Initial Language
jQuery