#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2000
    Posts
    5
    Rep Power
    0
    Sorry if this is a repeat question -- any way to put javascript in a CSS? Can't get it to work. Online reference about this in particular? Thanks!
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2000
    Posts
    114
    Rep Power
    15
    You can't put javascript in a css, but you can link your page to an external javascript.
    As in:
    <BLOCKQUOTE><font size="1" face="Verdana,Arial,Helvetica">code:</font><HR><pre><script src="/java.js" language="JavaScript"></script>[/code]
    Or you can use JavaScript to write your CSS, as in:
    <BLOCKQUOTE><font size="1" face="Verdana,Arial,Helvetica">code:</font><HR><pre>if (IE){
    document.write("<style><!--style for IE--></style>")
    }
    if (Netscape){
    document.write("<style><!--style for Netscape--></style>")
    }[/code]

    Not sure if that answers your question, but it might help.
  4. #3
  5. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2000
    Posts
    3
    Rep Power
    0
    Great tip! Is this how you use browser-specific CSS? Do you have any examples of common styles used with this sort of script? I'm assuming most of it would affect BODY and TABLE tags, right?
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2000
    Posts
    114
    Rep Power
    15
    You can use browser specific CSS to effect any common rendering discrepancies. For example, it seems to me that font size renderings vary between browsers, so sometimes you'd say:
    <BLOCKQUOTE><font size="1" face="Verdana,Arial,Helvetica">code:</font><HR><pre>if(IE)
    {
    document.write("<style><!--td{font-size:12px;}--></style>")
    }
    if (Nav)
    {
    document.write("<style><!--td{font-size:10px;}--></style>")
    }[/code]
    And your font will look the same size in both browsers. Or change the pages font size based on the user's screen resolution:

    <BLOCKQUOTE><font size="1" face="Verdana,Arial,Helvetica">code:</font><HR><pre>if ((screen.width ==800)&&(screen.height ==600)){
    document.write ("<style><!--body{font-size:12px;}--></style>");
    //make your text smaller
    }
    if ((screen.width ==1024)&&(screen.height ==768)){
    document.write ("<style><!--body{font-size:14px;}--></style>");
    //make your text bigger.
    }[/code]
    You can have tons of fun with that kind of stuff.

    [This message has been edited by billyo (edited July 05, 2000).]
  8. #5
  9. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2000
    Posts
    5
    Rep Power
    0
    I tried Billyo's suggestion, but still having problems. I've just pasted plain old jscript into the java.js file, but it isn't being picked up in the html page. If I put the following script into the html page, it works (links change color, etc.). Any more ideas? Thanks again for all you help!

    <script language="JavaScript"><!-- hide from JavaScript-challenged browsers

    sCSS = '<STYLE type="text/css">' +
    '.placeholder {color:red}' +
    'A:link {color: blue;}' +
    'A:visited {color: blue;}' +
    'A.bb {color: blue;text-decoration:underline; font-weight:bold;}' +
    'A.bb:visited {color: blue; text-decoration:underline;font-weight:bold;}' +
    'A:hover {color:red;}' +
    'A.bb:hover {color:red;}' +
    ' BODY {font-family:Arial;color:black;font-size="normal";}' +
    '</STYLE>';

    document.write(sCSS)

    // -->
    </script>
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2000
    Posts
    114
    Rep Power
    15
    Have you tried using the absolute path to your java.js file, as it is "/java.js" probably wouldn't work, try using the complete path to it. Also, I'm assuming that you use your favorite browser detecting script for assigning values to IE or Nav.
  12. #7
  13. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2000
    Posts
    5
    Rep Power
    0
    Yep -- tried that, made sure it was in a location without an underscore, etc.
  14. #8
  15. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2000
    Posts
    114
    Rep Power
    15
    I think I understand what you want to be able to do now. Try this:
    <BLOCKQUOTE><font size="1" face="Verdana,Arial,Helvetica">code:</font><HR><pre><script language="JavaScript"><!--
    if ((screen.width ==640)&&(screen.height ==480))
    {
    document.write ("<link rel=stylesheet type=text/css href=640x480.css>");
    }
    if ((screen.width ==800)&&(screen.height ==600))
    {
    document.write ("<link rel=stylesheet type=text/css href=800x600.css>");
    }
    if ((screen.width ==1024)&&(screen.height ==768))
    {
    document.write("<link rel=stylesheet type=text/css href=1024x768.css>")
    }
    //--></script>[/code]
    And then just put your css for the various resolution and/or browsers in an external file.
  16. #9
  17. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2000
    Posts
    5
    Rep Power
    0
    Hi -- does this mean put the JScript from the previous note into files called 640x480.css, and so on?

    Thanks for taking the time, I really appreciate it!
  18. #10
  19. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2000
    Posts
    114
    Rep Power
    15
    No no no ...
    Don't put javascript in a css document. CSS is a TLA for Cascading Style Sheet, has nothing to do with javascript. Your different css files should just have css, eg, the css in your 640x480.css could be
    table
    {
    width:450;
    }
    and in your 800x600.css
    table
    {
    width:650;
    }
    etc...
    then you use the javascript in the HTML page itself to decide which css page to link to. So basically you put the javascript from my previous post in your HTML file, and whatever css in the .css file. You can make javascript and css work with one another, but you can't go mixing'm willy nilly.
  20. #11
  21. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2000
    Posts
    5
    Rep Power
    0
    Uhm... Sounds like I can't do what I want to, then. The idea is NOT to put JScript into every HTML page, but to have a line or two that refers to ONE page of JScript.

    Thanks for giving it a go, though!

Similar Threads

  1. Replies: 2
    Last Post: January 8th, 2004, 04:55 AM
  2. Javascript, cookies & CSS
    By firelegend in forum JavaScript Development
    Replies: 4
    Last Post: May 4th, 2003, 07:02 PM
  3. find name of CSS using javascript
    By degsy in forum JavaScript Development
    Replies: 2
    Last Post: October 4th, 2002, 07:24 PM
  4. Mixing CSS and JavaScript?
    By Tensley in forum JavaScript Development
    Replies: 1
    Last Post: September 10th, 2002, 06:40 PM
  5. using a css to call a javascript
    By jed in forum JavaScript Development
    Replies: 2
    Last Post: June 23rd, 2002, 10:16 PM

IMN logo majestic logo threadwatch logo seochat tools logo