Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 23

Thread: CSS and JS

  1. #1
    New to the CF scene
    Join Date
    Oct 2004
    Location
    Georgia, USA, N. America, W. Hemisphere, Earth, Sol Systen
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS and JS

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


    Thanks,
    Chibi Otaku

  • #2
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    No, not in any reasonable way, though if you go through a few loops you can get both iew and moz to do it.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #3
    Regular Coder
    Join Date
    May 2004
    Location
    Minneapolis, MN, USA
    Posts
    904
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Why would you want to?

  • #4
    New Coder
    Join Date
    Jun 2004
    Posts
    95
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #5
    Regular Coder
    Join Date
    May 2004
    Location
    Minneapolis, MN, USA
    Posts
    904
    Thanks
    0
    Thanked 0 Times in 0 Posts
    How would it be easier?

  • #6
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by ]|V|[agnus
    Why would you want to?
    *cough* to run javascript commands on javascript disabled browsers *cough*

  • #7
    Regular Coder
    Join Date
    Jul 2004
    Location
    engoku no anime
    Posts
    354
    Thanks
    0
    Thanked 0 Times in 0 Posts
    IE5.0+ introduced the extra item known as "expression" which allows you to use JavaScript expressions from CSS. Here are Google's results.

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

  • #8
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Willy Duitt
    *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.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #9
    New to the CF scene
    Join Date
    Oct 2004
    Location
    Georgia, USA, N. America, W. Hemisphere, Earth, Sol Systen
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    [ 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 ().
    Code:
    /*..............................................................................
    <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;
    }
    Last edited by Chibi Otaku; 10-07-2004 at 02:28 AM.

  • #10
    Regular Coder
    Join Date
    Jul 2004
    Location
    engoku no anime
    Posts
    354
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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".

  • #11
    New to the CF scene
    Join Date
    Oct 2004
    Location
    Georgia, USA, N. America, W. Hemisphere, Earth, Sol Systen
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #12
    Senior Coder
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    1,063
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Maybe you didn't link to your stylesheet properly..
    Shawn

  • #13
    Regular Coder
    Join Date
    Jul 2004
    Location
    engoku no anime
    Posts
    354
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Can you post your code or a URL (which would be better)?

  • #14
    New to the CF scene
    Join Date
    Oct 2004
    Location
    Georgia, USA, N. America, W. Hemisphere, Earth, Sol Systen
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The rest of my stylesheet works fine...
    Code:
    /*..............................................................................
    <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...)
    Last edited by Chibi Otaku; 10-07-2004 at 11:32 PM.

  • #15
    Regular Coder
    Join Date
    Jul 2004
    Location
    engoku no anime
    Posts
    354
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No, you don't put it in the body tag:

    Code:
    body {
    (stuff for the entire document)
    }
    
    a:link {
    (stuff for unvisited links)
    }
    
    ....


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •