View Full Version : Placing external JavaScript with CSS?

10-23-2006, 02:24 PM
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?


10-23-2006, 02:32 PM
Is the script inside any element on your page?
If yes you could address it like this:

#element_name script {...}

Or with the adjacent sibling selector (not suitable for IE 6):

div + script {...}

10-25-2006, 08:53 PM
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?

Bill Posters
10-26-2006, 08:43 AM
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.


find >>


replace with >>

<script type="text/javascript" src="newexternal.js"><script>

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 (http://uk.php.net/include/).
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…

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.


.quote {
color: #f00;

10-26-2006, 06:16 PM
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.