This is a jQuery plugin that allows you to create UPPERCASE english alphabets in a 5X5 matrix. Its very easy to use -
- Include jQuery js library
<script src="<path to jQuery.version.js>"><script>
- Include this library
<script src="./js/jquery.digitalwrite.js"><script>
OR use the minified version<script src="./js/jquery.digitalwrite.min.js"><script>
- And tadaa! - for any html dom element call the
digitalwritemethod!
$("#target").digitalwrite({char: 'W'});
Properties are passed as parameter, for example:
$("#target").digitalwrite({char: 'W'});: here{char: 'W'}is the charecter property! Other properties which are customisable are:
| Property | Description |
|---|---|
char |
(REQUIRED) Charecter to print: $("#target").digitalwrite({char: 'W'}); |
width |
Width of the charecter block in px $("#target").digitalwrite({char: 'W', width: 100}); |
height |
Height of the charecter block in px $("#target").digitalwrite({char: 'W', height: 100}); |
background |
background of the charecter block $("#target").digitalwrite({char: 'W', background: 'red'});$("#target").digitalwrite({char: 'W', background: 'rgb(255, 255, 0)'});$("#target").digitalwrite({char: 'W', background: 'rgba(0, 0, 0, 0.1)'});$("#target").digitalwrite({char: 'W', background: '#abc123'});
|
border |
Border of the charecter block in px $("#target").digitalwrite({char: 'W', border: '1px dashed red'}); |
animation |
animation you expect for final transition! The categories are: motion, spiral, contract & fade
Note that
|
$("#m20").digitalwrite({char: 'M', height: 20, width: 20, animation: 'none'});$("#m40").digitalwrite({char: 'M', height: 40, width: 40, animation: 'none'});$("#m60").digitalwrite({char: 'M', height: 60, width: 60, animation: 'none'});$("#m80").digitalwrite({char: 'M', height: 80, width: 80, animation: 'none'});$("#m100").digitalwrite({char: 'M', height: 100, width: 100, animation: 'none'});$("#m120").digitalwrite({char: 'M', height: 120, width: 120, animation: 'none'});$("#c1").digitalwrite({char: 'M', background: 'rgba(0, 0, 0, .1)'});$("#c2").digitalwrite({char: 'I', background: 'rgba(255, 0, 0, .1)', border: '1px dotted red'});$("#c3").digitalwrite({char: 'N', background: 'yellow', border: '1px solid red'});$("#c4").digitalwrite({char: 'H', background: 'yellowGreen', border: '1px solid green'});$("#c5").digitalwrite({char: 'A'});$("#c6").digitalwrite({char: 'Z', background: 'red', border: '1px solid red'});$("#m1").digitalwrite({char: 'M', background: 'rgba(0, 0, 0, .1)'});$("#m2").digitalwrite({char: 'M', background: 'rgba(0, 0, 0, .1)', animation: 'spiral'});$("#m3").digitalwrite({char: 'M', background: 'rgba(0, 0, 0, .1)', animation: 'contract'});$("#m4").digitalwrite({char: 'M', background: 'rgba(0, 0, 0, .1)', animation: 'fade'});