Results 1 to 2 of 2

Thread: reading JS from a file with CSS

  1. #1
    Join Date
    Jun 2006
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default reading JS from a file with CSS

    Hi, I would liek to pull a js that I found on this forum from a file
    <script type="text/javascript" src="js/dropmenu3.js"></script>
    However, this script that I found on teh net has a CSS before the actual script starts. Now, can i just save the entire code in a .js file or does the <style> part have to be outside. If it's outside the file, how does the file refer to the CSS.

    <style type="text/css">
    #dropmenudiv{position:absolute;
    border:1px #5559FB;
    border-bottom-width: 0;
    font:normal 12px Verdana;
    line-height:18px;
    z-index:100;
    }
    #dropmenudiv a{
    width: 100%;
    display: block;
    text-indent: 20px;
    border-bottom: 1px solid black;
    padding: 1px 0;
    text-decoration: none;
    font-weight: bold;
    color: white;
    }
    #dropmenudiv a:hover{ /*hover background color*/
    background-color: #8080FF;
    }
    </style>

    <script type="text/javascript">
    //Contents for menu 1
    var menu1=new Array()
    menu1[0]='<a href="blah.php">- blah</a>'
    menu1[1]='<a href="blah2.php">- blah2</a>'
    ...
    </script>

    Thanks for help
    B

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    As long as the style is on or associated with the page, the script will use it. You could make the style external, not by putting it in the external script file but, by making it an external stylesheet. Save this to a file, call it dropmenu3.css:

    Code:
    #dropmenudiv {
    position:absolute;
    border:1px #5559FB;
    border-bottom-width: 0;
    font:normal 12px Verdana;
    line-height:18px;
    z-index:100;
    }
    #dropmenudiv a {
    width: 100%;
    display: block;
    text-indent: 20px;
    border-bottom: 1px solid black;
    padding: 1px 0;
    text-decoration: none;
    font-weight: bold;
    color: white;
    }
    #dropmenudiv a:hover { /*hover background color*/
    background-color: #8080FF;
    }
    Then use like so:

    HTML Code:
    <link rel="stylesheet" type="text/css" href="dropmenu3.css">
    <script type="text/javascript" src="js/dropmenu3.js"></script>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

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