View Full Version : Ultimate Fade In Slideshow in a css file

12-10-2013, 07:12 PM
1) Script Title: Ultimate Fade In Slideshow

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

3) Describe problem: Rather than have the script in each page of my website, how would I place it in my global css file.

12-10-2013, 07:55 PM
CSS and Javascript are different. You can't use Javascript inside CSS, so you cannot place Javascript in your CSS file.

You can, however, create one [or more] external CSS .css file and one [or more] external Javascript .js file. Then you can include each of these in every page on your website. There's no shortcut for that part. (One option would be to use some kind of templating or Content Management System [CMS] to generate your different pages for you including the CSS and JS, but this would require some time and knowledge to configure-- not a bad idea if you want to try it.)

Instructions for moving Javascript to an external file:
1. Create a <script...> tag that will include the relevant file.
2. Copy all text from betwee <script> tags on your page. Paste it into the external file. Order matters, so move it step by step, in the same order that the different <script> blocks appear in the page's source code.

A detail about this script (and some others):
This script requires <div> elements (and other code-- see the demo page) in the body of your page. You could include the Javascript but without this nothing would happen. Therefore, you must include that code in every page on your website. There is no way around that.*

[*Actually, there are two ways, but they're complicated: 1) use templating as I suggested above; 2) use Javascript to dynamically add these to each of your pages-- possible but complicated and might take a lot of work to get it to all run smoothly in the end. In short, you can't do that without significantly modifying the script. Plus, you'll need to add in the JS file anyway, so it's not much more work to cut and paste a few more lines.]