473,725 Members | 2,232 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Annoying NN/Firefox Highlight Bug

Hi everyone,

This one is better experienced than explained, so I'm including a code
sample below. Please and save (as an html file) and view with NN or
Firefox (or maybe even Mozilla), and then view. When loaded:

(1.) Place the mouse over "Top Menu" item.
(The menu opens)
(2.) Move to any of the sub-menu items.
(3.) Click on the left or right (but NOT on the text) of the current
sub-item
(The menu collapses)
(4.) Now place the mose over the top-menu
-> The menu opens as expected, but the an annoying highlight
appears, and follows the mouse.

Please tell me there's a work-around.

------------------------ H T M L ------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">

<script type="text/javascript">

function getIndex(){

if (navigator.appN ame == "Microsoft Internet Explorer"){
return 2;
}
else if (navigator.appN ame == "Netscape") {
return 3;
}
}
function bindListeners() {

var anchors = document.getEle mentsByTagName( "A");
for (i = 0; i < anchors.length; i++){

anchors[i].onmousedown = function() {
this.className = "mouseDown" ;
}

anchors[i].onmouseup = function() {
this.className = "mouseUp";

var object = this.parentNode .parentNode.par entNode;
var object1 = object.parentNo de.parentNode;
if (object.tagName .toUpperCase() == 'BODY'){
// top-menu

this.parentNode .childNodes[getIndex()].style.display = 'none';
}
else if( object1.tagName .toUpperCase() == 'BODY' ){
// sub-menu
this.parentNode .parentNode.sty le.display =
'none';
}

}
anchors[i].onmouseover = function(){
var object = this.parentNode .parentNode.par entNode;
var object1 = object.parentNo de.parentNode;
if (object.tagName .toUpperCase() == 'BODY'){
// top-menu

this.parentNode .childNodes[getIndex()].style.display = 'block';
}
else if(
object.parentNo de.parentNode.t agName.toUpperC ase() == 'BODY' ){
// sub-menu
this.parentNode .parentNode.sty le.display =
'block';;
}
}

}
}
</script>

<style type="text/css">

li {
background-color: #FFFFFF;
font-weight: normal;
font-family: arial;
font-size: 12px;

text-align: center;
margin: 0;
padding: 0;
height: 1%;
}

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

a {
display: block;
width: 120px;
text-decoration: none;
color: #000000;
padding: 2px 15px 2px 15px;
}

li:hover ul {
display: block;
}

li ul {
display: none;
}

body li{
width: 150px;
}

li.collapse {
display: none;
}

ul li ul li {
border-top: 1px solid black;
}

li.topMenu {
border: 1px solid black;
}

</style>

<title>test</title>
</head>

<body onLoad="bindLis teners()">

<ul><li class="topMenu" >
<a href="#">Top Menu</a>
<ul>
<li><a href="#">Sub-menu 1</a></li>
<li><a href="#">Sub-menu 2</a></li>
<li><a href="#">Sub-menu 3</a></li>
<li><a href="#">Sub-menu 4</a></li>
</ul>
</li></ul>

</body>
</html>
------------------------ H T M L ------------------------

I wonder if this is the same bug that this guy is talking about?
http://groups.google.co.uk/groups?se...&output=gplain

Thanks,

- Olumide

Jul 23 '05 #1
15 2192
fox


50***@web.de wrote:
Hi everyone,

This one is better experienced than explained, so I'm including a code
sample below. Please and save (as an html file) and view with NN or
Firefox (or maybe even Mozilla), and then view. When loaded:

(1.) Place the mouse over "Top Menu" item.
(The menu opens)
(2.) Move to any of the sub-menu items.
(3.) Click on the left or right (but NOT on the text) of the current
sub-item
(The menu collapses)
(4.) Now place the mose over the top-menu
-> The menu opens as expected, but the an annoying highlight
appears, and follows the mouse.

Please tell me there's a work-around.
for items in which you do not want text selection, simply add:

li {
-moz-user-select: none;
}

to your css

problem solved...


------------------------ H T M L ------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">

<script type="text/javascript">

function getIndex(){

if (navigator.appN ame == "Microsoft Internet Explorer"){
return 2;
}
else if (navigator.appN ame == "Netscape") {
return 3;
}
}
function bindListeners() {

var anchors = document.getEle mentsByTagName( "A");
for (i = 0; i < anchors.length; i++){

anchors[i].onmousedown = function() {
this.className = "mouseDown" ;
}

anchors[i].onmouseup = function() {
this.className = "mouseUp";

var object = this.parentNode .parentNode.par entNode;
var object1 = object.parentNo de.parentNode;
if (object.tagName .toUpperCase() == 'BODY'){
// top-menu

this.parentNode .childNodes[getIndex()].style.display = 'none';
}
else if( object1.tagName .toUpperCase() == 'BODY' ){
// sub-menu
this.parentNode .parentNode.sty le.display =
'none';
}

}
anchors[i].onmouseover = function(){
var object = this.parentNode .parentNode.par entNode;
var object1 = object.parentNo de.parentNode;
if (object.tagName .toUpperCase() == 'BODY'){
// top-menu

this.parentNode .childNodes[getIndex()].style.display = 'block';
}
else if(
object.parentNo de.parentNode.t agName.toUpperC ase() == 'BODY' ){
// sub-menu
this.parentNode .parentNode.sty le.display =
'block';;
}
}

}
}
</script>

<style type="text/css">

li {
background-color: #FFFFFF;
font-weight: normal;
font-family: arial;
font-size: 12px;

text-align: center;
margin: 0;
padding: 0;
height: 1%;
}

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

a {
display: block;
width: 120px;
text-decoration: none;
color: #000000;
padding: 2px 15px 2px 15px;
}

li:hover ul {
display: block;
}

li ul {
display: none;
}

body li{
width: 150px;
}

li.collapse {
display: none;
}

ul li ul li {
border-top: 1px solid black;
}

li.topMenu {
border: 1px solid black;
}

</style>

<title>test</title>
</head>

<body onLoad="bindLis teners()">

<ul><li class="topMenu" >
<a href="#">Top Menu</a>
<ul>
<li><a href="#">Sub-menu 1</a></li>
<li><a href="#">Sub-menu 2</a></li>
<li><a href="#">Sub-menu 3</a></li>
<li><a href="#">Sub-menu 4</a></li>
</ul>
</li></ul>

</body>
</html>
------------------------ H T M L ------------------------

I wonder if this is the same bug that this guy is talking about?
http://groups.google.co.uk/groups?se...&output=gplain

Thanks,

- Olumide

Jul 23 '05 #2
50***@web.de wrote:
Hi everyone,

This one is better experienced than explained, so I'm including a code
sample below. Please and save (as an html file) and view with NN or
Firefox (or maybe even Mozilla), and then view. When loaded:

(1.) Place the mouse over "Top Menu" item.
(The menu opens)
(2.) Move to any of the sub-menu items.
(3.) Click on the left or right (but NOT on the text) of the current
sub-item
(The menu collapses)
(4.) Now place the mose over the top-menu
-> The menu opens as expected, but the an annoying highlight
appears, and follows the mouse.

Please tell me there's a work-around.

Please don't post code with tabs. Use 2 or 4 spaces for indenting.
Manually wrap code to prevent wrapping errors.

[...]
function getIndex(){

if (navigator.appN ame == "Microsoft Internet Explorer"){
return 2;
}
else if (navigator.appN ame == "Netscape") {
return 3;
}
}
The concept behind this function is flawed, see below.


function bindListeners() {

var anchors = document.getEle mentsByTagName( "A");
for (i = 0; i < anchors.length; i++){

anchors[i].onmousedown = function() {
this.className = "mouseDown" ;
}

anchors[i].onmouseup = function() {
this.className = "mouseUp";

var object = this.parentNode .parentNode.par entNode;
var object1 = object.parentNo de.parentNode;
You seem to be guessing at how many parentNodes will get you to the
<body> tag, then based on that, how many will take to get to the <ul>
tag at the start of the list. See below for a more efficient
solution.


if (object.tagName .toUpperCase() == 'BODY'){
A more efficient test here is:

if ( /body/i.test(object.t agName) ){
// top-menu

this.parentNode .childNodes[getIndex()].style.display = 'none';
}
else if( object1.tagName .toUpperCase() == 'BODY' ){
// sub-menu
this.parentNode .parentNode.sty le.display =
'none';
}

}
anchors[i].onmouseover = function(){
var object = this.parentNode .parentNode.par entNode;
var object1 = object.parentNo de.parentNode;
if (object.tagName .toUpperCase() == 'BODY'){
// top-menu

this.parentNode .childNodes[getIndex()].style.display = 'block';
}
else if(
object.parentNo de.parentNode.t agName.toUpperC ase() == 'BODY' ){
// sub-menu
this.parentNode .parentNode.sty le.display =
'block';;
}
}

}
}
</script>


The way your script works is very prone to failure. Your getIndex()
function will only ever work with browsers that identify as
'Netscape' or 'Microsoft Internet Explorer'.

You also make assumptions about the number of nodes based on your
guess of browser.

It seems that what you are trying to do is find the <ul> tag at the
start of the list that was clicked on. If that is so, the best way
to find it is to go up through the parentNodes until you get there.

If the following function is passed a reference to a node, it will go
up the DOM tree until it finds a UL node, then return a reference to
it:

function getULtag(x){
while (!/ul/i.test(x.nodeNa me) && x.parentNode ){
x = x.parentNode;
}
return x;
}

Below is a more concise version, but it will fail if x is the UL tag
you were after:

function getULtag(x){
while ( (x = x.parentNode) && !/ul/i.test(x.nodeNa me)){}
return x;
}

Both the above functions will work in any browser supporting
JavaScript and the W3C DOM without regard for whatever they chose to
report as their 'appName' (which includes IE and Netscape, as well as
many others).

A sample implementation is below.

<script type="text/javascript">
function getULtag(x){
while ( (x = x.parentNode) && !/ul/i.test(x.nodeNa me)){}
return x;
}
</script>
<ul id="ulA">
<li onclick="alert( getULtag(this). id);">hi</li>
<li onclick="alert( getULtag(this). id);">hi</li>
<li onclick="alert( getULtag(this). id);">hi</li>
<li onclick="alert( getULtag(this). id);">hi</li>
</ul>

[...]

--
Rob
Jul 23 '05 #3
RobG wrote:
50***@web.de wrote:

<snip>
if (object.tagName .toUpperCase() == 'BODY'){


A more efficient test here is:

if ( /body/i.test(object.t agName) ){

<snip>

Is it a more efficient test? Have you read the ECMA 262 section on
Regular Expressions and thought about what it must take to implement
that? String comparison is not that complex; maybe compare the length
and return false if they don't match, then compare each corresponding
character in turn, returning false at the first non-match (equality
testing between 16 bit integers is trivial for CPUs to do directly), and
return true if you get to the end of the strings without having returned
false.

Richard.
Jul 23 '05 #4
Richard Cornford wrote:
RobG wrote:
50***@web.d e wrote:


<snip>
if (object.tagName .toUpperCase() == 'BODY'){


A more efficient test here is:

if ( /body/i.test(object.t agName) ){


<snip>

Is it a more efficient test? Have you read the ECMA 262 section on
Regular Expressions and thought about what it must take to implement
that? String comparison is not that complex; maybe compare the length
and return false if they don't match, then compare each corresponding
character in turn, returning false at the first non-match (equality
testing between 16 bit integers is trivial for CPUs to do directly), and
return true if you get to the end of the strings without having returned
false.


I'm on lunch, so let's compare:

A. /body/i.test(object.t agName)

to

B. object.tagName. toUpperCase() == 'BODY'

I'll define efficiency as providing the same result while consuming
fewer resources. You may wish to offer some modification of that.

In this case, resources are:

1. Programmer time in keystrokes - A: 27 B: 36
A has 30% fewer keystrokes, therefore it's more efficient for this
criterion.

2. Download bandwidth in characters - A: 27 B: 36
A has 30% fewer characters and is more efficient for this
criterion.

3. Browser execution -
I could compare the two algorithms and see which *should* be
quicker, but that that would just be my opinion of an
implementation and may not have any basis in fact. So I'll do the
pragmatic (and considerably less intellectual) thing and just
write a test and run it through a few of browsers.

Just for fun, I put in a case C that uses a compiled RegExp - the
full script is below.

Results vary by browser - Firefox, Netscape & Mozilla were
virtually identical, so I've just reported Firefox:

A B C
Firefox 360 770 360
IE 950 310 360
Opera 530 820 530

Make what you will of that! For Geko-based browsers and Opera,
the RegExp method is about twice as fast always: for IE, the
string method is nearly 3 times faster unless a compiled RegExp is
used (this points to the others as compiling and caching the
RegExp regardless, but that is pure conjecture).

Since we are talking 100,000 iterations here, it likely makes no
practical difference in most cases. In those cases where it does
matter, a compiled RegExp is just as fast in IE as the string
method and twice as fast in other browsers.

And the number of keystrokes for C is less than for either of the
other two methods - 26 characters (the relevant part is below):

var z = /BODY/i;
z.test(t)

So the worst-case-scenario (using IE of course) is that a compiled
RegExp is about the same speed as using a string with toLoweCase()
(or toUpperCase() as the 'case' may be). And in at least Opera and
Geko browsers you about halve the time of execution.

So given the above, I stand by my statement regarding efficiency.
Over to you.
<script type="text/javascript">
function doTest(t){
var r = 100000;
var i = r, start, end, timeA, timeB, timeC;
var start = new Date().getTime( );

while ( /BODY/i.test(t) && i-- ){}
var end = new Date().getTime( );
timeA = end - start;

i = r;
start = new Date().getTime( );
while ( t.toUpperCase() == 'BODY' && i-- ){}
end = new Date().getTime( );
timeB = end - start;

i = r;
start = new Date().getTime( );
var z = /BODY/i;
while ( z.test(t) && i-- ){}
var end = new Date().getTime( );
timeC = end - start;

document.getEle mentById('resul t').innerHTML =
'timeA: ' + timeA + '<br>' +
'timeB: ' + timeB + '<br>' +
'timeC: ' + timeC + '<br>';
}
</script>

<input type="button" value="Do test" onclick="doTest ('BODY')"><br>
<span id="result"></span>
--
Rob
Jul 23 '05 #5
RobG wrote:
[...]

And the number of keystrokes for C is less than for either of the
other two methods - 26 characters (the relevant part is below):

var z = /BODY/i;
z.test(t)
Ooops, the correct comparison here should have been:

var z = /BODY/i;
z.test(object.t agName)

Which is 38, or the same as the string method.

So the worst-case-scenario (using IE of course) is that a compiled
RegExp is about the same speed as using a string with toLoweCase()
(or toUpperCase() as the 'case' may be). And in at least Opera and
Geko browsers you about halve the time of execution.

So given the above, I stand by my statement regarding efficiency.
Over to you.


This does not allow for the overhead of creating the RegExp, which is
distributed over the 100,000 iterations. If challenged I'll go the
extra yard, but not right now.
--
Rob
Jul 23 '05 #6
RobG wrote:
{snip}

<script type="text/javascript">
function doTest(t){
var r = 100000;
var i = r, start, end, timeA, timeB, timeC;
var start = new Date().getTime( );

while ( /BODY/i.test(t) && i-- ){}
I'm curious, Rob, why:
while ( /BODY/i.test(t) && i-- ){}
?
Why the curly brackets?
Mick
var end = new Date().getTime( );
timeA = end - start;

i = r;
start = new Date().getTime( );
while ( t.toUpperCase() == 'BODY' && i-- ){}
end = new Date().getTime( );
timeB = end - start;

i = r;
start = new Date().getTime( );
var z = /BODY/i;
while ( z.test(t) && i-- ){}
var end = new Date().getTime( );
timeC = end - start;

document.getEle mentById('resul t').innerHTML =
'timeA: ' + timeA + '<br>' +
'timeB: ' + timeB + '<br>' +
'timeC: ' + timeC + '<br>';
}
</script>

<input type="button" value="Do test" onclick="doTest ('BODY')"><br>
<span id="result"></span>

Jul 23 '05 #7
Thanx Foxy :-)

Jul 23 '05 #8

RobG wrote:
Please don't post code with tabs. Use 2 or 4 spaces for indenting.
Manually wrap code to prevent wrapping errors.


I DID remove the tabs but replaced them with 6 spaces.

Jul 23 '05 #9
Mick White wrote:
RobG wrote:
{snip}

<script type="text/javascript">
function doTest(t){
var r = 100000;
var i = r, start, end, timeA, timeB, timeC;
var start = new Date().getTime( );

while ( /BODY/i.test(t) && i-- ){}

I'm curious, Rob, why:
while ( /BODY/i.test(t) && i-- ){}
?
Why the curly brackets?
Mick


It makes it obvious to me that the while has no body, others may
use a semi-colon:

while ( /BODY/i.test(t) && i-- );

but there you go. Either the braces or a semi-colon are required in
this case. Is one way better than the other? I don't think it
should matter, but I'm no guru here! :-)
[...]
--
Rob
Jul 23 '05 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

7
3661
by: Drew Martin | last post by:
The page at the below URL renders perfectly in IE6, but is failing horribly in Firefox (0.7, 0.8). I can't figure out why and was hoping someone could take a quick look at it. Most of the layout is done through the use of floats. HTML file: http://superdisco.net/css/index.html CSS file: http://superdisco.net/css/sd.css The gray and maroon backgrounds are to highlight the layout used.
3
13536
by: Tim Mackey | last post by:
hi, i have a javascript function to highlight google search keywords in the page. it works well on IE and mozilla browsers. for the page OnLoad, i call the Highlight() method, and that highlights the words in the page, and inserts a div element with the message: "your search terms have been highlighted..." and a link to remove the highlighting, which has href='javascript:removeHighlight(..)', but that only works in IE, not firefox 1.0....
8
5653
by: Dominic Tocci | last post by:
I'm searching for a way to use window.open on my web page to open a window in firefox that allows the sidebars to work (bookmarks, history, etc). When I use the following: var popWindow=window.open('http://www.yahoo.com','','width=600,height=400,toolbar=1,location=1,menubar=1,resizable=1,titlebar=1,directories=1,status=1,scrollbars=1'); the sidebars are disabled. I click on the buttons for bookmarks and history and they do nothing. I...
5
1453
by: nospam | last post by:
I think there is a flaw/bug in ASP.NET or IIS. I try to test my pages in Firefox Browser because it's better than IE (page source coloring, tabbed browsing, etc.) but the JavaScript that is generated for ASP.NET compile errors doesn't work on Firefox (try clicking on the JavaScript link to view the complete code). I'm using ASP.NET/C# on Windows XP Pro/IIS. I'm getting JavaScript errors from the ASP.NET generated JavaScript:...
25
9270
by: Frances | last post by:
I have an html file, checked css syntax online (http://jigsaw.w3.org/css-validator/validator-uri.html.en) it all checks fine, got no errors or warnings.. however Firefox is not reading stylesheet, for some reason.. two examples of errors I get in JS console: Error: Unexpected end of file while searching for closing } of invalid rule set.
3
1416
by: GaryDean | last post by:
If you go to my website, www.deanblakely.com, in I.E. you will see that it displays fine but if you browse it in FireFox 1.7 you will see stuff on the Master Page that is not alligning right. I have the following elementID in my One.CSS file... #masthead { text-align: right; margin-right: 13px; margin-left: 13px;
27
2585
by: Inny | last post by:
The following 3 pages which are popups on my site are not rendering in mozilla firefox. Source is visible instead. Any idea why? http://herproom.5.forumer.com/index.php?act=Attach&type=post&id=9948 http://herproom.5.forumer.com/index.php?act=Attach&type=post&id=7101 http://herproom.5.forumer.com/index.php?act=Attach&type=post&id=9817
1
2134
by: geevaa | last post by:
Hi All, Try the example javascript given in this link in IE and Firefox. http://www.java2s.com/Code/JavaScript/Node-Operation/pasteHTMLExample.htm <html> <body>
1
3655
by: sva0008 | last post by:
i have a auto suggest script that does not work in firefox , works great on IE. /******************************************************* AutoSuggest - a javascript automatic text input completion component Copyright (C) 2005 Joe Kepley, The Sling & Rock Design Group, Inc. This library is free software; you can redistribute it and/or modify it under the terms of the GNU Lesser General Public License as published by the Free Software...
0
8888
marktang
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, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
8752
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 effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
9401
Oralloy
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, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
1
9176
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
8097
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
6702
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
4519
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
4784
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
3
2157
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.