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.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Jan 2006
    Posts
    243
    Thanks
    14
    Thanked 2 Times in 2 Posts

    Placing external JavaScript with CSS?

    Hi, I have a random quote script (only as cheesy as the quotes mind you) on my index page, but I want it to show at the bottom of every page. I could make it into a class and then place that class on the bottom of every page, but even though my site is still a modest size, I really don't feel like going through every single page, placing the class manually.

    I want to place the script somewhere at the bottom of my body. Can I meaby say this all in my css, without actually having to place a class everywhere?

    Thanks
    Last edited by Kirl; 10-23-2006 at 02:27 PM.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,480
    Thanks
    6
    Thanked 981 Times in 954 Posts
    Is the script inside any element on your page?
    If yes you could address it like this:
    Code:
    #element_name script {...}
    Or with the adjacent sibling selector (not suitable for IE 6):
    Code:
    div + script {...}

  • #3
    Regular Coder
    Join Date
    Jan 2006
    Posts
    243
    Thanks
    14
    Thanked 2 Times in 2 Posts
    Sorry for the late response.

    That was not what I meant. I have the script only on my index page now (the full script code itself), but I want to make this script into an external .js file and then use css to put it on the bottom of every page that is using this css file.

    Is this possible?
    Last edited by Kirl; 10-25-2006 at 08:58 PM.

  • #4
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    If you're using individual, self-contained documents, then you're going to need to add it to every document.
    Many text editors allow you to do batch find and replace actions on multiple files, either all open files or any files found within a certain folder.
    This could be used to automate the addition of the new script element.

    e.g.

    find >>
    Code:
    </head>
    replace with >>
    Code:
    <script type="text/javascript" src="newexternal.js"><script>
    </head>
    The work involved in manually altering many files is one reason why many developers use modular documents - documents made up of reusable bits of smaller component documents.
    For instance, a skeletal index page which uses 'includes' to bring in components such as the document head, the navigation menu, the footer.
    By breaking pages down into modules in this way, you gain the same benefits that you get with external css and external js - namely that you can alter one file (e.g. the menu) and have those changes reflected in every other document which uses that menu file.

    Like I say, you can use batch find and replace facility that is built into most code editors.
    However, for future reference, you might find it useful to start looking into using server-side languages such as PHP which give's you access to really useful things such as the include() function.
    This would allow you to build your site pages in a more modular way that makes maintainance and alterations far simpler to implement.

    +

    #element_name script {...} is actually an incorrect approach as the script element cannot be styled.
    You don't/can't actually position the script element itself with CSS. You position the markup that it outputs.

    e.g. If the script itself outputs something like this…
    Code:
    document.write('<p class="quote">Blah blah blah</p>');
    , then you'd style the div, not the script, but specifying a rule for that div id in the CSS.

    e.g.
    Code:
    .quote {
    	color: #f00;
    }

  • #5
    Regular Coder
    Join Date
    Jan 2006
    Posts
    243
    Thanks
    14
    Thanked 2 Times in 2 Posts
    Thank you for the elaborate answer, I'll guess I'll do a batch replace then. I was planning to look into php, seems interesting.


  •  

    Posting Permissions

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