Get all href values in <ul> group and compare with current url

[michael]

Is it possible to get all href URLs contained in a unordered list and place
them in an array?
Or in fact two different arrays, differently named one for each <ul> group?

<ul>
<li><a href="lemurs.ht ml">Lemurs</a></li>
<li><a href="chameleon s.html">Chamele ons</a></li>
</ul>

<ul>
<li><a href="sharks.ht ml">Sharks</a></li>
<li><a href="crocs.htm l">Crocodile s</a></li>
</ul>

I want to fetch an array of the links within a <ul> group, and
document.write the above, but with class variable in which I can
set a different value, depending on if the current url filename matches
exactly any one of the links within the <ul> group the <li> belongs to.

More specifically, I would like to ...

document.write( '<li class'+myvariab le+'>')
|
... class 'green' or 'blue' -------'
depending on whether filename in any href contained
in an <li> of the <ul> group it is in.
If an exact match is found, write out green, if not blue.

The file name portion of the current URL I simply get through:

var f = window.location .href;
file = i.substring (f.lastIndexOf( '/') +1);

It is for drop-down nav-system whereby all list items would of a ul group
would appear either one of two colours as specified in css properties. All
links are internal links on the same domain so one would always match.

I could naturally do it all by having a pre-typed list of all filenames and
run each <li> through an if statement before writing it out. But as there
will be many <li>'s I would prefer a more typeless method if possible.

Many thanks for any tips!

Michael

--
(1) Everything depends.
(2) Nothing is always.
(3) Everything is sometimes.

[michael]

> interested in descendant ULs, you may be) as an example, but my idea

of what you are trying to do is probably very different to what you
are actually doing.

This looks convertable to exactly what I need, perfect!

And code can't get much shorter. Only, I get a javascript error:

--
Error: illegal character
Source File: file:///tmp/z2.html
Line: 24, Column: 10
Source Code:
if ( \bhead\b.test(x .className) ){

Error: doClass is not defined
--

I don't know how to fix that, I guess second error is due to the first.

Many thanks,
Michael
--
The first duty of a revolutionary is to get away with it.
-- Abbie Hoffman

[RobG]

michael wrote:

interested in descendant ULs, you may be) as an example, but my idea
of what you are trying to do is probably very different to what you
are actually doing.

This looks convertable to exactly what I need, perfect!

And code can't get much shorter. Only, I get a javascript error:

--
Error: illegal character
Source File: file:///tmp/z2.html
Line: 24, Column: 10
Source Code:
if ( \bhead\b.test(x .className) ){

Error: doClass is not defined
--

I don't know how to fix that, I guess second error is due to the first.

Many thanks,
Michael
--
The first duty of a revolutionary is to get away with it.
-- Abbie Hoffman

Don't know why you get the error, I tested in IE and Firefox. Have
you created files for each link? And included the modified URL/href
line?

--
Rob

[Michael Winter]

On 05/05/2005 03:50, RobG wrote:

[snip]

Sorry, forgot IE doesn't do document.URI, try this: [...]

Not URI, no, but URL, yes. Unless Microsoft are lying in their
documentation, it's been included in all versions, on all supported
platforms, since 4.0.

Have you found a version where it fails to work, or are you just
assuming it doesn't?

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

[Michael Winter]

On 05/05/2005 06:42, michael wrote:

[snip]

I get a javascript error:
[snip]
if ( \bhead\b.test(x .className) ){
Where have the forward slashes gone?

if(/\bhead\b/.test(x.classNa me)) {
Error: doClass is not defined
--

I don't know how to fix that, I guess second error is due to the first.
Yes. The parsing error within the function causes the parser to halt the
creation of the function object. When the browser tries to call doClass
in response to the load event, it fails as the object doesn't exist.
--
The first duty of a revolutionary is to get away with it.
-- Abbie Hoffman

FYI: Your signature separator seems to be broken. It should be
dash-dash-space.

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

[michael]

> Where have the forward slashes gone?

Thanks for mentioning it, I suspect something's wrong with my Linux
font-config set-up or X-windows, or just the newsreader itself.
I just viewed source of the posting and indeed found the missing forward
slashes- I shall try again with "/" and I'm sure it will work much better!

Michael

--
"Don't worry about people stealing your ideas. If your ideas are any
good, you'll have to ram them down people's throats."
-- Howard Aiken

[michael]

> <li><a href="z4.html"> Pretty&nbsp;fis h</a></li>

<li><a href="z5.html"> Don&#39t&nbsp;eat</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>

This works great!

But does anyone know how to get it working as a horizontally aligned drop
menu, only showing 'sub' list items when hovering over the first <li> of
each <ul class="head low">, so if for example hovering over Flora & Fauna
or any of its sub-links, show:

[Flora & funa] [Aquatic creatures[
[Pretty flowers]
[Deadly vines]

And retaining the background scheme for all items, but with a variable, so
the current page is not actually a link?

--
Blore's Razor:
Given a choice between two theories, take the one which is
funnier.

[michael]

I pieced together a hover-drop-menu derived from
htmldog.com/articles/suckerfish/dropdowns with the colour-by-URL modifier
script solution as posted by Rob earlier.

The new styles basically removes the sub-listed items from view, leaving
only the first LI of the <ul class="head low"> visible until mouse hovers
over it, to bring its sub-points back into view.

The background colour works for the LI's on top, which are always visible,
but not for the sub-points for some reason.
Although font styles do take effect across a complete lists, for example: ..

..high {background-color: #99FFCC; font-size:80%;}

... makes a smaller font on all items in the group containing current URL.

Anyone has any idea why the background colours doesn't take effect behind
the sub-points?

See complete page below:

<html><head><ti tle></title>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<style type="text/css">

#menu, #menu ul {
padding: 0;
margin: 0;
list-style:none;
}

#menu a {
display: block:
width: 10em:
}

#menu ul {
float: left;
width: 10em;
}

#menu li ul {
position: absolute;
width: 10em;
left: -999em;
}

#menu li:hover ul {
left: auto;
}

#menu li:hover ul{
left: auto;
}
#menu li.sfhover ul{ /* ie specific, but alignment not yet working */
left: auto;
margin-top:1em;margin-left:-1em;
}
..high {background-color: #99FFCC; font-size:80%;}
..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.re place(a,''); // filename of current page
var d = document.getEle mentById('menu' );
var uls = d.getElementsBy TagName('ul');

for (var i=0, j=uls.length; i<j; i++){
x = uls[i];

// If the UL className string includes word 'head'
if ( /\bhead\b/.test(x.classNa me) ){

// Get its A elements
As = x.getElementsBy TagName('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.rep lace(/\blow\b/,'high');

// No need to continue once we've found one
return;
}
}
}
}
}
</script>
<script language="javas cript">

/* the suckerfish script to fix IE compatibility in bringing the sub-menu
items back in view, although not as intended directly under its headings */

sfHover = function() {
var sfEls = document.getEle mentById("menu" ).getElementsBy TagName("LI");
for (var i=0; i<sfEls.length ; i++) {
sfEls[i].onmouseover=fu nction() {
this.className+ =" sfhover";
}
sfEls[i].onmouseout=fun ction() {
this.className= this.className. replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachE vent) window.attachEv ent("onload", sfHover);

</script>
</head>
<body onload="doClass ();">

<div id="menu">

<ul class="head low">
<li><a href="z0.html"> Flora&nbsp;&amp ;&nbsp;puna</a>

<ul class="sub">
<li><a href="z1.html"> Pretty&nbsp;flo wers</a></li>
<li><a href="z2.html"> Deadly&nbsp;vin es</a></li>
</ul>
</li>

</ul>
<ul class="head low">
<li><a href="z3.html"> Aquatic&nbsp;cr eatures</a>

<ul class="sub">
<li><a href="z4.html"> Pretty&nbsp;fis h</a></li>
<li><a href="z5.html"> Don&#39t&nbsp;eat</a></li>
</ul>

</li>
</ul>
</div>

</body>
</html>

--
One way to make your old car run better is to look up the price of a
new model.