How do I create a menu that 'knows where it has been'

[casey]

I am loading a frame on the right from a simple text menu in a frame on
the left.

What I would like is to be able to show the user which menu item they
selected last for example emboldening the item or showing a marker
against it.

Could anyone post a snippet of code or a link that might just point me
in the right direction.

Thanks in anticipation.

Casey

 

[Thomas 'PointedEars' Lahn]

I am loading a frame on the right from a simple text menu in a frame on
the left.

Avoid frames in favor of positioned block elements where feasible.

What I would like is to be able to show the user which menu item they
selected last for example emboldening the item or showing a marker
against it.

Could anyone post a snippet of code or a link that might just point me
in the right direction.

Quick hack:

<script type="text/javascript">
function setStyleProperty(o, sProperty, value)
{
if (o
&& typeof o.style != "undefined"
&& typeof o.style[sProperty] != "undefined")
{
o.style[sProperty] = value;
}
}

var last = null;

function mark(e)
{
if (e)
{
var t = e.target || e.srcElement;
if (t && t.tagName.toLowerCase() == "a" && t.href)
{
if (!last)
{
setStyleProperty(last, 'fontWeight', '');
}

setStyleProperty(t, 'fontWeight', 'bold');
last = t;
}
}
}
</script>

<ul onclick="mark(event);">
<li><a href="foo">foo</a></li>
<li><a href="bar">bar</a></li>
</ul>


PointedEars

 

[denisb]

What I would like is to be able to show the user which menu item they
selected last for example emboldening the item or showing a marker
against it.

Quick hack:
<script type="text/javascript">
function setStyleProperty(o, sProperty, value)
{
if (o
&& typeof o.style != "undefined"
&& typeof o.style[sProperty] != "undefined")
{
o.style[sProperty] = value;
}
}

var last = null;

function mark(e)
{

// hi Thomas,
// here I just do a little modification for non persistant mark :

if (e) {
var t = e.target || e.srcElement;
setStyleProperty(last, 'backgroundColor', '');
if (t && t.tagName.toLowerCase() == "a" && t.href) {
setStyleProperty(t, 'backgroundColor', 'yellow');
last = t;
}
}

}
</script>

<ul onclick="mark(event);">
<li><a href="foo">foo</a></li>
<li><a href="bar">bar</a></li>
</ul>

<!-- and here a precision for overlapping ul -->

<ul onclick="mark(event);">
<li><a href="01">01</a></li>
<li><a href="02">02</a></li>
<ul> <!-- no need onclick in overlapping ul -->
<li><a href="toto">toto</a></li>
<li><a href="titi">titi</a></li>
</ul>
<li><a href="03">03</a></li>
<li><a href="04">04</a></li>
</ul>

 

[casey]

Thanks folks for this, just a little problem though, it is probably
caused by the fact that I am stuck with frames.

If run the script in my menu.htm standalone I get the yellow
background.

If I run it in firefox I get a neat outline round the menu item I just
clicked.

But [here goes ;] if I run it in IE I get no indication at all.

Any ideas ?

Thanks again

Casey

 

[Thomas 'PointedEars' Lahn]

Quick hack:
<script type="text/javascript">
function setStyleProperty(o, sProperty, value)
{
if (o
&& typeof o.style != "undefined"
&& typeof o.style[sProperty] != "undefined")
{
o.style[sProperty] = value;
}
}

var last = null;

function mark(e)
{

// hi Thomas,
// here I just do a little modification for non persistant mark :

if (e) {
var t = e.target || e.srcElement;
setStyleProperty(last, 'backgroundColor', '');
if (t && t.tagName.toLowerCase() == "a" && t.href) {
setStyleProperty(t, 'backgroundColor', 'yellow');
last = t;
}
}

Well, yes, since setStyleproperty() checks if the reference is valid,
one could skip the test in the calling function. But why unmark if
not clicked another menu item? I'd find that confusing as a user.

<!-- and here a precision for overlapping ul -->

<ul onclick="mark(event);">
<li><a href="01">01</a></li>
<li><a href="02">02</a></li>
<ul> <!-- no need onclick in overlapping ul -->
<li><a href="toto">toto</a></li>
<li><a href="titi">titi</a></li>
</ul>
<li><a href="03">03</a></li>
<li><a href="04">04</a></li>
</ul>

I don't see your point.


PointedEars

 

[casey]

Am I right in thinking that if I clicked on all the items without
resetting the last item I would end up with all menu items marked ?

I still have the problem I am afraid that although the code works fine
in a standalone (popup) scenario, in frames it partly works in FF in
that it leaves a mark around the selected item, in IE however, it does
nothing at all.

Any clues please ?

Casey

 

[Thomas 'PointedEars' Lahn]

Am I right in thinking that if I clicked on all the items without
resetting the last item I would end up with all menu items marked ?

Yes, you are.

I still have the problem I am afraid that although the code works fine
in a standalone (popup) scenario, in frames it partly works in FF in
that it leaves a mark around the selected item,

Works as designed. The "mark around" is for users navigating
with the keyboard. You should not try to change that.

in IE however, it does nothing at all.

Which is clearly a Bad Thing.


PointedEars

 

[casey]

Works as designed. The "mark around" is for users navigating
with the keyboard. You should not try to change that.

Sorry if I did not make myself clear, in FF the mark around is the only
thing that appears, (ie no yellow background - or emboldening in the
other guy's example)

Which is clearly a Bad Thing.

This is a disaster for me as a large proportion of my target
'readership' will be using ie.

Could this be something to do with the event happening as the page is
loading in the new frame ?

Thanks

Casey

 

[Thomas 'PointedEars' Lahn]

Sorry if I did not make myself clear, in FF the mark around is the only
thing that appears, (ie no yellow background -

Works for me. Is your `href' attribute value empty by any chance? In
that case `t.href' would evaluate to `false' in the boolean expression.

or emboldening in the other guy's example)

I think the "other guy" was me

This is a disaster for me as a large proportion of my target
'readership' will be using ie.

Misunderstanding. The Bad Thing was if no mark would be around the link
when selected.

Could this be something to do with the event happening as the page is
loading in the new frame ?

It could have something to do with several things.
It seems best you post the URL of a test case here.


PointedEars