-
Notifications
You must be signed in to change notification settings - Fork 54
/
index.html
76 lines (68 loc) · 2.9 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Hoverintent | Tristen</title>
<link href='site.css' rel='stylesheet'>
</head>
<body>
<div class='fixed-700'>
<p class='intro'>Sometimes you want to limit when a mouse event is fired if a user has unintentionaly hovered over an element. <a href='https://github.com/tristen/hoverintent'>hoverintent</a> tracks the sensitivity of a mouse position and fires an event within a threshold. You can also pass additional options that adjusts when an event is triggered. <a href='https://raw.github.com/tristen/hoverintent/gh-pages/dist/hoverintent.min.js'>Download the source</a> and read its <a href='https://github.com/tristen/hoverintent#hoverintent'>usage on GitHub.</a></p>
<ul class='examples'>
<li id='first' tabindex="0">
Plain old hover
<span class='popup'>Hi there</span>
</li>
<li id='second' tabindex="0">
hoverintent
<span class='popup'>Hi there</span>
</li>
<li id='third' tabindex="0">
Custom settings
<span class='popup'>Hi there</span>
</li>
</ul>
</div>
<script src='dist/hoverintent.min.js'></script>
<script>
// The plain ol hover way
///////////////////////////
var first = document.getElementById('first');
addEvent(first, 'mouseover', function(e) {
this.className = 'on';
});
addEvent(first, 'mouseout', function() {
this.className = 'off';
});
// A helper function for cross-browser events
function addEvent(object, event, method) {
if (object.attachEvent) {
object['e'+event+method] = method;
object[event+method] = function(){object['e'+event+method](window.event);};
object.attachEvent('on'+event, object[event+method]);
} else {
object.addEventListener(event, method, false);
}
}
// The hoverintent way
///////////////////////////
var second = document.getElementById('second');
var third = document.getElementById('third');
var hoverTwo = hoverintent(second, function(e) {
this.className = 'on';
}, function(e) {
this.className = 'off';
});
var hoverThree = hoverintent(third, function() {
this.className = 'on';
}, function(e) {
this.className = 'off';
}).options({
timeout:500,
handleFocus: true
});
var analytics=analytics||[];(function(){var e=["identify","track","trackLink","trackForm","trackClick","trackSubmit","page","pageview","ab","alias","ready","group"],t=function(e){return function(){analytics.push([e].concat(Array.prototype.slice.call(arguments,0)))}};for(var n=0;n<e.length;n++)analytics[e[n]]=t(e[n])})(),analytics.load=function(e){var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src=("https:"===document.location.protocol?"https://":"http://")+"d2dq2ahtl5zl1z.cloudfront.net/analytics.js/v1/"+e+"/analytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n)};
analytics.load("ppyh4q5xb3");
</script>
</body>
</html>