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
|
// Dropdown menu control
function Dropdown(activatorId, dropdownId) {
// store activator and dropdown elements
this.activator = document.getElementById(activatorId);
this.dropdown = document.getElementById(dropdownId);
// wire up show/hide events
registerEventHandler(this.activator,'mouseover', getInstanceDelegate(this, "show"));
registerEventHandler(this.activator,'mouseout', getInstanceDelegate(this, "requestHide"));
registerEventHandler(this.dropdown,'mouseover', getInstanceDelegate(this, "show"));
registerEventHandler(this.dropdown,'mouseout', getInstanceDelegate(this, "requestHide"));
// fix visibility and position
this.dropdown.style.visibility = 'hidden';
this.dropdown.style.position = 'absolute';
this.reposition(null);
// wire up repositioning event
registerEventHandler(window, 'resize', getInstanceDelegate(this, "reposition"));
}
Dropdown.prototype.show = function(e) {
clearTimeout(this.timer);
this.dropdown.style.visibility = 'visible';
}
Dropdown.prototype.hide = function(e) {
this.dropdown.style.visibility = 'hidden';
}
Dropdown.prototype.requestHide = function(e) {
this.timer = setTimeout( getInstanceDelegate(this, "hide"), 250);
}
Dropdown.prototype.reposition = function(e) {
// get position of activator
var offsetLeft = 0;
var offsetTop = 0;
var offsetElement = this.activator;
while (offsetElement) {
offsetLeft += offsetElement.offsetLeft;
offsetTop += offsetElement.offsetTop;
offsetElement = offsetElement.offsetParent;
}
// set position of dropdown relative to it
this.dropdown.style.left = offsetLeft;
this.dropdown.style.top = offsetTop + this.activator.offsetHeight;
}
|
