Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 13
  1. #1
    Member a-drive's Avatar
    Join Date
    Mar 2003
    Posts
    94
    Member #
    809
    Is this possible?

    If so, how would I be able to do it. I know that HTML can be put into a .js file but that HTML is usually shown on the page.

    I want to put CSS in there and have it define some of the pages elements.

    For example, this is what I wish to do. The use of code for colored scrollbars means that my CSS file won't comply with the W3 standards.

    So I'd like to put the code for colored scrollbars within a .js file and do it that way, if it's possible. It's the sneaky way to get around the problem

    Here is the CSS code I need to place inside the .js file

    Code:
     <!--
    BODY {
    scrollbar-face-color: #999999;
    scrollbar-shadow-color: #999999;
    scrollbar-highlight-color: #999999;
    scrollbar-3dlight-color: #999999;
    scrollbar-darkshadow-color: #999999;
    scrollbar-track-color: #999999;
    scrollbar-arrow-color: #000000; 
    }
    -->
    Regards,
    Chris

  2.  

  3. #2
    Senior Member skrlin's Avatar
    Join Date
    Apr 2003
    Location
    Illinois
    Posts
    562
    Member #
    1063
    First off, you have to make sure this is within your body tag, or called via <body onload= or else it won't work.

    Here's the code:

    Code:
    <script type="text/javascript">
    function colorTheBar() { // remove this line if not using onLoad event
    document.body.style.scrollbarFaceColor = "#999999";
    document.body.style.scrollbarShadowColor = "#999999";
    document.body.style.scrollbarHighlightColor = "#999999";
    document.body.style.scrollbar3dLightColor = "#999999";
    document.body.style.scrollbarDarkShadowColor = "#999999";
    document.body.style.scrollbarTrackColor = "#999999";
    document.body.style.scrollbarArrowColor = "#000000";
    } // remove this too if not using onLoad event
    </script>
    and to call if from the body tag:

    Code:
    <body onLoad="colorTheBar()">
    Or if you wish to use the script in the body, just make sure it is after the initial <body> tag.
    - Brian

  4. #3
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    Chris,

    you don't want to put it in a .js file, you want to put it in a .css file (cascading style sheet file).

    To link the css file into your page, use this code in your <head> area:
    Code:
    <link rel="stylesheet" type="text/css" href="myStyle.css">
    Skrlin,

    Both your way and Chris's way are valid. His way uses CSS, yours uses DOM. Either will work, but his doesn't require using the onload event.

  5. #4
    JR
    JR is offline
    Senior Member JR's Avatar
    Join Date
    Nov 2002
    Location
    UK
    Posts
    4,354
    Member #
    257
    his problem i think is that he can't use that because the colouring of the scrollbar doesn't coply with w3 standards
    JR

  6. #5
    Member a-drive's Avatar
    Join Date
    Mar 2003
    Posts
    94
    Member #
    809
    Correct, jravenscroft. The .js way is a sneaky way of doing it but still complying with the standards.

    Thanks skrlin. Works perfectly.

  7. #6
    Senior Member skrlin's Avatar
    Join Date
    Apr 2003
    Location
    Illinois
    Posts
    562
    Member #
    1063
    No problem, can you post a link to the work ?
    - Brian

  8. #7
    Member a-drive's Avatar
    Join Date
    Mar 2003
    Posts
    94
    Member #
    809
    skrlin, http://www.godwasme.com/ my blog.

    Edit: I've had to take it off actually, because when I do have it in, my background doesn't load. Weird :cheeky: Gonna have to find a work around for it.

  9. #8
    Senior Member skrlin's Avatar
    Join Date
    Apr 2003
    Location
    Illinois
    Posts
    562
    Member #
    1063
    Add this to it for your work-around:

    document.body.style.background = "url(http://www.godwasme.com/img/background.gif)";

    NOTE: Tested IE6 only

    EDIT: made the code fit on one line
    - Brian

  10. #9
    Member a-drive's Avatar
    Join Date
    Mar 2003
    Posts
    94
    Member #
    809
    It works now, thanks skrlin.

  11. #10
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    I don't see how putting non-compliant CSS into DOM makes your page W3C compliant.

    I realize that it won't fail the W3C "compliance checker", but saying that you're now compliant wouldn't be 100% accurate, because the scrollbar color properties are not compliant at all - either in CSS or in DOM. The only reason they're not showing up as errors is because your JS file is attached.

    Either way, neither will impact your search-engine friendliness significantly.


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

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

Search tags for this page

how to put css in javascript

,

how to put css in js file

,

how to put css into javascript

Click on a term to search for related topics.
All times are GMT -6. The time now is 10:20 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com