473,569 Members | 2,848 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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( "studio").class Name="1";}

function onunloaded()
{parent.frames. index.document. getElementById( "studio").class Name="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 1905
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.goo gle.com...
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( "studio").class Name="1";}

function onunloaded()
{parent.frames. index.document. getElementById( "studio").class Name="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.c ss" type="text/css">
<BODY bgcolor="#00000 0" >
<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.c ss" type="text/css">

<script language="javas cript" type="text/javascript">
function onloaded() {
id=parent.frame s.index.documen t.getElementByI d("indexlink1") ;
id.className="1 "; }
function onunloaded() {
id=parent.frame s.index.documen t.getElementByI d("indexlink1") ;
id.className="2 "; }
</script></head>
<BODY bgcolor="#00000 0" onload="onloade d()" onunload="onunl oaded()">
<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.c ss" type="text/css">

<script language="javas cript" type="text/javascript">
function onloaded() {
id=parent.frame s.index.documen t.getElementByI d("indexlink2") ;
id.className="1 "; }
function onunloaded() {
id=parent.frame s.index.documen t.getElementByI d("indexlink2") ;
id.className="2 "; }
</script></head>
<BODY bgcolor="#00000 0" onload="onloade d()" onunload="onunl oaded()">
<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
13650
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 Sun, which I know is not javascript but it could not hurt. I have done everything I know of to fix this problem but still Javscript will not work on...
3
10167
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() { wMap=window.open('http://naxos.orangeport.net/cyclades-info/ShowMap.php?id_advert=45&map=','','width=400,height=600'); wMap.onResize =...
4
3791
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 audio file initiates client-side streaming/playing of the audio file. Is there a way with Javascript to make a left-click trigger a download of the...
3
1390
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 doesn't do its thing when under Netscape 7.1? I've viewed javascript "test pages" on Netscape 7.1, and they seem to work ok, so I'm presuming...
3
3028
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 original script code. Is there a way to see the original coding in Netscape 7x and/or IE 6x without falling back to an old version of NS ? That...
13
2068
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 it goes straight to the redirect page 'test.html' which indicates that javascript is not enabled and it also does not display the header info. Can...
2
2409
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 processing. verifyFields() is working fine and so does the history() function.
0
7620
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...
0
8139
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
1
7684
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...
0
7985
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
0
6298
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...
0
5234
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert...
0
3659
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
1230
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
959
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...

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.