Can you make this work in Netscape 7 (javascript CSS manipulation)

Dom

I have a frameset with a left right columns, called 'index' and
'content'.

The left column of the frameset ('index') loads an index.htm file
which have these hrefs (summarized the code a bit) for readability :

<a href="studio/index.htm" target=content id="studio"> studio </a>
<a href="bandw/index.htm" target=content id="bandw"> bandw </a>
<a href="arch/index.htm" target=content id="arch"> arch </a>
<a href="etc/index.htm" target=content id="etc"> etc </a>

The right column of the frameset ('content') loads the file based on
which link was clicked in the index column. Each foo/index.htm has
onload/onunload functions with <body load= and unload= set
appropriately. An example (from studio/index.htm) is :

function onloaded()
{parent.frames.index.document.getElementById("stud io").className="1";}

function onunloaded()
{parent.frames.index.document.getElementById("stud io").className="2";}
These foo/index.htm's also load a style sheet which has these entries
:

a:link, a:visited, a:active { text-decoration: none; color: white}
a:hover { color: blue }

a.1:link, a.1:visited, a.1:active { text-decoration: none; color:
orange }
a.1:hover { color: orange }

a.2:link, a.2:visited, a.2:active { text-decoration: none; color:
white }
a.2:hover { color: blue }

ok so what does this all do ? simply this. when the link in the index
is clicked, it is turned orange by the loaded index.htm in the content
column. It stays orange the mouse is hovering over the link.

so whats the problem ? It works fine in Internet Explorer ie the index
link will turn orange and stay orange even on a mouse hover over it.
The other links in the index page are white, or blue on hover. But in
Netscape 7 the link does not turn orange onload. The orange part seems
to be ignored. There are no errors in the javascript console. In fact,
all links in the index are white , or blue on mouse hovering over
them.

What is different between netscape and ie that would cause this ? Is
it the way the style sheet is processed ? Have I made a mistake in the
order of definitions in the style sheet ? Or is the onloaded()
function incorrect ? Any help would be much appreciated. I'm somewhat
of a newbie to javascript and css manipulation and haven't found a
good article yet on the mapping between the two.

Thanks in advance for any suggestions/help.

-Dom

VK

try declare hover with high priority like this:
a.1:hover { color: orange ! important}
to ensure it overrides any other css settings

Dom <do***********@yahoo.com> wrote in message
news:85**************************@posting.google.c om...

I have a frameset with a left right columns, called 'index' and
'content'.

The left column of the frameset ('index') loads an index.htm file
which have these hrefs (summarized the code a bit) for readability :

<a href="studio/index.htm" target=content id="studio"> studio </a>
<a href="bandw/index.htm" target=content id="bandw"> bandw </a>
<a href="arch/index.htm" target=content id="arch"> arch </a>
<a href="etc/index.htm" target=content id="etc"> etc </a>

The right column of the frameset ('content') loads the file based on
which link was clicked in the index column. Each foo/index.htm has
onload/onunload functions with <body load= and unload= set
appropriately. An example (from studio/index.htm) is :

function onloaded()
{parent.frames.index.document.getElementById("stud io").className="1";}

function onunloaded()
{parent.frames.index.document.getElementById("stud io").className="2";}
These foo/index.htm's also load a style sheet which has these entries
:

a:link, a:visited, a:active { text-decoration: none; color: white}
a:hover { color: blue }

a.1:link, a.1:visited, a.1:active { text-decoration: none; color:
orange }
a.1:hover { color: orange }

a.2:link, a.2:visited, a.2:active { text-decoration: none; color:
white }
a.2:hover { color: blue }

ok so what does this all do ? simply this. when the link in the index
is clicked, it is turned orange by the loaded index.htm in the content
column. It stays orange the mouse is hovering over the link.

so whats the problem ? It works fine in Internet Explorer ie the index
link will turn orange and stay orange even on a mouse hover over it.
The other links in the index page are white, or blue on hover. But in
Netscape 7 the link does not turn orange onload. The orange part seems
to be ignored. There are no errors in the javascript console. In fact,
all links in the index are white , or blue on mouse hovering over
them.

What is different between netscape and ie that would cause this ? Is
it the way the style sheet is processed ? Have I made a mistake in the
order of definitions in the style sheet ? Or is the onloaded()
function incorrect ? Any help would be much appreciated. I'm somewhat
of a newbie to javascript and css manipulation and haven't found a
good article yet on the mapping between the two.

Thanks in advance for any suggestions/help.

-Dom

Dom .

Hi VK,

Thanks for the suggestion but no luck. Any other idea ?

Thanks
Dominic

*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!

Dom .

hi VK, thanks for the suggestion. Alas no luck. Any other ideas anyone ?
-Dom

*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!

VK

Hello again

The Occam's Razor:
"one should not increase, beyond what is necessary, the number of
entities..."

1) Remove all your style/script stuff from both frames.
2) In the menu frame (left) put this:
<style>

</style>

IMHO it makes exactly what you want (unless I missed something): the current
link is marked orange and not hovering, otherwise it's white and hovering
blue.
Dom . <sp**@spamville.com> wrote in message
news:3f***********************@news.frii.net...

hi VK, thanks for the suggestion. Alas no luck. Any other ideas anyone ?
-Dom

*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!

Dom .

hi,

Thanks for the code. I appreciate the help.

The order of styles you had listed needed to change such that the hover
was last in order for the link to turn blue when the mouse was over it.

The problem I now have is that if you click anywhere outside of the link
text in IE, the link reverts back to white. In Netscape 7 if you hover,
it correctly turns blue, if you then click, it flashes orange, the
reverts to blue the as you blur it goes white again. I want the link
text to remain orange and change back to white only when another index
link is clicked.

The other problem with the approach here is that it doesn't address the
link text being orange from the get go, i.e. when the frameset is
loaded, the link should be orange without having to click on it first
(hence my apparently less simple approach).

Any other ideas ?

Thanks again and I really do appreciate the help. I had it working in IE
the first way, I don't know why that doesn't work in Netscape 7 tho.

-Thanks
Dom

*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!

Dom .

Hi,

Actually, heres an example to illustrate the a) desired behaviour (open
frameset.htm below in IE 5+) and the problem (open frameset.htm in
Netscape 7 and prob'y 6 too).

In IE you will see the Link1 is orange initially. In Netscape this is
not the case. The other link behaves correctly and is blue and white
on-hover. The orange should stay orange even on-hover. Why does this not
work in netscape ?

Here's the 5 simple example files - the style sheet, the frameset, the
main index and 2 subindices. Save them off and load frameset.htm
-----------------------------------------------------
general.css
-----------
a:link, a:visited, a:active { text-decoration: none; color: #d0d0d0 }
a:hover { color: #0099ff }

a.1:hover { color: #cc6633 }
a.1:link, a.1:visited, a.1:active { text-decoration: none; color:
#cc6633 }

a.2:link, a.2:visited, a.2:active { text-decoration: none; color:
#d0d0d0 }
a.2:hover { color: #0099ff }
-----------------------------------------------------
frameset.htm
------------

<HTML><HEAD></HEAD>
<FRAMESET frameborder=0 cols="20%,*" border="1" framespacing="0">
<FRAME name="index" src="index.htm">
<FRAME name="content" src="subindex1.htm">
</FRAMESET>
</HTML>

-----------------------------------------------------
index.htm
---------
<html><head></head>
<link rel="stylesheet" href="general.css" type="text/css">
<BODY bgcolor="#000000" >
<a href="subindex1.htm" target=content
id="indexlink1">Link1</a> <br>
<a href="subindex2.htm" target=content id="indexlink2">Link2</a>
</body></html>

-----------------------------------------------------
subindex1.htm
-------------

<html><head>

<link rel="stylesheet" href="general.css" type="text/css">

<script language="javascript" type="text/javascript">
function onloaded() {
id=parent.frames.index.document.getElementById("in dexlink1");
id.className="1"; }
function onunloaded() {
id=parent.frames.index.document.getElementById("in dexlink1");
id.className="2"; }
</script></head>
<BODY bgcolor="#000000" onload="onloaded()" onunload="onunloaded()">
<a href="http://www.yahoo.com">subindex1 link 1 </a> <br>
<a href="http://www.yahoo.com">subindex1 link 2 </a>
</body></html>

-----------------------------------------------------
subindex2.htm
-------------
<html>
<head>

<link rel="stylesheet" href="general.css" type="text/css">

<script language="javascript" type="text/javascript">
function onloaded() {
id=parent.frames.index.document.getElementById("in dexlink2");
id.className="1"; }
function onunloaded() {
id=parent.frames.index.document.getElementById("in dexlink2");
id.className="2"; }
</script></head>
<BODY bgcolor="#000000" onload="onloaded()" onunload="onunloaded()">
<a href="http://www.yahoo.com">subindex2 link 1 </a> <br>
<a href="http://www.yahoo.com">subindex2 link 2 </a>

</body></html>
*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!

Lasse Reichstein Nielsen

Dom . <sp**@spamville.com> writes:

Actually, heres an example to illustrate the a) desired behaviour (open
frameset.htm below in IE 5+) and the problem (open frameset.htm in
Netscape 7 and prob'y 6 too).

In IE you will see the Link1 is orange initially. In Netscape this is
not the case. The other link behaves correctly and is blue and white
on-hover. The orange should stay orange even on-hover. Why does this not
work in netscape ?

Because "1" and "2" are not legal class names, so the selectors are
ignored. Change it to "x1" and "x2" or some other legal class name.

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'

Dom .

Thanks Lasse,
That seemed to clear the problem up in Netscape.
You mention that these are not legal classnames. Is this just for
Netscape that they are illegal or generally ? Just curious how that
worked in IE without problem when the class name was 1 or 2.
-Dom

*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!

Lasse Reichstein Nielsen

Dom . <sp**@spamville.com> writes:

That seemed to clear the problem up in Netscape. You mention that these are not legal classnames. Is this just for
Netscape that they are illegal or generally ?
They are not illegal as a class names as such, they are just likely to
not to work unless you know what you are doing.

They are illegal class names in *selectors* according to the CSS *2*
specification. The grammar rule is:
class : '.' IDENT
and an IDENT cannot start with a number.
<URL:http://www.w3.org/TR/CSS21/grammar.html>

It can start with an escape, so you could write the rule as

a.\31:hover {...}

The "\31" is the hex escape value for the Unicode character with
number 49, i.e., the digit "1". It starts with an escape, which is
legal for IDENT, and it actually works in Mozilla, IE6 and Opera 7.

Just curious how that worked in IE without problem when the class
name was 1 or 2.

Starting the class selector with a digit was legal in CSS 1, and IE
is really a CSS 1 browser with a few CSS 2 features added. It is far
from adhering to the CSS 2 specification.

From the link above:
---
In CSS1, a class name could start with a digit (".55ft"), unless it
was a dimension (".55in"). In CSS2, such classes are parsed as
unknown dimensions (to allow for future additions of new units). To
make ".55ft" a valid class, CSS2 requires the first digit to be
escaped (".\35 5ft")
---
/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'

Can you make this work in Netscape 7 (javascript CSS manipulation)

This discussion thread is closed

Similar topics