firefox onmouseover frame focus problem

Martin Chen

I have a frame set (as per MS FrontPage 2000). It has a contents and a main
frame. The contents frame has a menu bar written with with javascript (in
the context of a table). In IE6.1 everything works fine as it also does in
firefox if I call the contents frame directly (i.e. outside of its
frameset). However, if I call my main page (index.html) which invokes the
frame set, the contents frame javascript menubar onmouseover function
doesn't seem to work though if I reload the contents frame directly it then
does.
So my index.html frame looks like this:
----------------
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
meta stuff and title
</head>
<frameset cols="203,101%" framespacing="0" border="1">
<frame src="frconten.htm" name="Main Frame" marginwidth="0" marginheight="0"
target="main" scrolling="no" noresize>
<frame src="frmain.htm" name="main" marginwidth="0" marginheight="0"
scrolling="auto" target="_self" noresize>
<noframes>
<body background="sidebgteeny2.jpg" text="#800000" link="#33CC33">
<p> </p>
<p>This web page uses frames, but your browser doesn't support them.</p>
</body>
</noframes>
</frameset>
</html>
---------------------

and the essential parts of my contents frame looks like this:
---------------------
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
meta stuff and title
<style type="text/css">

</style>
<script type="text/javascript">

</script>
</head>
<body bgcolor="#FFFFFF" background="sidebgteeny2g.jpg">
<img border="0" src="logo.jpg" width="207" height="117"><br>
<table border="1" bordercolor="#C0C0C0" cellpadding="0" cellspacing="0"
width="100%">
<tr>
<td width="184" font color="#FFFFFF" class="menu" bordercolor="#C0C0C0"
id="choice1" style="background-color:#336699; cursor:pointer; color:FFFFFF;
font-size:10pt;"
onmouseover="movein(choice1,'')" onmouseout="moveout(choice1)"
onclick="parent.main.location.href='frmain.htm'">
Home
</td>
</tr>

more of the same for othet table menu entries

</table>
</body>
</html>

Dec 6 '05 #1

Subscribe Post Reply

3483

Thomas 'PointedEars' Lahn

Martin Chen wrote:

I have a frame set (as per MS FrontPage 2000). ^^^^^^^^^^^^^^^^^^^^^^^^
Alas one can see that much too clearly.
It has a contents and a main frame. The contents frame has a menu bar
written with with javascript (in the context of a table). In IE6.1
everything works fine as it also does in firefox if I call the contents
frame directly (i.e. outside of its frameset). However, if I call my
main page (index.html) which invokes the frame set, the contents frame
javascript menubar onmouseover function doesn't seem to work though if
I reload the contents frame directly it then does.
"Does not work" is a useless error description. [psf 4.11]

<URL:http://jibbering.com/faq/#FAQ4_43>
So my index.html frame looks like this:
----------------
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
If you want to use frames, you need to declare a _Frameset_ DTD.

See <http://validator.w3.org/> for this and other errors in your markup.
So my index.html frame looks like this:
----------------
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
Here a HTML 3.2, ISO HTML, or HTML 4.01 Strict or Transitional DTD is
required. Since you are using both stylesheets and deprecated format
attributes, the HTML 4.01 Transitional DTD is required. However, I
strongly suggest you abandon format attributes in favor of stylesheets,
and declare HTML 4.01 Strict then.
<html>
<head>
meta stuff and title
<style type="text/css">

</style>
<script type="text/javascript">
<!--
Same[1^] for `script' elements, where in contrast to `style' elements
assumed comment delimiters are also potentially harmful. See previous
discussions about that.
function movein(which,html){
which.style.background='#4376A9'
This color value is not Truly Web-Safe[tm] -- you may want to consider
another color, say #36f --, and

which.style.backgroundColor = '...';

suffices.
which.style.color='#FFFF00'
which.style.color = '#ff0';
[...]
<tr>
<td width="184" font color="#FFFFFF" class="menu" bordercolor="#C0C0C0" ^^^[0] ^^^^[1] ^^^^^^^^^^^[1] id="choice1" style="background-color:#336699; cursor:pointer; ^^^^^^[2] color:FFFFFF; font-size:10pt;" ^^^^^^[3] ^^^^[2]
onmouseover="movein(choice1,'')" onmouseout="moveout(choice1)" ^^^^^^^[4] ^^^^^^^[4] onclick="parent.main.location.href='frmain.htm'">

^^^^^^^^^^^^^^^^^^^^^^^^^

[0] Tables should not be used for layout purposes, only for tabular data.

[1] There are no attributes `font' and `bordercolor' for the `td' element
in any Valid HTML DTD.

[2] See above.

[3] RGB color values must start with the hash (`#') character always.

[4] Here you are referring to the global variable or property `choice1'.
There was no such variable explicitly declared or defined. Relying
on the IE DOM to create properties of the Global Object referring to
element objects with their names or IDs breaks the code in other HTML
UAs.

[5] Frames should be referred to explicitly.
So probably you were looking for

....
<head>
...
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">

<script type="text/javascript">
function isMethodType(s)
{
return (s == "function" || s == "object");
}

function setStyleProperty(o, p, v)
{
if (typeof o.style != "undefined"
&& typeof o.style[p] != "undefined")
{
return ((o[p] = v) == v);
}
}

function mouseHandler(id, bMoveIn)
{
var o;
if (isMethodType(typeof document.getElementById)
&& (o = document.getElementById(id)))
{
setStyleProperty(o, 'backgroundColor',
bMoveIn ? '#4376A9' : '#369' : '#36f');

setStyleProperty(o, 'color',
bMoveIn ? '#ff0' : '#fff');
}
}
</script>
...
</head>
<body>
...
<td width="184" color="#ffffff" class="menu"
id="choice1"
style="border-color:silver; background-color:#36f; color:#fff;
cursor:pointer; font-size:13px"
onmouseover="mouseHandler('choice1', true)"
onmouseout="mouseHandler('choice1', false)"
onclick="parent.frames['main'].location = 'frmain.htm';">
...
</body>
....
HTH

PointedEars

Dec 8 '05 #2

Thomas 'PointedEars' Lahn

Thomas 'PointedEars' Lahn wrote:

function mouseHandler(id, bMoveIn)
{
var o;
if (isMethodType(typeof document.getElementById)
&& (o = document.getElementById(id)))
{
setStyleProperty(o, 'backgroundColor',
bMoveIn ? '#4376A9' : '#369' : '#36f');

Should be

setStyleProperty(o, 'backgroundColor',
bMoveIn ? '#369' : '#36f');

Dec 8 '05 #3

Martin Chen

Thanks so much for your reply.

As was so painfully, with the emphasis on pain, obvious to you, I don't do
web design/coding for a living so I have some more dumb questions w/r to
your response. I guess my code is a great example of having just enough
knowledge to be dangerous.

1) Is the code you gave compatiable with both IE6 and FireFox? I've heard
they use different DOMs. Anything I should particularly avoid to avoid
compatability issues?

2) What I meant by "Does not work" (point taken) was that from what I can
tell none of the code in my javascript mouse handlers seems to execute in
Firefox (but does in IE6) unless I reload the page (of contents frame).
Specifically, when the mouse passes over the menu item, the text should
change from white to yellow and the background get slightly lighter and the
reverse when the mouse leaves. If your interested, here's the URL (start
with www end with com) interspersed with extra "z"s to avoid nasty bots.
..EnzVisionzSystemsLzLC.

Will the code below that solve this problem? How? (Just curious)

3) I see below 3 hex color codes rather than the 6 ones I'm familiar with
(e.g. which.style.color = '#ff0') what does that mean?

4) You wrote

setStyleProperty(o, 'backgroundColor',
bMoveIn ? '#4376A9' : '#369' : '#36f'); I understand (<boolexp> : <truechoice> : <falsechoice>) but there's an extra
colon that I can't parse. I guess this is also an example of the 3 hex long
color thing that I don't understand.

5) You commented on my bad choice of colors; that they arent' web safe.
When I chose those colors, I did so on an educated guess that the concept of
web-safe colors was from a time when lots of poeple ran 16 or 256 color
graphic cards and so non-web-safe colors were dithered or god knows what .
However, the type of person who would look at my web site would be running
at least 16bit color depth. So, I figured it wouldn't matter if my colors
weren't traditional web-safe.
Is that reasonable or am I being to cavalier?

6) So what is the "standard" for web page authoring technology these days
(e.g. CSS, DHTML but not frames etc etc etc). I'd like to know for future
reference which technologies to avoid. (I guess I'll redo my web site some
sunny day when it bubbles up to a priority)

7) For future reference: Do you have any recommendation for reasonably
priced properly done Web page software package? As you know I'm running FP
2K but I'm really augmenting it by hand these days. I take it for granted
that anything produced by MS will have compatability issues. I don't author
web pages for a living so spending lots of money and time probably isn't in
the cards.

Thanks,
Andy
My questions reply interspersed below:
"Thomas 'PointedEars' Lahn" <Po*********@web.de> wrote in message
news:42****************@PointedEars.de... Martin Chen wrote:
I have a frame set (as per MS FrontPage 2000). ^^^^^^^^^^^^^^^^^^^^^^^^
Alas one can see that much too clearly.
It has a contents and a main frame. The contents frame has a menu bar
written with with javascript (in the context of a table). In IE6.1
everything works fine as it also does in firefox if I call the contents
frame directly (i.e. outside of its frameset). However, if I call my
main page (index.html) which invokes the frame set, the contents frame
javascript menubar onmouseover function doesn't seem to work though if
I reload the contents frame directly it then does.

"Does not work" is a useless error description. [psf 4.11]

<URL:http://jibbering.com/faq/#FAQ4_43>
So my index.html frame looks like this:
----------------
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">

If you want to use frames, you need to declare a _Frameset_ DTD.

See <http://validator.w3.org/> for this and other errors in your markup.
So my index.html frame looks like this:
----------------
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">

Here a HTML 3.2, ISO HTML, or HTML 4.01 Strict or Transitional DTD is
required. Since you are using both stylesheets and deprecated format
attributes, the HTML 4.01 Transitional DTD is required. However, I
strongly suggest you abandon format attributes in favor of stylesheets,
and declare HTML 4.01 Strict then.
<html>
<head>
meta stuff and title
<style type="text/css">

</style>
<script type="text/javascript">
<!--

Same[1^] for `script' elements, where in contrast to `style' elements
assumed comment delimiters are also potentially harmful. See previous
discussions about that.
function movein(which,html){
which.style.background='#4376A9'

This color value is not Truly Web-Safe[tm] -- you may want to consider
another color, say #36f --, and

which.style.backgroundColor = '...';

suffices.
which.style.color='#FFFF00'

which.style.color = '#ff0';
[...]
<tr>
<td width="184" font color="#FFFFFF" class="menu" bordercolor="#C0C0C0"

^^^[0] ^^^^[1] ^^^^^^^^^^^[1]
id="choice1" style="background-color:#336699; cursor:pointer;

^^^^^^[2]
color:FFFFFF; font-size:10pt;"

^^^^^^[3] ^^^^[2]
onmouseover="movein(choice1,'')" onmouseout="moveout(choice1)"

^^^^^^^[4] ^^^^^^^[4]
onclick="parent.main.location.href='frmain.htm'">

^^^^^^^^^^^^^^^^^^^^^^^^^

[0] Tables should not be used for layout purposes, only for tabular data.

[1] There are no attributes `font' and `bordercolor' for the `td' element
in any Valid HTML DTD.

[2] See above.

[3] RGB color values must start with the hash (`#') character always.

[4] Here you are referring to the global variable or property `choice1'.
There was no such variable explicitly declared or defined. Relying
on the IE DOM to create properties of the Global Object referring to
element objects with their names or IDs breaks the code in other HTML
UAs.

[5] Frames should be referred to explicitly.
So probably you were looking for

...
<head>
...
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">

<script type="text/javascript">
function isMethodType(s)
{
return (s == "function" || s == "object");
}

function setStyleProperty(o, p, v)
{
if (typeof o.style != "undefined"
&& typeof o.style[p] != "undefined")
{
return ((o[p] = v) == v);
}
}

function mouseHandler(id, bMoveIn)
{
var o;
if (isMethodType(typeof document.getElementById)
&& (o = document.getElementById(id)))
{
setStyleProperty(o, 'backgroundColor',
bMoveIn ? '#4376A9' : '#369' : '#36f');

setStyleProperty(o, 'color',
bMoveIn ? '#ff0' : '#fff');
}
}
</script>
...
</head>
<body>
...
<td width="184" color="#ffffff" class="menu"
id="choice1"
style="border-color:silver; background-color:#36f; color:#fff;
cursor:pointer; font-size:13px"
onmouseover="mouseHandler('choice1', true)"
onmouseout="mouseHandler('choice1', false)"
onclick="parent.frames['main'].location = 'frmain.htm';">
...
</body>
...
HTH

PointedEars

Dec 8 '05 #4

Thomas 'PointedEars' Lahn

Martin Chen wrote:

Thanks so much for your reply.
You're welcome.
As was so painfully, with the emphasis on pain, obvious to you, I don't do
web design/coding for a living so I have some more dumb questions w/r to
your response. I guess my code is a great example of having just enough
knowledge to be dangerous.
Correct. But you are free to learn :)
1) Is the code you gave compatiable with both IE6 and FireFox?
Yes, it is. It will work in _all_ HTML user agents that properly
implement this part of W3C DOM Level 2 Core, HTML and Styles.
I've heard they use different DOMs.
They do. IE has its DOM and Firefox has the Gecko DOM, where both a
proprietary. However these DOMs implement some important features of
the standard W3C DOM (in IE/Win from v5.0 on).
Anything I should particularly avoid to avoid compatability issues?
Do not use any DOM feature, particularly methods, without feature-testing
it before on run-time.

<URL:http://www.pointedears.de/scripts/test/whatami>
2) What I meant by "Does not work" (point taken) was that from what I can
tell none of the code in my javascript mouse handlers seems to execute in
Firefox (but does in IE6) unless I reload the page (of contents frame).
So, did you read and follow the FAQ on debugging? No error messages at all?
Specifically, when the mouse passes over the menu item, the text should
change from white to yellow and the background get slightly lighter and
the reverse when the mouse leaves.
That much was clear.
If your interested, here's the URL
(start with www end with com) interspersed with extra "z"s to avoid nasty
bots. .EnzVisionzSystemsLzLC.
Am I supposed to solve that riddle to see the code? You bet I am not.
At least now, you would like to have something from your readers. Making
helping you more difficult is not going to help you.
Will the code below that solve this problem?
My code is intended to solve that problem, otherwise I would not have posted
it.
How? (Just curious)
| function mouseHandler(id, bMoveIn)
| {
| var o;
| if (isMethodType(typeof document.getElementById)
| && (o = document.getElementById(id)))
| {
| setStyleProperty(o, 'backgroundColor',
| bMoveIn ? '#369' : '#36f');
|
| setStyleProperty(o, 'color',
| bMoveIn ? '#ff0' : '#fff');
| }
| }
| [...]
| onmouseover="mouseHandler('choice1', true)"
| onmouseout="mouseHandler('choice1', false)"

The mouseHandler() method does what both the previous movein() and moveout()
methods attempted to do. To distinguish between the events, it is passed
`true' as second, previously _unused_, argument when the `mouseover' event
occurs and `false' (which could be left out) if the `mouseout' event
occurs.

The method is passed the ID of the target element as first argument.
Within the method, it is tested [through the user-defined method
isMethodType()] whether document.getElementById() is supported by
the UA's DOM and if so, it is called with the value of the first
method argument (id) as argument. If successful, an object reference
is returned that is assigned to the local variable `o'; since that
expression is within a boolean expression, it is automatically
type-converted: a valid object reference always returns to `true'.
The `if' expression evaluates to `true' (because the previous feature
test returned `true' as well and the operator is `&&') and the
adjacent block is evaluated. The user-defined setStyleProperty()
method is called two times to set style properties of the element
object referred to if supported (`typeof ... != "undefined"'). The
new value of those properties is defined by the value of the second
argument of mouseHandler() [see above].

Reviewing this, there is a much better approach because

1. The target element is the element that fired the event.
2. The event type can be retrieved from the value of the
`type' property of the `event' object, whether that
being global or context-sensitive.

Therefore:

function mouseHandler(o, e)
{
var bMoveIn = (e.type == "mouseover");

setStyleProperty(o, 'backgroundColor',
bMoveIn ? '#369' : '#36f');
setStyleProperty(o, 'color',
bMoveIn ? '#ff0' : '#fff');
}

[...]
onmouseover="mouseHandler(this, event);"
onmouseout="mouseHandler(this, event);"

And there is an additional CSS alternative for conforming user agents
where client-side script support is not present:

#choice1 {
background-color:#36f;
color:#fff;
}

#choice1:hover {
background-color:#369;
color:#ff0;
}

(Replace `#choice' with `td' for this to apply to all `td' elements,
then you would not need IDs in the HTML code anymore.)

That said, using event handler attribute values for `td' elements to
facilitate some kind of menu is clearly a Bad Thing (cannot be said
too often). The menu should be realized through a[href] elements
that are children of `li' elements that are children of formatted `ul'
elements. The `target' attribute of a[href] elements should be used
where necessary to access different frames; however, generally, frames
should be used only when really needed, i.e. they should be avoided
whenever and whereever viable.
3) I see below 3 hex color codes rather than the 6 ones I'm familiar with
(e.g. which.style.color = '#ff0') what does that mean?
This color value, which is valid CSS and CSS only, is
independent of the color depth of the readers's display.

<URL:http://www.w3.org/TR/CSS2/syndata.html#value-def-color>

Additionally, I coined the term True Web-Safe Colors to specify color values
that are very unlikely to result in dithering or palette correction down to
a color depth of 8 bit. Those are hex triplets #hhh with each component
being only one of the values `0', `3', ..., `c' and `f', essentially
resulting in the previous 216-colors Netscape Safe-Browser color palette
with the additional property of being independent of color depth, hence
adhering fully to accessibility guidelines, proper foreground-background
contrast provided.
4) You wrote
setStyleProperty(o, 'backgroundColor',
bMoveIn ? '#4376A9' : '#369' : '#36f'); I understand (<boolexp> : <truechoice> : <falsechoice>) but there's an
extra
colon that I can't parse. I guess this is also an example of the 3 hex
long color thing that I don't understand.

No, it is a typo that I corrected in
news:11****************@PointedEars.de :)
5) You commented on my bad choice of colors; that they arent' web safe.
When I chose those colors, I did so on an educated guess that the concept
of web-safe colors was from a time when lots of poeple ran 16 or 256 color
graphic cards and so non-web-safe colors were dithered or god knows what .
They may be still dithered or adjusted to the available color palette,
even with 16-bit color depth (HiColor). With #hhhhhh, you are assuming
TrueColor (24+ bits).
However, the type of person who would look at my web site would be running
at least 16bit color depth.
How can you be so sure? (Do you not want visitors with less color depth?)
So, I figured it wouldn't matter if my colors weren't traditional
web-safe. Is that reasonable or am I being to cavalier?
You do not take mobile devices for accessing the Web into account,
for example.
6) So what is the "standard" for web page authoring technology these days
(e.g. CSS, DHTML but not frames etc etc etc). I'd like to know for future
reference which technologies to avoid. (I guess I'll redo my web site
some sunny day when it bubbles up to a priority)
As that is a general question, it is better to be asked in the appropriate
newsgroup: comp.infosystems.www.authoring.misc
7) For future reference: Do you have any recommendation for reasonably
priced properly done Web page software package? As you know I'm running
FP 2K but I'm really augmenting it by hand these days. I take it for
granted that anything produced by MS will have compatability issues. I
don't author web pages for a living so spending lots of money and time
probably isn't in the cards.
That is quite off-topic here, too. However, it is my conviction that using
any development software without basic knowledge about the techniques it
provides, will inevitably result in bad code. FP is no exception of this;
there are _professionals_ that are able to do valid, interoperable code
with that application. Yet, also because I am working on GNU/Linux where
there is no FP available, I prefer plain-text editors with additional
features such as syntax highlighting and code completion, especially I
am using and recommending eclipse (currently 3.2) with several editor
plugins like PHPeclipse, MyEclipse (currently 4.1M1) and several (other)
JavaScript editor plugins.
My questions reply interspersed below:
"Thomas 'PointedEars' Lahn" <Po*********@web.de> wrote in message
news:42****************@PointedEars.de...
Martin Chen wrote:
[Full quote]

DO NOT top-post on Usenet.

<URL:http://jibbering.com/faq/faq_notes/pots1.html>
PointedEars

Dec 8 '05 #5

Thomas 'PointedEars' Lahn

Thomas 'PointedEars' Lahn wrote:

Martin Chen wrote:
So my index.html frame looks like this:
----------------
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">

If you want to use frames, you need to declare a _Frameset_ DTD.

See <http://validator.w3.org/> for this and other errors in your markup.

So my index.html frame looks like this:
----------------
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">

Here a HTML 3.2, ISO HTML, or HTML 4.01 Strict or Transitional DTD is
required. Since you are using both stylesheets and deprecated format
attributes, the HTML 4.01 Transitional DTD is required. However, I
strongly suggest you abandon format attributes in favor of stylesheets,
and declare HTML 4.01 Strict then.

That is misleading advice due to copy-paste error. The first part refers
to what was quoted, the wrong DOCTYPE in the frameset document. The second
part refers to

and the essential parts of my contents frame looks like this:
---------------------
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">

Sorry for causing confusion.
PointedEars

Dec 9 '05 #6

firefox onmouseover frame focus problem

Similar topics