error popup for fadeslideshow script

[drnen101]

script here for reference-http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

I've been using this script on a site of mine for a while now and im just now noticing that SOMEtimes i get a popup warning error. We cannot quite figure out what exactly is triggering it because it only happens when you navigate away from the page using the script sometimes. Sometimes it works fine.
The warning error is :
"Fade In Slideshow error: an error has occured somewhere in your code attached to the "onslide" event: TypeError: this. setting is null."

Ive done some editing to the script based on some specific changes in how i wanted it to work, but i got all those change suggestions from other threads in this forum.

The script is too long to paste, so ive uploaded it to:
http://darrenlasso.com/freelance/fadeslideshow.js

html call to script is:

<script type="text/javascript">
var mygallery=new fadeSlideShow({
wrapperid: "fillslot_01", //ID of blank DIV on page to house Slideshow
dimensions: [934, 426], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["HOMEPAGE_MAY5_web/1.jpg"],
["HOMEPAGE_MAY5_web/2.jpg"],
["HOMEPAGE_MAY5_web/3.jpg"],
["HOMEPAGE_MAY5_web/4.jpg"],
["HOMEPAGE_MAY5_web/5.jpg"],
["HOMEPAGE_MAY5_web/6.jpg" , "url of page", "_top"]
],
speeds: [5500, 600, 600, 600, 600, 600],
displaymode: {type:'auto', cycles:1, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 1200, //transition duration (milliseconds)
descreveal: "ondemand",
	onslide: function(c, i){
this.setting.displaymode.pause = this.setting.speeds[i];

			if(this.setting.currentstep === this.setting.totalsteps - 1){
				this.navigate(this.setting.imagearray.length - 1);
			}
		}
})
</script>
<script type="text/javascript">
$({}).imageLoader({
    images: ['HOMEPAGE_MAY5_web/0.jpg'],
    allcomplete:function(e,ui){
        //images are ready here
        $(document).ready(function(){
            //your code - site.fadeIn() or something like that
        });
    }
});

</script>

thanks for any insight into the problem!

[jscheuer1]

One could edit the fadeslideshow.js file around line #50 and comment out the alert (addition red):

		if (setting.$wrapperdiv.length==0){ //if no wrapper DIV found
			//alert("Error: DIV with ID \""+setting.wrapperid+"\" not found on page.")
			return
		}

More Detail:

That sounds like a situation where there's a common head section shared between two or more pages, or at least elements in the head that get pulled from a common file.

Most often this happens when one uses server side code like PHP or asp and includes, or requires are employed. Does the site where this happens do that? Does it use any server side code at all?

If so, removing:

<script type="text/javascript">
var mygallery=new fadeSlideShow({
wrapperid: "fillslot_01", //ID of blank DIV on page to house Slideshow
dimensions: [934, 426], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["HOMEPAGE_MAY5_web/1.jpg"],
["HOMEPAGE_MAY5_web/2.jpg"],
["HOMEPAGE_MAY5_web/3.jpg"],
["HOMEPAGE_MAY5_web/4.jpg"],
["HOMEPAGE_MAY5_web/5.jpg"],
["HOMEPAGE_MAY5_web/6.jpg" , "url of page", "_top"]
],
speeds: [5500, 600, 600, 600, 600, 600],
displaymode: {type:'auto', cycles:1, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 1200, //transition duration (milliseconds)
descreveal: "ondemand",
	onslide: function(c, i){
this.setting.displaymode.pause = this.setting.speeds[i];

			if(this.setting.currentstep === this.setting.totalsteps - 1){
				this.navigate(this.setting.imagearray.length - 1);
			}
		}
})
</script>

from those pages without the slideshow would also fix it. The first solution is all you probably need, but this second one is probably more efficient.

This bit:

<script type="text/javascript">
$({}).imageLoader({
    images: ['HOMEPAGE_MAY5_web/0.jpg'],
    allcomplete:function(e,ui){
        //images are ready here
        $(document).ready(function(){
            //your code - site.fadeIn() or something like that
        });
    }
});

</script>

Is not an official part of the script and will not fire properly (probably also throw a non-fatal error) on pages with fadeslideshow.js due to the fadeslideshow.js file invoking jQuery.noConflict().

If desired, that can be resolved, but it's a separate issue.

[drnen101]

hey thanks for the reply-
The page is inside the magento cms so that could be part of the reason its not working perfectly (there are multiple heads)
I commented out the first alert and also found another one that i think may be the specific alert in question:
//alert("Fade In Slideshow error: An error has occured somwhere in your code attached to the \"onslide\" event: "+e)

I THINK its working now but the randomness of the issue means it can pop up anytime.. ive just refreshed about 30x though and havent seen it yet.
fingers crossed
thanks again for the help!

D

[jscheuer1]

You're not using a custom onslide event, so you don't need to worry about that. Also there's probably an alert for the oninit event. You're not using that either, so no need to worry about that.

In fact, neither of those should be a problem even with a custom onslide or custom oninit as long as the one in my previous post is commented out.

[ikemarrus]

This is happening to me on another CMS (the occasional message that this.settings is null). There is only one page using the CMS template that includes the fadeshow and it also has the fadeshow div. I'd hate to modify the fadeslideshow.js script since upgrades will nullify my changes. Do you have any other suggestions? Can you explain in more detail why this is happening?

Thanks.

[jscheuer1]

If you are getting the alert:

Error: DIV with ID \""+setting.wrapperid+"\" not found on page.

Then the page the script is on does not have that div, or it hasn't been parsed yet. The latter is unlikely because the fadeslideshow script waits until the DOM is loaded before looking for that div. But if you're importing the div via AJAX, it might not be there yet. If that's the case, you need to make initialization of the slideshow proceed as a callback of the import of the div. And it's possible there could be another problem I'm not thinking of.

And If you're getting a different alert, it's some other problem.

In any case, there's no way I can think of to eliminate any of the script's alerts without either 1 or 2 below:

1. Making sure that the conditions that fire them never arise
   
   
2. Commenting them out in or removing them from the script

If it's firing at all, 1 isn't happening, so unless you can fix that, 2 will have to be done. And if 2 is done, you're right, updates will presumably have to be edited to prevent the problem returning.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.