Can i reference CSS file in my JavaScript File ".js"

[Mahernoz]

Hello Friends,


The JavaScript File exmplmenu_var.js contains the code... (for the
sake of brevity i am showing only that code which needs to be changed)

I am actually developing a menu using JavaScript. I have used a
readymade javascript and there are variables like...


var LowBgColor='#0c4297'; // Background color when mouse is not over
var LowSubBgColor='#0c4297'; // Background color when mouse is not
over on subs
var HighBgColor='0c4297'; // Background color when mouse is over
var HighSubBgColor='#0e1651'; // Background color when mouse is over
on subs
var FontLowColor='white'; // Font color when mouse is not over
var FontSubLowColor='white'; // Font color subs when mouse is not
over
var FontFamily="Abadi MT Condensed" // Font family menu items

My Question is simple, instead of putting the values in JavaScript
File, for color, font, etc. i want to use the .css file, for e.g.
classname instead of values like '#0c4297'.

Any help?

Regards,
Mahernoz

 

[Steve Robinson]

My Question is simple, instead of putting the values in JavaScript
File, for color, font, etc. i want to use the .css file, for e.g.
classname instead of values like '#0c4297'.

Create a CSS class for each colourway and use javascript to change the class
of the element.

Steve.

 

[Mahernoz]

Create a CSS class for each colourway and use javascript to change the class
of the element.

Steve.

Yes i want to accomplish that only, please give the code as how to
change the class of the element using JavaScript. Can i call the CSS
in my .js file with the <link> tag?

 

[Steve Robinson]

Yes i want to accomplish that only, please give the code as how to
change the class of the element using JavaScript. Can i call the CSS
in my .js file with the <link> tag?

Actually a better solution might be not to use javascript at all and use the
pseudo-class hover to change the colour of the element when the mouse is
over it.
http://www.w3schools.com/css/pr_pseudo_hover.asp

Steve.

 

[Mahernoz]

Actually a better solution might be not to use javascript at all and use the
pseudo-class hover to change the colour of the element when the mouse is
over it.http://www.w3schools.com/css/pr_pseudo_hover.asp

Steve.

Hi Steve,

if i use this pseudo-class hoverinstead of javascript menus. How will
i be able to make menus? would a normal html table be enough to make a
menu? because this menu (in the .js file) has N Level hierarchy. How
can i use css, to make such N-Level menus without using JavaScript?

- Mahernoz

 

[Steve Robinson]

if i use this pseudo-class hoverinstead of javascript menus. How will
i be able to make menus? would a normal html table be enough to make a
menu? because this menu (in the .js file) has N Level hierarchy. How
can i use css, to make such N-Level menus without using JavaScript?

You don't use CSS to make the menus, only to style them.

I find that nested lists are the best way to generate hierarchical menus.
They can be any number of levels deep but usability suffers if they are more
than 3 or 4 levels and in that case you might want to review your
information architecture.

Steve.

 

[Mahernoz]

You don't use CSS to make the menus, only to style them.

I find that nested lists are the best way to generate hierarchical menus.
They can be any number of levels deep but usability suffers if they are more
than 3 or 4 levels and in that case you might want to review your
information architecture.

Steve.

Hi Steve,
Thanks, i will try to implement CSS Menus from
http://meyerweb.com/eric/css/edge/menus/demo.html. I hope this solves.
Regards,
Mahernoz

 

[David Golightly]

Hi Steve,
Thanks, i will try to implement CSS Menus fromhttp://meyerweb.com/eric/css/edge/menus/demo.html. I hope this solves.
Regards,
Mahernoz

Keep in mind, though, that Internet Explorer 5-6 only supports
the :hover pseudoclass on <a> elements, so if you want your menu to
work in IE6, you'll have to use at least SOME JavaScript. However,
you may try making a CSS-only menu system, like Steve suggests, for
all other modern browsers, only implementing the JS fallback for IE6.
Or you may find that supporting different code for different browsers
is too much hassle, and go with JavaScript menus that degrade well in
browsers without JavaScript. CSS-only dropdowns were very promising
ca. 2003, but continuing lack of pseudoclass support has meant that
they're seldom used in practice.

Still, you're correct that it's irresponsible for a JS script to be
specifying colors like that. That's the job of a CSS file. Use the
string property element.className to set CSS classes on an element
instead.

-David

 

[Mahernoz]

Keep in mind, though, that Internet Explorer 5-6 only supports
the :hover pseudoclass on <a> elements, so if you want your menu to
work in IE6, you'll have to use at least SOME JavaScript. However,
you may try making a CSS-only menu system, like Steve suggests, for
all other modern browsers, only implementing the JS fallback for IE6.
Or you may find that supporting different code for different browsers
is too much hassle, and go with JavaScript menus that degrade well in
browsers without JavaScript. CSS-only dropdowns were very promising
ca. 2003, but continuing lack of pseudoclass support has meant that
they're seldom used in practice.

Still, you're correct that it's irresponsible for a JS script to be
specifying colors like that. That's the job of a CSS file. Use the
string property element.className to set CSS classes on an element
instead.

-David

Hi David,

Thanks for a timely advice, yes, the above menu doesn't work in IE6
(unfortunately, this i discovered much later).
The problem is the elements(menuitems) are contructed at runtime, so i
need to get the classname in
my .js file (the javascript file which generates the menu). Any idea?

I am using the javascript menu from burmees.nl which supports both ie6
and firefox and also images and text, but the only
thing that i am not having is css support. Otherwise, it's quite easy
to setup(this is required because the client wants to maintain the
menus)

Any alternative in your mind?
Please help.

Regards,
Mahernoz

 

[Mahernoz]

Hi David,

Thanks for a timely advice, yes, the above menu doesn't work in IE6
(unfortunately, this i discovered much later).
The problem is the elements(menuitems) are contructed at runtime, so i
need to get the classname in
my .js file (the javascript file which generates the menu). Any idea?

I am using the javascript menu from burmees.nl which supports both ie6
and firefox and also images and text, but the only
thing that i am not having is css support. Otherwise, it's quite easy
to setup(this is required because the client wants to maintain the
menus)

Any alternative in your mind?
Please help.

Regards,Mahernoz

Hi David,
Instead of this in my Js(JavaScript) file...

var LowBgColor='#0c4297'; // Background color when mouse is not over
var LowSubBgColor='#0c4297'; // Background color when mouse is not
over on subs
var HighBgColor='#0c4297';

can i have this...

var LowBgColor=ClassName; // Background color when mouse is not over
var LowSubBgColor=ClassName; // Background color when mouse is not
over on subs
var HighBgColor=ClassName;

this will shorten my work drastically.

Regards,
Mahernoz