2011-09-08 01:30:35 +00:00
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>Hover tests</title>
|
2012-01-12 02:35:13 +00:00
|
|
|
<script src="data/include_js.php"></script>
|
2011-09-08 01:30:35 +00:00
|
|
|
<style>
|
|
|
|
|
/* Remove body dimensions so we can test enter/leave to surrounding browser chrome */
|
|
|
|
|
body, html {
|
|
|
|
|
border: 0;
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
}
|
|
|
|
|
p {
|
|
|
|
|
margin: 2px 0;
|
|
|
|
|
}
|
|
|
|
|
.hover-box {
|
|
|
|
|
background: #f33;
|
|
|
|
|
padding: 3px;
|
|
|
|
|
margin: 10px 40px 20px 0;
|
|
|
|
|
}
|
|
|
|
|
.hover-status {
|
|
|
|
|
background: #f66;
|
|
|
|
|
padding: 1px;
|
|
|
|
|
}
|
|
|
|
|
.hover-inside {
|
|
|
|
|
background: #6f6;
|
|
|
|
|
padding: 1px;
|
|
|
|
|
margin: 8px auto;
|
|
|
|
|
width: 40%;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2012-05-18 17:28:50 +00:00
|
|
|
<h2>Hover (mouse{over,out,enter,leave}) Tests</h2>
|
2011-09-08 01:30:35 +00:00
|
|
|
<p>Be sure to try moving the mouse out of the browser via the left side on each test.</p>
|
|
|
|
|
<div id="wrapper">
|
2012-05-18 17:28:50 +00:00
|
|
|
|
2011-09-08 01:30:35 +00:00
|
|
|
<div id="hoverbox" class="hover-box">
|
2012-05-18 17:28:50 +00:00
|
|
|
<div class="hover-status">
|
2011-09-08 01:30:35 +00:00
|
|
|
<button>Activate</button>
|
|
|
|
|
.hover() in/out: <span class="ins">0</span> / <span class="outs">0</span>
|
|
|
|
|
</div>
|
2012-05-18 17:28:50 +00:00
|
|
|
<div class="hover-inside">
|
|
|
|
|
Mouse over here should NOT trigger the counter.
|
|
|
|
|
</div>
|
2011-09-08 01:30:35 +00:00
|
|
|
</div>
|
2011-09-08 13:03:16 +00:00
|
|
|
<div id="liveenterbox" class="hover-box">
|
2012-05-18 17:28:50 +00:00
|
|
|
<div class="hover-status">
|
2011-09-08 01:30:35 +00:00
|
|
|
<button>Activate</button>
|
|
|
|
|
Live enter/leave: <span class="ins">0</span> / <span class="outs">0</span>
|
|
|
|
|
</div>
|
2012-05-18 17:28:50 +00:00
|
|
|
<div class="hover-inside">
|
|
|
|
|
Mouse over here should NOT trigger the counter.
|
|
|
|
|
</div>
|
2011-09-08 01:30:35 +00:00
|
|
|
</div>
|
|
|
|
|
<div id="delegateenterbox" class="hover-box">
|
2012-05-18 17:28:50 +00:00
|
|
|
<div class="hover-status">
|
2011-09-08 01:30:35 +00:00
|
|
|
<button>Activate</button>
|
|
|
|
|
Delegated enter/leave: <span class="ins">0</span> / <span class="outs">0</span>
|
|
|
|
|
</div>
|
2012-05-18 17:28:50 +00:00
|
|
|
<div class="hover-inside">
|
|
|
|
|
Mouse over here should NOT trigger the counter.
|
|
|
|
|
</div>
|
2011-09-08 01:30:35 +00:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="overbox" class="hover-box">
|
2012-05-18 17:28:50 +00:00
|
|
|
<div class="hover-status">
|
2011-09-08 01:30:35 +00:00
|
|
|
<button>Activate</button>
|
|
|
|
|
Bind over/out: <span class="ins">0</span> / <span class="outs">0</span>
|
|
|
|
|
</div>
|
2012-05-18 17:28:50 +00:00
|
|
|
<div class="hover-inside">
|
|
|
|
|
Mouse over here SHOULD trigger the counter.
|
|
|
|
|
</div>
|
2011-09-08 01:30:35 +00:00
|
|
|
</div>
|
2011-09-08 13:03:16 +00:00
|
|
|
<div id="liveoverbox" class="hover-box">
|
2012-05-18 17:28:50 +00:00
|
|
|
<div class="hover-status">
|
2011-09-08 13:03:16 +00:00
|
|
|
<button>Activate</button>
|
|
|
|
|
Live over/out: <span class="ins">0</span> / <span class="outs">0</span>
|
|
|
|
|
</div>
|
2012-05-18 17:28:50 +00:00
|
|
|
<div class="hover-inside">
|
|
|
|
|
Mouse over here SHOULD trigger the counter.
|
|
|
|
|
</div>
|
2011-09-08 13:03:16 +00:00
|
|
|
</div>
|
2011-09-08 01:30:35 +00:00
|
|
|
<div id="delegateoverbox" class="hover-box">
|
2012-05-18 17:28:50 +00:00
|
|
|
<div class="hover-status">
|
2011-09-08 01:30:35 +00:00
|
|
|
<button>Activate</button>
|
|
|
|
|
Delegated over/out: <span class="ins">0</span> / <span class="outs">0</span>
|
|
|
|
|
</div>
|
2012-05-18 17:28:50 +00:00
|
|
|
<div class="hover-inside">
|
|
|
|
|
Mouse over here SHOULD trigger the counter.
|
|
|
|
|
</div>
|
2011-09-08 01:30:35 +00:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div> <!-- wrapper -->
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
$(function(){
|
|
|
|
|
|
|
|
|
|
var x,
|
|
|
|
|
countIns = function() {
|
|
|
|
|
var d = $(this).data();
|
|
|
|
|
$("span.ins", this).text(++d.ins);
|
|
|
|
|
},
|
|
|
|
|
countOuts = function() {
|
|
|
|
|
var d = $(this).data();
|
|
|
|
|
$("span.outs", this).text(++d.outs);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// Tests can be activated separately or in combination to check for interference
|
|
|
|
|
|
|
|
|
|
$("#hoverbox button").click(function(){
|
|
|
|
|
$("#hoverbox")
|
|
|
|
|
.data({ ins: 0, outs: 0 })
|
|
|
|
|
.hover( countIns, countOuts );
|
|
|
|
|
$(this).remove();
|
|
|
|
|
});
|
|
|
|
|
$("#delegateenterbox button").click(function(){
|
|
|
|
|
$("html")
|
|
|
|
|
.find("#delegateenterbox").data({ ins: 0, outs: 0 }).end()
|
|
|
|
|
.delegate("#delegateenterbox", "mouseenter", countIns )
|
|
|
|
|
.delegate("#delegateenterbox", "mouseleave", countOuts );
|
|
|
|
|
$(this).remove();
|
|
|
|
|
});
|
2011-09-08 13:03:16 +00:00
|
|
|
$("#liveenterbox button").click(function(){
|
|
|
|
|
$("#liveenterbox")
|
2011-09-08 01:30:35 +00:00
|
|
|
.data({ ins: 0, outs: 0 })
|
|
|
|
|
.live("mouseenter", countIns )
|
|
|
|
|
.live("mouseleave", countOuts );
|
|
|
|
|
$(this).remove();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
$("#overbox button").click(function(){
|
|
|
|
|
$("#overbox")
|
|
|
|
|
.data({ ins: 0, outs: 0 })
|
|
|
|
|
.bind("mouseover", countIns )
|
|
|
|
|
.bind("mouseout", countOuts );
|
|
|
|
|
$(this).remove();
|
|
|
|
|
});
|
2011-09-08 13:03:16 +00:00
|
|
|
$("#liveoverbox button").click(function(){
|
|
|
|
|
$("#liveoverbox")
|
|
|
|
|
.data({ ins: 0, outs: 0 })
|
|
|
|
|
.live("mouseover", countIns )
|
|
|
|
|
.live("mouseout", countOuts );
|
|
|
|
|
$(this).remove();
|
|
|
|
|
});
|
2011-09-08 01:30:35 +00:00
|
|
|
$("#delegateoverbox button").click(function(){
|
|
|
|
|
$(document)
|
|
|
|
|
.find("#delegateoverbox").data({ ins: 0, outs: 0 }).end()
|
|
|
|
|
.delegate("#delegateoverbox", "mouseover", countIns )
|
|
|
|
|
.delegate("#delegateoverbox", "mouseout", countOuts );
|
|
|
|
|
$(this).remove();
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
