gury
gury copied to clipboard
.mouseenter/.mouseleave not working?
Hello there, I'm really enjoying this library, but I .mouseenter/.mouseleave isn't working for some reason. Any ideas?
Code:
<!DOCTYPE html><html>
<head>
<title>Guryyyyy</title>
<style>
* {
margin:0;
padding:0;
}
html, body{
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
<script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script type="text/javascript" charset="utf-8" src="http://github.com/downloads/rsandor/gury/gury.min.js"></script>
</head>
<body>
</body>
<script type="text/javascript" charset="utf-8">
function coordinates(x, y) {
if (typeof x === "undefined") {
this.x = 0;
} else {
this.x = x;
}
if (typeof y === "undefined") {
this.y = 0;
} else {
this.y = y;
}
};
var ANCHOR_TOP_LEFT = new coordinates();
var ANCHOR_TOP_RIGHT = new coordinates(window.innerWidth);
var ANCHOR_BOT_LEFT = new coordinates(0, window.innerHeight);
var ANCHOR_BOT_RIGHT = new coordinates(window.innerWidth, window.innerHeight);
g = $g().size(ANCHOR_BOT_RIGHT.x, ANCHOR_BOT_RIGHT.y).background("black").place('body');
function boxy(width) {
this.width = width;
}
boxy.prototype.draw = function(ctx,canvas) {
ctx.fillStyle = "#FFF";
ctx.beginPath();
ctx.rect((0.05*ANCHOR_BOT_RIGHT.x),(0.05*ANCHOR_BOT_RIGHT.y),this.width,(0.9*ANCHOR_BOT_RIGHT.y));
ctx.fill();
};
g.add('box', new boxy(100));
//Click works great
//g.click('box', function(e){this.width += 10;});
g.mouseenter('box', function(e){this.width += 10;});
g.play(32);
</script>
</html>
I'm seeing the same issue on latest Chrome (v. 12.0.742.122). Any resolution?
Thanks for the great work, btw.
I'm also seeing the same problem on Firefox 7 and Chrome 14.
It seems like .mouseenter and .mouseleave only start working after a call to .mousemove.
I can confirm this, mousemove is required first.