Javascript As External File

[jill8026]

I have read every thread, I have looked at the Wiki and in the doc file...I completely understand HOW and WHAT to do to get my javascript slide show to be external, but it is not working?

The slideshow works fine (as you can see right now at http://www.munyak.info/hhf/) with the following script code inserted directly into the html_header.php file - but of course I would like to get it out of there to validate!.

<script type="text/javascript">
      
/***********************************************
* Ultimate Fade-In Slideshow (v1.51): © Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
 
var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["homeslide1.jpg", "", ""] //plain image syntax
fadeimages[1]=["homeslide2.jpg", "", ""] //image with link syntax
fadeimages[2]=["homeslide3.jpg", "", "_new"] //image with link and target syntax
 
 
var fadebgcolor="white"

////NO need to edit beyond here/////////////
 
var fadearray=new Array() //array to cache fadeshow instances
var fadeclear=new Array() //array to cache corresponding clearinterval pointers
 
var dom=(document.getElementById) //modern dom browsers
var iebrowser=document.all
 
function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){
this.pausecheck=pause
this.mouseovercheck=0
this.delay=delay
this.degree=10 //initial opacity degree (10%)
this.curimageindex=0
this.nextimageindex=1
fadearray[fadearray.length]=this
this.slideshowid=fadearray.length-1
this.canvasbase="canvas"+this.slideshowid
this.curcanvas=this.canvasbase+"_0"
if (typeof displayorder!="undefined")
theimages.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter) :)
this.theimages=theimages
this.imageborder=parseInt(borderwidth)
this.postimages=new Array() //preload images
for (p=0;p<theimages.length;p++){
this.postimages[p]=new Image()
this.postimages[p].src=theimages[p][0]
}
 
var fadewidth=fadewidth+this.imageborder*2
var fadeheight=fadeheight+this.imageborder*2
 
if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox)
document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div></div>')
else
document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>')
 
if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox
this.startit()
else{
this.curimageindex++
setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay)
}
}

function fadepic(obj){
if (obj.degree<100){
obj.degree+=10
if (obj.tempobj.filters&&obj.tempobj.filters[0]){
if (typeof obj.tempobj.filters[0].opacity=="number") //if IE6+
obj.tempobj.filters[0].opacity=obj.degree
else //else if IE5.5-
obj.tempobj.style.filter="alpha(opacity="+obj.degree+")"
}
else if (obj.tempobj.style.MozOpacity)
obj.tempobj.style.MozOpacity=obj.degree/101
else if (obj.tempobj.style.KhtmlOpacity)
obj.tempobj.style.KhtmlOpacity=obj.degree/100
else if (obj.tempobj.style.opacity&&!obj.tempobj.filters)
obj.tempobj.style.opacity=obj.degree/101
}
else{
clearInterval(fadeclear[obj.slideshowid])
obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" : obj.canvasbase+"_1"
obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas)
obj.populateslide(obj.tempobj, obj.nextimageindex)
obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)? obj.nextimageindex+1 : 0
setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.delay)
}
}
 
fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}
 
 
fadeshow.prototype.rotateimage=function(){
if (this.pausecheck==1) //if pause onMouseover enabled, cache object
var cacheobj=this
if (this.mouseovercheck==1)
setTimeout(function(){cacheobj.rotateimage()}, 100)
else if (iebrowser&&dom||dom){
this.resetit()
var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
crossobj.style.zIndex++
fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)
this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0"
}
else{
var ns4imgobj=document.images['defaultslide'+this.slideshowid]
ns4imgobj.src=this.postimages[this.curimageindex].src
}
this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0
}
 
fadeshow.prototype.resetit=function(){
this.degree=10
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
if (crossobj.filters&&crossobj.filters[0]){
if (typeof crossobj.filters[0].opacity=="number") //if IE6+
crossobj.filters(0).opacity=this.degree
else //else if IE5.5-
crossobj.style.filter="alpha(opacity="+this.degree+")"
}
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=this.degree/101
else if (crossobj.style.KhtmlOpacity)
crossobj.style.KhtmlOpacity=this.degree/100
else if (crossobj.style.opacity&&!crossobj.filters)
crossobj.style.opacity=this.degree/101
}
 
 
fadeshow.prototype.startit=function(){
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
this.populateslide(crossobj, this.curimageindex)
if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
var cacheobj=this
var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid)
crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
}
this.rotateimage()
}

</script> 

I have taken this code, removed <script> and </script> created a file called jscript_slider.js and uploaded
to every possible folder..including includes/templates/hobbyhill/jscript and also in includes/modules/pages/index

Neither works...it just does nothing....here is what i have in my define main page as well:

<div id="slider">

<script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)

new fadeshow(fadeimages, 600, 341, 0, 3000, 1, "R")



 

</script>

</div> 

Obviously this is clearly user error.....but I am following the instructions and its not working...can any see anything I am doing wrong or something in my code that is not cutting it?!?!?!?

Thanks so much!!!

[kuroi]

There are several different ways of loading javascript depending upon when and how widely you want it to be available. You've tried several of them! And so far as I can see they're all working, since I see the same javascript on the site three times.

However, the two occasions where the javascript is loaded as an external file, the file itself looks corrupt, which would give the impression that it wasn't working.

[jill8026]

Thanks Kuroi...how can you tell the file is corrupted though? I do not see an problems with it in Dreamweaver or Wordpad?!

[kuroi]

If you look at the file in a browser there appears to be a pile of metadata that Dreamweaver and Wordpad might be filtering out.

Are you looking at it through Dreamweavers WYSIWYG viewer or the source code view?

[jill8026]

WOW, I see the problem....I just uploaded a new file to the moduls/pages directory...so I will take a peak at that...

But I have been looking at the source code in dreamweaver and it wasnt showing any of that...

Going to check the new upload....slideshow is still not showing though...I removed all other instances of that file so it is only in one directory now...

[kuroi]

Your validation issue appears to happen because some of the site content has somehow ended up beyond your closing body tag, rather than due to this javascript.

[jill8026]

I know about that part...I am fixing that too..but the slideshow when it was included in the home page file gave me another 90 or so errors....when I remove it it gives me what you see now...the few things that are left I will fix after I get this working....

I cleaned up the .js file...have it in the

http://www.munyak.info/hhf/includes/...ript_slider.js

directory.....so now i have a white box on the home page...but still no slideshow....what else am I missing??!?!?!

[kuroi]

The version you have up now is loading correctly, and will display in a browser, but won't work. Somehow it is encoded as UTF-16 Little Endian. I wonder if the earlier issue was an encoding one too. This may be happening during the file transfer, but I'm afraid I'm not big on encoding issues and what triggers them.

[jill8026]

Kuroi...thank you....at least that gives me a direction to look into the rest....seems like these "weird things" only happen to me....finally got the whole site validated...just need to fix this then I can finish the rest....uuggh

[jill8026]

Yes and these weird things happen because I forget silly things! Forgot to put in the proper image name when I recopied the code...all is now good! I never thought to go direct to the file in the browser to look for problems...s o thank you for that tip!!!!!!

Once again you are my hero!!!!!