CSS and JS

Chibi Otaku

10-02-2004, 08:13 PM

Is it possible to link to an external JS file through a CSS stylesheet? If so, how?

Thanks,
Chibi Otaku

liorean

10-02-2004, 08:28 PM

No, not in any reasonable way, though if you go through a few loops you can get both iew and moz to do it.

]|V|[agnus

10-02-2004, 09:21 PM

Why would you want to?

ampulator00

10-02-2004, 11:44 PM

If you ask me, it would be actually easier to link an external CSS stylesheet through Javascript code. But I would have no reason to do that.

]|V|[agnus

10-04-2004, 03:11 PM

How would it be easier?

Willy Duitt

10-04-2004, 03:15 PM

|V|[agnus']Why would you want to?

*cough* to run javascript commands on javascript disabled browsers *cough*

gohankid77

10-04-2004, 04:24 PM

IE5.0+ introduced the extra item known as "expression" which allows you to use JavaScript expressions from CSS. Here are Google's results (http://www.google.com/search?q=css+expression+javascript&sourceid=firefox&start=0&start=0&ie=utf-8&oe=utf-8).

As far as I know, it is IE only, and it was not created by the W3C.

brothercake

10-04-2004, 08:57 PM

*cough* to run javascript commands on javascript disabled browsers *cough*
Be fair - there may be people using expression() to circumvent user JS preferences, but I don't have it on any reliable authority that this actually works, and I wouldn't dismiss it as the sole reason for their use either way.

I can think of lots of situations where dynamic CSS properties would be useful, and neater to implement through behavioral extensions to style than by writing an external script. I use expression() in my menu for things that would otherwise be impossible to calculate, because expression evaluates during the initial render phase, compared with DOM scripting which is always retrospective.

But as liorean said, only win/ie and moz can do it, and neither of their methods are particularly salutory.

Chibi Otaku

10-07-2004, 02:21 AM

[ Edit: I didn't want to post a new thread, so I bumped one of mine that's a few days old. ]
I wanted to run a Javascript on every page without having to add it to every page (snowflakes or bufferflies or some other annoying thing). I know there are easier/other ways, but... Actually I have no idea why I asked.
But now I have a new problem. I added link styles (<a> tags) to my stylesheet, and it doesn't work. Even in IE (http://www.codingforums.com/images/smilies/rolleyes.gif).
/*..............................................................................
<A> Links
..............................................................................*/
A:link {
color: #000000;
text-decoration: none;
border: 1px solid;
border-color: #FFFFFF;
}
A:visited {
color: #000000;
text-decoration: none;
border: 1px solid;
border-color: #FFFFFF;
}
A:active {
color: #000000;
text-decoration: none;
border: 1px solid;
border-color: #FFFFFF;
}
A:hover {
color: #FFFFFF;
text-decoration: none;
border: 1px solid;
border-color: #FFFFFF;
}

gohankid77

10-07-2004, 02:51 AM

If your <a>s are lowercase, then your CSS should also have lowercase a's:

a:link, not A:link
a:visited, not A:visited

If this isn't the problem, please explain "it doesn't work".

Chibi Otaku

10-07-2004, 03:00 AM

I have lowercase <a> tags (<a href>). I tried what you said, and no difference. I ran in through the W3 CSS Validator and it came up with all kinds of errors (which is odd, because they all worked--things like "#4a4a4a is not a valid color"). "It doesn't work" means that the links appear default blue, red, and purple as if I changed nothing. I've messed with all kinds of values, etc. to no avail.

shlagish

10-07-2004, 03:06 AM

Maybe you didn't link to your stylesheet properly..

gohankid77

10-07-2004, 03:08 AM

Can you post your code or a URL (which would be better)?

Chibi Otaku

10-07-2004, 11:08 PM

The rest of my stylesheet works fine...
/*..............................................................................
<BODY> Tag
..............................................................................*/
body {
background-color: #4a4a4a;
text-decoration: italic;
margin-left: 20px;
margin-right: 20px;
font-family: georgia;
text-align: justify;
font-size: 12px;
font-color: #8a8a8a;
text-align: center;
a: 1px white dotted;
}

/*..............................................................................
<TABLE> Attributes
..............................................................................*/
th {
color: white;
text-align: center;
letter-spacing: 2px;
background-color: #2a2a2a;
font-face: Georgia;
border: 1px solid #FFaa00;
}

td {
color: white;
text-align: justify;
letter-spacing: 1px;
background-color: #3a3a3a;
font-face: Georgia;
border: 1px solid #aa4a00;
}

td.quote {
color: white;
text-align: center;
}

td.footer {
color: white;
text-align: center;
font-face: Georgia;
border: 0px;
}

table.dark {
border: 1px solid #FFFFFF;
background-color: #2a2a2a;
color: #FFFFFF;
font-family: Georgia;
font-size: 10px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
text-decoration: none;
background-color: black;
)

/*..............................................................................
<A> Links
..............................................................................*/
a:link {
color: white;
text-decoration: underline;
border: 1px solid;
border-color: #FFFFFF;
}

a:visited {
color: #000000;
text-decoration: none;
border: 1px solid;
border-color: #FFFFFF;
}

a:active {
color: #000000;
text-decoration: none;
border: 1px solid;
border-color: #FFFFFF;
}

a:hover {
color: #FFFFFF;
text-decoration: none;
border: 1px solid;
border-color: #FFFFFF;
}
chibi.absfoocumber.com/Chibi/TestFiles/CSS/Test_Dealy.html

Edit: I've been looking over some stuff.. and I don't put the a styles inside body, do I? (i.e. body { a:link { selector1=value; } } etc...)

gohankid77

10-07-2004, 11:59 PM

No, you don't put it in the body tag:

body {
(stuff for the entire document)
}

a:link {
(stuff for unvisited links)
}

....

Chibi Otaku

10-08-2004, 12:04 AM

That's what I thought... and neither work. I'm an impatient person when it comes to code, but I've tried just about everything I can think of.

gohankid77

10-08-2004, 12:44 AM

Please show us all of the (X)HTML and CSS. If you have a URL where we can view the page that you are having trouble with, please post the URL. The URL you gave earlier was just a table with absolutely no links.

Chibi Otaku

10-08-2004, 12:49 AM

Oops, let me fix it. Sorry, forgot that I was going to wait and get the problem fixed before I uploaded it again.
chibi.absfoocumber.com/Chibi/TestFiles/CSS/styledark.css

Chibi Otaku

10-08-2004, 01:11 AM

Well, I was messing with W3School's "Tryit Editor 1.4", and my link styles all worked until I copied my whole stylesheet in there. Any conflict? (Link is somewhere in this thread, I know I posted it (styledark.css was for my site and styleschool.css was intended for me to HTML-ize my homework--M$ Word is a pain))

gohankid77

10-08-2004, 01:57 AM

You could try getting rid of the "a:" part in the body{}.

/* Edit */

This is hard! I can't figure out why it won't work!

gohankid77

10-08-2004, 02:26 AM

Here is some CSS I fixed up for you:

/*..............................................................................
<BODY> Tag
..............................................................................*/
body {
background-color: #4a4a4a;
font-style: italic;
margin: auto 20px;
font-family: georgia;
text-align: justify;
font-size: 12px;
color: #8a8a8a;
}

/*..............................................................................
<TABLE> Attributes
..............................................................................*/
th {
color: white;
text-align: center;
letter-spacing: 2px;
background-color: #2a2a2a;
font-family: georgia;
border: 1px solid #ffaa00;
}

td {
color: white;
text-align: justify;
letter-spacing: 1px;
background-color: #3a3a3a;
font-family: georgia;
border: 1px solid #aa4a00;
}

td.quote {
color: white;
text-align: center;
}

td.footer {
color: white;
text-align: center;
font-family: georgia;
border: 0px none;
}

table.dark {
border: 1px solid #ffffff;
background-color: #2a2a2a;
color: #ffffff;
font-family: tahoma;
}

/*..............................................................................
<A> Links
..............................................................................*/
a:link {
color: white;
border: 1px solid #ffffff;
}

a:visited {
color: #000000;
text-decoration: none;
border: 1px solid #ffffff;
}

a:active {
color: #000000;
text-decoration: none;
border: 1px solid #ffffff;
}

a:hover {
color: #ffffff;
text-decoration: none;
border: 1px solid #ffffff;
}

I can't figure out what was wrong with it! I just recoded it by hand, and *poof*! It worked!

Also, you might want to add a !DOCTYPE. Here is the one I used:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Chibi Otaku

10-08-2004, 03:34 AM

Thanks, it worked. I was going to look into a dtd when I got my page ready to be published. Again--thanks, I was pulling my hair out over this.

gohankid77

10-08-2004, 04:25 AM

No problem. I still can't figure out why it needed to be retyped though... Oh well. Feel free to come back any time!