Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
tree: f0411e40fb
Fetching contributors…

Cannot retrieve contributors at this time

119 lines (100 sloc) 3.341 kb
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name='HandheldFriendly' content='True' />
<!--<meta name='viewport' content='initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' />-->
<meta name='viewport' content='user-scalable=0' />
<meta name="viewport" content="width=device-width" />
<title>PLEASE BRUSH MY TEETH ! jQuery.eraser demo</title>
<style type="text/css">
body {
background: #FFF;
color: #FFF;
margin: 5px;
padding: 0px;
margin-bottom: 45px;
text-align: center;
font-family: Helvetica, Arial;
}
a {
color: #000;
}
a.box {
text-decoration: none;
display: inline-block;
color: #000;
background: #DDD;
padding: 10px;
margin: 10px;
}
.big {
font-size: 2em;
display: inline-block;
margin: 10px;
}
.container {
position: relative;
display: inline-block;
width: 675px;
height: 850px;
}
#robot {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
#redux {
position: absolute;
top: 444px;
left: 208px;
z-index: 2;
}
</style>
</head>
<body>
<span class="container">
<img id="robot" src="img/please.jpg" />
<img id="redux" src="img/overlay.jpg" />
</span>
<p>
<a href="#" onclick="reset(event);" class="box"> RESET </a>
<a href="#" onclick="remove(event);" class="box"> CLEAR </a>
</p>
<script src='js/jquery-1.6.2.min.js' type='text/javascript'></script>
<script src='js/jquery.eraser.js' type='text/javascript'></script>
<script type = "text/javascript">
addEventListener( "load", init, false );
function init( event ) {
$("#redux").eraser( { size: 10 } );
// you can alse specify the brush size (in pixel) by using options :
// $("#redux").eraser({size: 20});
}
function remove(event) {
$("#redux").eraser('clear');
event.preventDefault();
}
function reset(event) {
$("#redux").eraser('reset');
event.preventDefault();
}
</script>
<p><a href="index.htm">Made with jQuery.eraser()</a></p>
<p>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone></g:plusone>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="boblemarin">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<iframe src="http://www.facebook.com/plugins/like.php?app_id=221981371170477&amp;href=http%3A%2F%2Fminimal.be%2Flab%2FjQuery.eraser%2Fteeth.htm&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:160px; height:21px;" allowTransparency="true"></iframe>
</p>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-9528692-4");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.