A jQuery plugin to mimic a scratch card or pad behaviour. Allowing you to scratch off an overlay as either a color or image.
- wPaint - Simple paint drawing plugin.
- wColorPicker - Color pallette seleciton plugin.
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.
Include the following files:
<script type="text/javascript" src="./wScratchPad.min.js"></script>
$("#elem").wScratchPad({
scratchDown: function(e, percent){ console.log(percent); },
scratchMove: function(e, percent){ console.log(percent); },
scratchUp: function(e, percent){ console.log(percent); }
});
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');
$('#elem').wScratchPad('reset');
$('#elem').wScratchPad('clear');
$('#elem').wScratchPad('enabled', <boolean>);
- More jQuery plugins by Websanova
- Websanova JavaScript Extensions Project
- jQuery Plugin Development Boilerplate
- The Ultimate Guide to Writing jQuery Plugins
MIT licensed
Copyright (C) 2011-2012 Websanova https://www.websanova.com