Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

91 lines (80 sloc) 2.884 kb
<!--
gury - A jQuery inspired canvas utility library
By Ryan Sandor Richards
-->
<!DOCTYPE html>
<html>
<head>
<title>events - By Ryan Sandor Richards</title>
<style type="text/css" media="screen">
#controls div {
display: inline-block;
padding: 5px;
margin-top: 10px;
background-color: #232;
color: #888;
width: 100px;
}
#controls div.active {
background-color: green;
color: white;
}
</style>
</head>
<body style="font-family: helvetica; background-color: #444; color: #ddd; text-align: center">
<h1>events</h1>
<p>By Ryan Sandor Richards</p>
<div id="content"></div>
<div id="controls">
<div id="mousedown">Mouse Down</div>
<div id="mouseup">Mouse Up</div>
<div id="click">Mouse Click</div><br>
<div id="mousemove">Mouse Move</div>
<div id="mouseenter">Mouse Enter</div>
<div id="mouseleave">Mouse Leave</div>
</div>
<!-- Nice little link back to the repo -->
<p><a href="http://github.com/rsandor/gury" style="color: white">Project on github</a></p>
<!-- Add jQuery for load behaviors -->
<script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<!-- Include the gury library -->
<script type="text/javascript" charset="utf-8" src="../gury.js"></script>
<!-- Include some shared helper classes -->
<script type="text/javascript" charset="utf-8" src="shared.js"></script>
<!-- Now script up a neato canvas scene! -->
<script type="text/javascript" charset="utf-8">
$(function() {
var timeout = null;
function handler(name) {
return function() {
if (name.match(/mouse(enter|leave)/)) {
this.toggleHover();
}
$('#'+name).addClass('active');
function trigger() {
$('#'+name).removeClass('active');
}
if (name == "mousemove") {
clearTimeout(timeout);
timeout = setTimeout(trigger, 250);
}
else {
setTimeout(trigger, 250);
}
};
}
gury = $g().size(200, 200)
.add('target', new Box(100, 100, 110, {color: '#363', theta: Math.PI / 4}))
.add('target', new Box(100, 100, 100, {color: '#696'}))
.add('target', new Circle(50, 50, 30, {color: '#363'}))
.click('target', handler('click'))
.mousedown('target', handler('mousedown'))
.mouseup('target', handler('mouseup'))
.mousemove('target', handler('mousemove'))
.mouseenter('target', handler('mouseenter'))
.mouseleave('target', handler('mouseleave'))
.place('#content').play(32);
});
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.