473,320 Members | 1,950 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

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
Jul 20 '05 #1
9 1893
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

Jul 20 '05 #2


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!
Jul 20 '05 #3


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!
Jul 20 '05 #4
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>
<!--
a:link { color: white; text-decoration: none}
a:hover { color: blue; text-decoration: none}
a:active { color: orange ! important; text-decoration: none}
a:visited { color: white; text-decoration: none}
-->
</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!

Jul 20 '05 #5


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!
Jul 20 '05 #6

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>&nbsp;<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!
Jul 20 '05 #7
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.'
Jul 20 '05 #8


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!
Jul 20 '05 #9
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.'
Jul 20 '05 #10

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

Similar topics

4
by: Steven Green | last post by:
I did a clean install of Windows XP on my computer and my javascript will not work. I've tried all types of browsers, I've download the Service pack 1 for XP and IE. I have download java from...
3
by: Edwin Boersma | last post by:
Hi, I've just installed Netscape 7.1 for Linux and the following script refuses to open a window when I call this function: function OpenLinkWindow() { ...
4
by: Robert Oschler | last post by:
Hello, I have a web site that has an audio file on it that I make available for download. Right now I'm using the "right-click/save-as" approach. This is because left-clicking the link to the...
3
by: Jeff Wisnia | last post by:
I'd enjoy learning why this piece of javascript code which I cribbed a couple of years ago (It creates a trail of bubbles following the mouse pointer.) works fine in IE 6.0 and Netscape 4.79, but...
3
by: Albert Spencil | last post by:
It once was necessary to type "view-source" before the URL in Location to view the javascript original coding for Netscape. The default was the output code of the script. Now the default is the...
13
by: AMC | last post by:
Hi, I have the below code in an asp page. When I run this page in IE or Opera it correctly displays the header info and does not redirect me to 'test.html'. However, when I run this in Netscape...
2
by: kelvin | last post by:
Hi, I've this piece of code which does not work at all. Can anyone point out my mistake? I've 2 buttons. History button will call verifyFields() function and lead to different page for...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

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.