Another IE odity

[Ian Collins]

I've been scratching my head over this one, I have a simple menu,

<div id="linksDiv">
<ul id="viewMenu" class="hidden">
<li>
<a href="customer.html">Customer</a>
</li>
<li>
<a href="finance.html">Finance</a>
</li>
</ul>
</div>

Where hidden is defined

..hidden { visibility: hidden; }

The menu is revealed by clicking one of several entries in a top level
menu. The reveal code is:

this.viewMenu.className = 'viewMenuVisible';
this.viewMenu.style.top = (event.clientY-100)+'px';

where viewMenuVisible contains

..viewMenuVisible
{
visibility: visible;
display: block;

background-color: lightblue;
color: black;
}

The problem is, in IE clicking one of the top level entries reveals the
light blue div, but not the links. Click again, or click another entry
and everything appears.

Works fine on FF or Opera.

I can force the issue by explicitly setting the <a> elements
style.visibility = 'visible', but that's a bit ugly.

Any ideas?

 

[Evertjan.]

Ian Collins wrote on 22 mei 2006 in comp.lang.javascript:

I've been scratching my head over this one, I have a simple menu,

<div id="linksDiv">
<ul id="viewMenu" class="hidden">
<li>
<a href="customer.html">Customer</a>
</li>
<li>
<a href="finance.html">Finance</a>
</li>
</ul>
</div>

Where hidden is defined

.hidden { visibility: hidden; }

The menu is revealed by clicking one of several entries in a top level
menu. The reveal code is:

this.viewMenu.className = 'viewMenuVisible';

document.getElementById('viewMenu').className = 'viewMenuVisible';

An id is/should be unique in a document, so the localiing this is not
usefull, and this.viewMenu gives a syntax error in my trial.

this.viewMenu.style.top = (event.clientY-100)+'px';

only works on a css position-ed element, not here.

where viewMenuVisible contains

.viewMenuVisible
{
visibility: visible;
display: block;

the display:; status is not affected.

background-color: lightblue;
color: black;
}

The problem is, in IE clicking one of the top level entries reveals the
light blue div, but not the links. Click again, or click another entry
and everything appears.

this.viewMenu. will give an error.

Works fine on FF or Opera.

I can force the issue by explicitly setting the <a> elements
style.visibility = 'visible', but that's a bit ugly.

This works fine in IE:

=======================================
<style>
..hidden { visibility: hidden; }

..viewMenuVisible {
visibility: visible;
background-color: lightblue;
color: black;
}

</style>

<div id="linksDiv"
onclick=
"document.getElementById('viewMenu').className='viewMenuVisible';">
<ul id="viewMenu" class="hidden">
<li>
<a href="customer.html">Customer</a>
</li>
<li>
<a href="finance.html">Finance</a>
</li>
</ul>
click here

 

[Ian Collins]

Ian Collins wrote on 22 mei 2006 in comp.lang.javascript:




document.getElementById('viewMenu').className = 'viewMenuVisible';

An id is/should be unique in a document, so the localiing this is not
usefull, and this.viewMenu gives a syntax error in my trial.

I use a local because the menu is used in several places.

only works on a css position-ed element, not here.

The element is CSS positioned.

..viewMenuVisible
{
position: absolute;
left: 100%;
width: 100px;
}

the display:; status is not affected.

True, it was there as an experiment.

this.viewMenu. will give an error.
Not in my case.



This works fine in IE:

=======================================
<style>
..hidden { visibility: hidden; }

..viewMenuVisible {
visibility: visible;
background-color: lightblue;
color: black;
}

</style>

<div id="linksDiv"
onclick=
"document.getElementById('viewMenu').className='viewMenuVisible';">
<ul id="viewMenu" class="hidden">
<li>
<a href="customer.html">Customer</a>
</li>
<li>
<a href="finance.html">Finance</a>
</li>
</ul>
click here
</div>
========================================

I'll have another play.

Cheers.

 

[VK]

I've been scratching my head over this one, I have a simple menu,

<div id="linksDiv">
<ul id="viewMenu" class="hidden">
<li>
<a href="customer.html">Customer</a>
</li>
<li>
<a href="finance.html">Finance</a>
</li>
</ul>
</div>

Where hidden is defined

.hidden { visibility: hidden; }

The menu is revealed by clicking one of several entries in a top level
menu. The reveal code is:

this.viewMenu.className = 'viewMenuVisible';
this.viewMenu.style.top = (event.clientY-100)+'px';

What is "this.viewMenu" ? It looks like you are using auto vars created
by IE for id'ed element - but you cannot count on that on other UA's.
At least an extra check is needed:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<style type="text/css">
..hidden {
visibility: hidden;
}
..viewMenuVisible {
visibility: visible;
display: block;
background-color: lightblue;
color: black;
}
</style>
<script type="text/javascript">
function test(){
if ('undefined' == typeof viewMenu) {
viewMenu = document.getElementById('viewMenu');
}
viewMenu.className = 'viewMenuVisible';
viewMenu.style.top = (event.clientY-100)+'px';
}
</script>
</head>

<body

<div id="linksDiv"

<p style="cursorointer" onclick="test()">Click to switch</p
<ul id="viewMenu" class="hidden"
<li><a href="customer.html">Customer</a></li
<li><a href="finance.html">Finance</a></li
</ul

</div>

</body>
</html>

 

[Evertjan.]

Ian Collins wrote on 22 mei 2006 in comp.lang.javascript:

No, it's a local var for the page containing the menu.

Initialised as

this.viewMenu = document.getElementById('viewMenu');

It seems you asked for the impossible in your OQ
by not giving us the complete picture of your problem.

 

[VK]

No, it's a local var for the page containing the menu.

Initialised as

this.viewMenu = document.getElementById('viewMenu');

In any case the code I posted works just fine (with the regular diff of
list block rendering between IE and FF needed to polish with CSS).

If your links are not displayed on the first click, then there is some
other (really offending) block in your code. It is needed to see the
real case (from <html> to </html>)

 

[Ian Collins]

Ian Collins wrote on 22 mei 2006 in comp.lang.javascript:




It seems you asked for the impossible in your OQ
by not giving us the complete picture of your problem.

True, I thought I might have struck a known IE problem. There are too
many files to post the complete application.

 

[Richard Cornford]

True, I thought I might have struck a known IE problem.

You may have struck a known IE problem. But how could it be narrowed
down to a single known IE problem (of IE's many) without a
demonstration of the phenomenon in action (i.e. your actual code
exhibiting the symptoms you describe).

There are too
many files to post the complete application.

Evertjan seems to have demonstrated the phenomenon is not a
characteristic of the code you have posted in well under 100 lines. You
should be able to make a cut-down test case that demonstrates your
issue with as little code.

Richard.

 

[Ian Collins]

You may have struck a known IE problem. But how could it be narrowed
down to a single known IE problem (of IE's many) without a
demonstration of the phenomenon in action (i.e. your actual code
exhibiting the symptoms you describe).

Evertjan seems to have demonstrated the phenomenon is not a
characteristic of the code you have posted in well under 100 lines. You
should be able to make a cut-down test case that demonstrates your
issue with as little code.

Indeed I should, it took a while but this does the trick:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test</title>
<style>
.hidden { visibility: hidden; }

.viewMenuVisible {
visibility: visible;
background-color: lightblue;
color: black;
position: absolute;
}
#linksDiv li { position: relative; }
#linksDiv li { height: 20px; }

</style>
</head>

<body>
<h1 onclick=
"document.getElementById('viewMenu').className='viewMenuVisible';">click
here
</h1>

<div id="linksDiv">
<ul id="viewMenu" class="hidden">
<li>
<a href="customer.html">Customer</a>
</li>
<li>
<a href="finance.html">Finance</a>
</li>
</ul>
</div>
</body>
</html>

You have to click twice to get the list items to appear. The key is the
absolute position for the div and height for the li.

 

[Evertjan.]

Ian Collins wrote on 22 mei 2006 in comp.lang.javascript:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test</title>
<style>
.hidden { visibility: hidden; }

.viewMenuVisible {
visibility: visible;
background-color: lightblue;
color: black;
position: absolute;

Why a change of position type?

Changing the position type dynamically is seldom a good idea.

}
#linksDiv li { position: relative; }
#linksDiv li { height: 20px; }

#linksDiv ul li {position:relative;height:20px;}

Why a relative position?

</style>
</head>

<body>
<h1 onclick=
"document.getElementById('viewMenu').className='viewMenuVisible';">
click here
</h1>

<div id="linksDiv">
<ul id="viewMenu" class="hidden">
<li>
<a href="customer.html">Customer</a>
</li>
<li>
<a href="finance.html">Finance</a>
</li>
</ul>
</div>
</body>
</html>

You have to click twice to get the list items to appear. The key is
the absolute position for the div and height for the li.

This is because you unnecessarily change the ul viewmenu position from
default to absolute, while the li position is still relative to the
default position.

Depending on the order of refreshing the page IE and FF probably act
differently on this strange code of yours.

If you leave out the position:absolute; or add the position:absolute;
to the hidden class too, you will see that part of your problem is
resolved,

however with the position: absolute; the <li> markers will be out of
view.

Why do you need position?
And why do you need the position:relative; ?

 

[Ian Collins]

This is because you unnecessarily change the ul viewmenu position from
default to absolute, while the li position is still relative to the
default position.

Correct, changing the hidden position to absolute solves the problem.

Depending on the order of refreshing the page IE and FF probably act
differently on this strange code of yours.

If you leave out the position:absolute; or add the position:absolute;
to the hidden class too, you will see that part of your problem is
resolved,

It is, thanks.

however with the position: absolute; the <li> markers will be out of
view.

Why do you need position?

The menu is repositioned to align with the selected item in a top level
menu.

And why do you need the position:relative; ?

I don't' it doesn't effect the problem, I just included it in the test
code because it's in the current CSS.

Thanks again,