Skip to content
jQuery Scratch Pad Plugin
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
cursors Added custom cursors (settings.cursor option) Oct 4, 2012
demo Cleaned out unnecessary code / files (ei: ads) Aug 13, 2013
images First Commit v1.2 Apr 15, 2012
lib Updated to 2.0.0 :) Apr 5, 2014
src Enable Origin headers when fetching foreground image to support CORS. Dec 4, 2014
test Updated demo. Apr 5, 2014
.gitignore Updated to 2.0.0 :) Apr 5, 2014
README.md
gruntfile.js Updated to 2.0.0 :) Apr 5, 2014
index.html
package.json Updated version and minified. Apr 14, 2014
wScratchPad.jquery.json
wScratchPad.min.js

README.md

wScratchPad.js

A jQuery plugin to mimic a scratch card or pad behaviour. Allowing you to scratch off an overlay as either a color or image.

Related Plugins

Settings

Available options with notes, the values here are the defaults.

$('#elem').wScratchPad({
  size        : 5,          // The size of the brush/scratch.
  bg          : '#cacaca',  // Background (image path or hex color).
  fg          : '#6699ff',  // Foreground (image path or hex color).
  realtime    : true,       // Calculates percentage in realitime.
  scratchDown : null,       // Set scratchDown callback.
  scratchUp   : null,       // Set scratchUp callback.
  scratchMove : null,       // Set scratcMove callback.
  cursor      : 'crosshair' // Set cursor.
});

Note on realtime, if set to false this will only send percentage calculations to the scratchUp and should be used to increase performance.

Note on bg and fg, these can be eitehr a valid hex color beginning with # otherwise it will default to trying to set an image.

Examples

Include the following files:

<script type="text/javascript" src="./wScratchPad.min.js"></script>

Percent scratched

$("#elem").wScratchPad({
  scratchDown: function(e, percent){ console.log(percent); },
  scratchMove: function(e, percent){ console.log(percent); },
  scratchUp: function(e, percent){ console.log(percent); }
});

Update on the Fly

var sp = $("#elem").wScratchPad();

sp.wScratchPad('size', 5);
sp.wScratchPad('cursor', 'url("./cursors/coin.png") 5 5, default');

// Or directly with element.

$("#elem").wScratchPad('image', './images/winner.png');

Methods

$('#elem').wScratchPad('reset');
$('#elem').wScratchPad('clear');
$('#elem').wScratchPad('enabled', <boolean>);

Resources

License

MIT licensed

Copyright (C) 2011-2012 Websanova http://www.websanova.com

You can’t perform that action at this time.