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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
|
/*
* ul2finder
* written by Christian Heilmann (http://icant.co.uk)
* turns the nested list with the ID "finder" into a dynamic list
* uses the CSS classes defined in the variables
*/
function ul2finder()
{
// Define variables used and classes to be applied/removed
var i,uls,als,finder;
var parentClass='parent';
var showClass='shown';
var hideClass='hidden';
var openClass='open';
// check if our finder list exists, if not, stop all activities
finder=document.getElementById('finder');
if(!finder){return;}
// add the class domenabled to the body
cssjs('add',document.body,'domenabled')
// loop through all lists inside finder, position and hide them
// by applying the class hidden
uls=document.getElementById('finder').getElementsByTagName('ul');
for(i=0;i<uls.length;i++)
{
cssjs('add',uls[i],hideClass);
}
// loop through all links of inside finder
lis=document.getElementById('finder').getElementsByTagName('li');
for(i=0;i<lis.length;i++)
{
// if the li containing the link has no nested list, skip this one
if(!lis[i].getElementsByTagName('ul')[0])
{
continue;
}
var newa=document.createElement('a');
newa.href='#';
newa.appendChild(document.createTextNode(lis[i].firstChild.nodeValue));
lis[i].replaceChild(newa,lis[i].firstChild);
// otherwise apply the parent class
cssjs('add',newa,parentClass);
// if the user clicks on the link
lis[i].getElementsByTagName('a')[0].onclick=function()
{
// loop through all lists inside finder
for(var i=0;i<uls.length;i++)
{
// avoid the list connected to this link
var found=false;
for(j=0;j<uls[i].getElementsByTagName('ul').length;j++)
{
if(uls[i].getElementsByTagName('ul')[j] ==
this.parentNode.getElementsByTagName('ul')[0])
{
found=true;
break;
}
}
// and hide all others
if(!found)
{
cssjs('add',uls[i],hideClass)
cssjs('remove',uls[i],showClass)
cssjs('remove',uls[i].parentNode.getElementsByTagName('a')[0],openClass)
cssjs('add',uls[i].parentNode.getElementsByTagName('a')[0],parentClass)
}
}
// change the current link from parent to open
cssjs('swap',this,parentClass,openClass)
// show the current nested list
cssjs('add',this.parentNode.getElementsByTagName('ul')[0],showClass)
// don't follow the real HREF of the link
return false;
}
}
/*
* cssjs
* written by Christian Heilmann (http://icant.co.uk)
* eases the dynamic application of CSS classes via DOM
* parameters: action a, object o and class names c1 and c2 (c2 optional)
* actions: swap exchanges c1 and c2 in object o
* add adds class c1 to object o
* remove removes class c1 from object o
* check tests if class c1 is applied to object o
* example: cssjs('swap',document.getElementById('foo'),'bar','baz');
*/
function cssjs(a,o,c1,c2)
{
switch (a){
case 'swap':
o.className=!cssjs('check',o,c1)?o.className.replace(c2,c1):o.className.replace(c1,c2);
break;
case 'add':
if(!cssjs('check',o,c1)){o.className+=o.className?' '+c1:c1;}
break;
case 'remove':
var rep=o.className.match(' '+c1)?' '+c1:c1;
o.className=o.className.replace(rep,'');
break;
case 'check':
return new RegExp('\\b'+c1+'\\b').test(o.className)
break;
}
}
}
// Check if the browser supports DOM, and start the script if it does.
if(document.getElementById && document.createTextNode)
{
window.onload=ul2finder;
}
|
