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?
--
Ian Collins. 11 1259
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='vi ewMenuVisible';">
<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>
======================================== Any ideas?
--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
Evertjan. wrote: 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.
I use a local because the menu is used in several places. this.viewMenu.style.top = (event.clientY-100)+'px';
only works on a css position-ed element, not here.
The element is CSS positioned.
..viewMenuVisible
{
position: absolute;
left: 100%;
width: 100px;
} where viewMenuVisible contains
.viewMenuVisible { visibility: visible; display: block;
the display:; status is not affected.
True, it was there as an experiment.
this.viewMenu. will give an error.
Not in my case.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='vi ewMenuVisible';"> <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.
--
Ian Collins.
Ian Collins wrote: 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="cursor:pointer" 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>
VK wrote: Ian Collins wrote:
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:
No, it's a local var for the page containing the menu.
Initialised as
this.viewMenu = document.getElementById('viewMenu');
--
Ian Collins.
Ian Collins wrote on 22 mei 2006 in comp.lang.javascript : 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: 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.
--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
Ian Collins wrote: 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>)
Evertjan. wrote: Ian Collins wrote on 22 mei 2006 in comp.lang.javascript:
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:
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.
True, I thought I might have struck a known IE problem. There are too
many files to post the complete application.
--
Ian Collins.
Ian Collins wrote: Evertjan. wrote: 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.
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.
Richard Cornford wrote: Ian Collins wrote:
Evertjan. wrote:
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.
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='vi ewMenuVisible';">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.
--
Ian Collins.
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='vi ewMenuVisible';"> 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; ?
--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
Evertjan. wrote: 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.
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,
--
Ian Collins. This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: luu duong |
last post by:
I know this is probably easy but here is the details. I have an asp
page that is not inside a frameset. I want to post data to another asp
page that is inside a frameset. So firstpage.asp has...
|
by: anon |
last post by:
Post Forwarding question......
For this control below,
<asp:Button runat="server" PostTargetUrl="page2.aspx" />
The Attribute: PostTargetUrl="page2.aspx"
Is this PostTargetUrl Attribute...
|
by: Uwe C. Schroeder |
last post by:
-----BEGIN PGP SIGNED MESSAGE-----
Hash: SHA1
Hi,
following odity:
I have a table "quote".
In a stored proc I do a
|
by: Daniel Tan |
last post by:
Are there anyway to copy rows of records from one query to another
query and then hide the records in source query ? Pls advise. Thanks.
Regards,
Daniel
|
by: Kathy Burke |
last post by:
Hi, I'm tired, so this question may be silly. I have a fairly long sub
procedure. Based on one condition, I load another sub with the
following:
If Session("GRN") = "complete" Then
txtScan.Text...
|
by: qwerty |
last post by:
I´m new to ASP.Net. My workmate has some experience with it.
He claimed that in ASP.Net working with frames is much simpler than it
was ASP. I asked explanation but he couldn't give me such. (a...
|
by: Rabbit |
last post by:
Hi,
On my 1st page, i have a function which gets a new ID value and need to
transfer to another immediately.
which I want to get in 2nd page using Request.form("txtID"), but doesn't
work, the...
|
by: Mike |
last post by:
Hi,
I have a form with some controls, and a different class that needs to
modify some control properties at run time.
Hoy can I reference the from so I have access to its controls and...
|
by: Sin Jeong-hun |
last post by:
It seems like the Protect() uses the Windows accout information to
encrypt data. If I know the user name and the password, can I decrypt
it on another PC? If it is not, how about the exported key?...
|
by: taylorcarr |
last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
|
by: Charles Arthur |
last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
|
by: aa123db |
last post by:
Variable and constants
Use var or let for variables and const fror constants.
Var foo ='bar';
Let foo ='bar';const baz ='bar';
Functions
function $name$ ($parameters$) {
}
...
|
by: ryjfgjl |
last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers,...
| |