css "like" javascript/jquery referencing???

[PsionicSin]

I'm very sure you're aware of having an external css file that gets referenced and called upon inside of the container file (html/htm/php)...

...but is there a way to externally reference javascript/jquery script inside of the container file as well?

Something like this flow? A middle man of sorts?



I ask because I have 18 individual pages and would HATE to have to go in and add/delete mass jscript coding when I could just edit one document (like css) and reference it across all of them.

[jscheuer1]

There is no @import method for javascript, but if by externally reference a css file you mean something like:

<link rel="stylesheet" href="mysite.css" type="text/css">

Yes. But it's a little different:

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

Unlike the link tag for css, the script tag requires a closing tag as shown. It cannot be a self closing tag as the link may be in XHTML.

There are two other major differences:

1. Relative paths in an external css file are relative to the css file. In an external javascript file they are relative to the page the script is used on. If an external script file is used by pages in more than one folder, it's best to use absolute paths in the external script file.
   
   
2. If a selector in an external css file is not found on a given page, it's simply ignored. Something like that can happen with an external javascript file too, but what often happens is that if the external script cannot find the markup it's expecting, there will be an error thrown, perhaps even a fatal (stops subsequent script processing) error.

Using jQuery minimizes this second issue because like css, jQuery's selectors ignore missing markup and gracefully do nothing. Even in scripts that don't, one can often add a little code to make them gracefully ignore missing content.

[PsionicSin]

Well the thing is that I'm using about 7 different .js files for various things on the site. So what I wanted to do was make a dummy file that references them all with all of my scripting in there, and then reference the dummy file inside of each html/php pages header section via a command to the likes of a php include/require.

But you can't reference a php file without a div call right? And you can't reference a non-content php file in the header section can you?

Like...in the head/er of my php container file, can I put a php include/required statement that links to an external html file with the .js references and script in there? And will that dynamically call it upon being run?

[jscheuer1]

Well, you could have an include with all of the external script tags on it. Or you could have a single script file with all of the code in it and just put one external script tag on all of your pages.

Either way, you would be subject to the conditions I've already described as far as paths and expected content.

I'm not sure what you mean by:

But you can't reference a php file without a div call right?

What's a div call? And what do you mean by reference?

But sure you can include a page with one or more external script tags on it in the head of each page. You don't need a div tag if that's what you mean. You just have to make sure all of the paths are correct. And for best results, use only what you need on the include. People often make their includes valid pages or partially valid pages. You should only put what you need on the include. Once it's included view the full page's source code in the browser, that's what should be a valid page.

One thing you would not want to do would be to have a script block:

<script type="text/javascript">
Tons of code here
</script>

with all of your code in that as an include. If you did, it would have to load each time a page that included it loaded.

[PsionicSin]

Ok I figured it out. I created an htm file and called all of my js files in there, as well as put all of my scripting in there also.

Then I just did a php require line on all of the pages, and it worked. The java/jqeury elements are working like magic.

I called the file jsref.htm, and placed it in the main js folder, and referenced from there. Yay!

[jscheuer1]

Unless it's short, you don't want to put scripting on the required page. It will have to be parsed by the browser each time any page that requires it is loaded.

To avoid that you can put the code in an external script and put its external script tag on the required page.

[PsionicSin]

This is all that's in the external htm file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<script type="text/javascript" src="./js/jquery-1.4.2.js"></script>

<script type="text/javascript" src="./js/jquery-1.4.2.min.js"></script>

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

<script type="text/javascript" src="./js/modernizr-1.5.js"></script>

<script type="text/javascript" src="./js/coin-slider.js"></script>

<script type="text/javascript" src="./js/coin-slider.min.js"></script>

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

/***********************************************
* Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

</script>


<script type="text/javascript">


ddaccordion.init({
	headerclass: "expandable", //Shared CSS class name of headers group that are expandable
	contentclass: "categoryitems", //Shared CSS class name of contents group
	revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
	mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
	collapseprev: true, //Collapse previous content (so only one open at any time)? true/false 
	defaultexpanded: [], //index of content(s) open by default [index1, index2, etc]. [] denotes no content
	onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
	animatedefault: false, //Should contents open by default be animated into view?
	persiststate: true, //persist state of opened contents within browser session?
	toggleclass: ["", "openheader"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
	togglehtml: ["prefix", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
	animatespeed: "200", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
	oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
		//do nothing
	},
	onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
		//do nothing
	}
})

jQuery(function($){ //on document.ready
	var $targets=$('h3.menuheader')
	$targets.mouseenter(function(){
		$(this).addClass('overheader')
	})
	$targets.mouseleave(function(){
		$(this).removeClass('overheader')
	})
})


</script>

<script type="text/javascript">
	$(document).ready(function() {
		$('#coin-slider').coinslider({ width: 770, height: 540, spw: 7, sph: 5, delay: 3000, sDelay: 30, opacity: 0.7, titleSpeed: 500, effect: 'rain', navigation: false, links : false, hoverPause: false });
	});
</script>

</head>

I don't think that's too much, but I could be wrong.

Do you mean for me to instead create a js file (ex jsref.js), and put all of this in there?

[jscheuer1]

I did say, "Unless it's short". That's no more than would be on an average page anyway. So it's OK. If you wanted to, you could put the script code (not the script tags) in an external script, that would represent some savings when loading each page.

[PsionicSin]

I'm sorry, but can you visually elaborate on what you're talking about?

While building this site I've had to give myself a ROUGH crash course in this, and I'm not at all 100% on the terms or references a lot of you guys make regarding this language. I'm also not aware of what is a bit or a lot of code.

And, while we're on it, I seem to be having MAJOR trouble with a jQuery plug-in that should be working...but it's not.

I've since edited the jsref page to include the jsFancy Transitions tool...

http://workshop.rs/projects/jqfancytransitions/

...while having the directorial content coded on the homegal.php page that's called via a php require from index.php...but it wasn't working at all. Nothing was displaying.

So I then housed all of the coding for this directing on the homegal.php page, and even placed it in the same directory of the images (in case I was pointing to the wrong places), yet it still refuses to show the images.

Here's the page:

http://rutholsonphoto.com/rutholson_...lder/index.php

[jscheuer1]

That's really two questions, and the second one is off topic. Let's try and deal with the first one:

I'm sorry, but can you visually elaborate on what you're talking about?

The short answer is no because what belongs in that file depends upon what's in the files it's being included in and where in those files it's being included, and upon the path(s) those files are in.

For example, if these files already have a DOCTYPE declaration, an opening html tag and a head section, then these do not belong in the include.

If these files are in various paths, the absolute paths to the scripts should be used in the include.

Browsers will often error correct for you (the markup of, never the paths to files). If you want the resulting pages to be standards compliant (or at least to avoid errors that some browsers might not error correct for you), you need to look at the code of the resulting pages. In them there should be only one each of certain tags. I'm sure you know about this, at least in regards to a normal page.

What you can do to check is to view the resulting page(s) in the browser and use it's 'view source' to see the source code that is being served.

You can also validate the resulting page(s) at the w3c.org validator:

http://validator.w3.org/

That much said, you can use the scripts as you have them as long as they work. As I said before though:

That's no more than would be on an average page anyway. So it's OK. If you wanted to, you could put the script code (not the script tags) in an external script, that would represent some savings when loading each page.

I can visually represent that part, get rid of the highlighted:

<script type="text/javascript" src="./js/jquery-1.4.2.js"></script>

<script type="text/javascript" src="./js/jquery-1.4.2.min.js"></script>

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

<script type="text/javascript" src="./js/modernizr-1.5.js"></script>

<script type="text/javascript" src="./js/coin-slider.js"></script>

<script type="text/javascript" src="./js/coin-slider.min.js"></script>

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

/***********************************************
* Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

</script>


<script type="text/javascript">


ddaccordion.init({
	headerclass: "expandable", //Shared CSS class name of headers group that are expandable
	contentclass: "categoryitems", //Shared CSS class name of contents group
	revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
	mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
	collapseprev: true, //Collapse previous content (so only one open at any time)? true/false 
	defaultexpanded: [], //index of content(s) open by default [index1, index2, etc]. [] denotes no content
	onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
	animatedefault: false, //Should contents open by default be animated into view?
	persiststate: true, //persist state of opened contents within browser session?
	toggleclass: ["", "openheader"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
	togglehtml: ["prefix", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
	animatespeed: "200", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
	oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
		//do nothing
	},
	onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
		//do nothing
	}
})

jQuery(function($){ //on document.ready
	var $targets=$('h3.menuheader')
	$targets.mouseenter(function(){
		$(this).addClass('overheader')
	})
	$targets.mouseleave(function(){
		$(this).removeClass('overheader')
	})
})


</script>

<script type="text/javascript">
	$(document).ready(function() {
		$('#coin-slider').coinslider({ width: 770, height: 540, spw: 7, sph: 5, delay: 3000, sDelay: 30, opacity: 0.7, titleSpeed: 500, effect: 'rain', navigation: false, links : false, hoverPause: false });
	});
</script>

The first because it's a duplicate of the script that follows it. The rest because of the reason I stated:

you don't want to put scripting on the required page. It will have to be parsed by the browser each time any page that requires it is loaded.

Now, of course you presumably still need that code. It could all go in an external file - say myscripts.js - put it in the js folder. The contents of myscripts.js would be (assuming it's all working the way you have it in your last post):

ddaccordion.init({
	headerclass: "expandable", //Shared CSS class name of headers group that are expandable
	contentclass: "categoryitems", //Shared CSS class name of contents group
	revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
	mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
	collapseprev: true, //Collapse previous content (so only one open at any time)? true/false 
	defaultexpanded: [], //index of content(s) open by default [index1, index2, etc]. [] denotes no content
	onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
	animatedefault: false, //Should contents open by default be animated into view?
	persiststate: true, //persist state of opened contents within browser session?
	toggleclass: ["", "openheader"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
	togglehtml: ["prefix", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
	animatespeed: "200", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
	oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
		//do nothing
	},
	onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
		//do nothing
	}
})

jQuery(function($){ //on document.ready
	var $targets=$('h3.menuheader')
	$targets.mouseenter(function(){
		$(this).addClass('overheader')
	})
	$targets.mouseleave(function(){
		$(this).removeClass('overheader')
	})
})
	$(document).ready(function() {
		$('#coin-slider').coinslider({ width: 770, height: 540, spw: 7, sph: 5, delay: 3000, sDelay: 30, opacity: 0.7, titleSpeed: 500, effect: 'rain', navigation: false, links : false, hoverPause: false });
	});

And then your include file could (assuming you don't need all those other tags for the DOCTYPE html and head) look like so:

<script type="text/javascript" src="./js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="./js/html5.js"></script>
<script type="text/javascript" src="./js/modernizr-1.5.js"></script>
<script type="text/javascript" src="./js/coin-slider.js"></script>
<script type="text/javascript" src="./js/coin-slider.min.js"></script>
<script type="text/javascript" src="./nav/js/ddaccordion.js">
/***********************************************
* Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/
</script>
<script type="text/javascript" src="./js/myscripts.js"></script>

But, as I say, you may need to use the absolute paths to these scripts if the pages that use them aren't all in the same folder. The bottom line on that is that the paths must be correct for all the pages that import this include.

As for your other question, I think it would be best if you opened a new thread for that.

However, it's always a good idea when installing a new script to at first try to get it working in a local mock up without using any includes.