M
michael
How may the following script be modified to function with the list
structure below it?
In short: it is meant to apply a background style to groups of LI's and ULs
depeding on the URL filename.
<style>
..high {background-color: #99FFCC;}
..low {background-color: #33CC00;}
</style>
<script type="text/javascript">
function doClass(){
var As, ff, x;
var a = RegExp('.*/'); // Needed many times, compile for speed
var f = document.URL.replace(a,''); // filename of current page
var d = document.getElementById('menu');
var uls = d.getElementsByTagName('ul');
for (var i=0, j=uls.length; i<j; i++){
x = uls;
// If the UL className string includes word 'head'
if ( /\bhead\b/.test(x.className) ){
/* PS: my newsreader may remove forward slashes in the above regex */
// Get its A elements
As = x.getElementsByTagName('a');
// Search for matching file names
for (var k=0, m=As.length; k<m; k++) {
ff = As[k].href.replace(a,'');
// If match, modify the className string of the parent UL
if ( ff == f ){
x.className = x.className.replace(/\blow\b/,'high');
// No need to continue once we've found one
return;
}
}
}
}
}
</script>
<body onload="doClass()">
<ul id="menu">
<li><a href="z0.html">Flora & puna</a>
<ul>
<li><a href="z1.html">Pretty flowers</a></li>
<li><a href="z2.html">Deadly vines</a></li>
</ul>
</li>
<li><a href="z3.html">Aquatic creatures</a>
<ul class="sub">
<li><a href="z4.html">Pretty fish</a></li>
<li><a href="z5.html">Don't eat</a></li>
</ul>
</li>
</ul>
--
The script however was made to work with a different kind of list
structure, as below:
<div id="menu">
<ul class="head low">
<li><a href="z0.html">Flora & puna</a>
<ul class="sub">
<li><a href="z1.html">Pretty flowers</a></li>
<li><a href="z2.html">Deadly vines</a></li>
</ul>
</li>
</ul>
<ul class="head low">
<li><a href="z3.html">Aquatic creatures</a></li>
<ul class="sub">
<li><a href="z4.html">Pretty fish</a></li>
<li><a href="z5.html">Don't eat</a></li>
</ul>
</li>
</ul>
</div>
Although the above works in terms of colorising basic ULs, the structure
itself is not, as far as I know, compatible with further style methods that
would later make the hover dropdown menu, as below:
#menu, #menu ul {
padding: 0;
margin: 0;
list-style: none;
}
#menu a {
display: block;
width: 10em;
}
#menu li {
float: left;
width: 10em;
}
#menu li ul {
position: absolute;
width: 10em;
left: -999em;
}
#menu li:hover ul {
left: auto;
}
As such, could the Javascript be modified to work with the list structure
that work with these above style methods? So .high or .low styles would
still take affect for all LI's in each UL group where the filename is
matched, plus the one LI directly above each relevant UL group, which would
become the always visible headings of the complete CSS drop menu.
Thanks,
Michael
structure below it?
In short: it is meant to apply a background style to groups of LI's and ULs
depeding on the URL filename.
<style>
..high {background-color: #99FFCC;}
..low {background-color: #33CC00;}
</style>
<script type="text/javascript">
function doClass(){
var As, ff, x;
var a = RegExp('.*/'); // Needed many times, compile for speed
var f = document.URL.replace(a,''); // filename of current page
var d = document.getElementById('menu');
var uls = d.getElementsByTagName('ul');
for (var i=0, j=uls.length; i<j; i++){
x = uls;
// If the UL className string includes word 'head'
if ( /\bhead\b/.test(x.className) ){
/* PS: my newsreader may remove forward slashes in the above regex */
// Get its A elements
As = x.getElementsByTagName('a');
// Search for matching file names
for (var k=0, m=As.length; k<m; k++) {
ff = As[k].href.replace(a,'');
// If match, modify the className string of the parent UL
if ( ff == f ){
x.className = x.className.replace(/\blow\b/,'high');
// No need to continue once we've found one
return;
}
}
}
}
}
</script>
<body onload="doClass()">
<ul id="menu">
<li><a href="z0.html">Flora & puna</a>
<ul>
<li><a href="z1.html">Pretty flowers</a></li>
<li><a href="z2.html">Deadly vines</a></li>
</ul>
</li>
<li><a href="z3.html">Aquatic creatures</a>
<ul class="sub">
<li><a href="z4.html">Pretty fish</a></li>
<li><a href="z5.html">Don't eat</a></li>
</ul>
</li>
</ul>
--
The script however was made to work with a different kind of list
structure, as below:
<div id="menu">
<ul class="head low">
<li><a href="z0.html">Flora & puna</a>
<ul class="sub">
<li><a href="z1.html">Pretty flowers</a></li>
<li><a href="z2.html">Deadly vines</a></li>
</ul>
</li>
</ul>
<ul class="head low">
<li><a href="z3.html">Aquatic creatures</a></li>
<ul class="sub">
<li><a href="z4.html">Pretty fish</a></li>
<li><a href="z5.html">Don't eat</a></li>
</ul>
</li>
</ul>
</div>
Although the above works in terms of colorising basic ULs, the structure
itself is not, as far as I know, compatible with further style methods that
would later make the hover dropdown menu, as below:
#menu, #menu ul {
padding: 0;
margin: 0;
list-style: none;
}
#menu a {
display: block;
width: 10em;
}
#menu li {
float: left;
width: 10em;
}
#menu li ul {
position: absolute;
width: 10em;
left: -999em;
}
#menu li:hover ul {
left: auto;
}
As such, could the Javascript be modified to work with the list structure
that work with these above style methods? So .high or .low styles would
still take affect for all LI's in each UL group where the filename is
matched, plus the one LI directly above each relevant UL group, which would
become the always visible headings of the complete CSS drop menu.
Thanks,
Michael