Featured Content Glider - Autorotateconfig stuck at "2"?

**Sovereign** · 03-08-2009, 09:26 AM

1) Script Title: Featured Content Glider

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...tentglider.htm

3) Describe problem:

Setting the cycles here

Code:

autorotateconfig: [2000, 3]

isn't working for me. It always stops at 2. Any suggestions?

Thanks!

**jscheuer1** · 03-08-2009, 01:23 PM

Clear your cache. If that doesn't fix it and you want more help:

Please post a link to the page on your site that contains the problematic code so we can check it out.

**Sovereign** · 03-08-2009, 06:06 PM

I don't have the site uploaded anywhere, as this is a local project (on the PC only).

HERE IS INDEX.HTML

Code:

<div id="splash">

		<div class="splashContent">
		<img src="images/splash/meet-solution.gif" width="660" height="200" alt="Meet Your Personalized Solution" />
		</div>

		<div class="splashContent">
		<img src="images/splash/disaster-recovery.gif" width="660" height="200" alt="Nothing We Can't Help Recover" />
		</div>

		<div class="splashContent">
		<img src="images/splash/meet-solution1.gif" width="660" height="200" alt="Meet Your Personalized Solution" />
		</div>
				
		<div class="splashContent">
		<img src="images/splash/disaster-recovery2.gif" width="660" height="200" alt="Nothing We Can't Help Recover" />
		</div>
				
</div>
			
<div id="splashPages">
		<a href="#" class="prev">&laquo;</a>
			<a href="#" class="toc">1</a>
			<a href="#" class="toc">2</a>
			<a href="#" class="toc">3</a>
			<a href="#" class="toc">4</a>
		<a href="#" class="next">&raquo;</a>
</div>

HERE IS THE CSS

Code:

#splash {
	position: relative;
	width: 660px;
	height: 200px;
	overflow: hidden;
	}
	
#splash .splashContent {
	position: absolute;
	visibility: hidden;
	width: 660px;
}

#splashPages {
	font-family: 'Trebuchet MS', Arial, sans-serif;
	margin: 3px 20px 0px 0px;
	padding: 0px 0px 3px 0px;
	text-align: right;
	}
	
#splashPages  a {
	background-color: transparent;
	color: #000;
	font-size: .9em;
	outline: none;
	padding: 1px 5px 1px 5px;
	text-decoration: none;
	}
	
#splashPages  a.selected {
	background-color: #eee;
	color: #bb2d12;
	font-weight: bold;
	}
	
#splashPages  a:hover {
	background-color: #bb2d12;
	color: #fff;
	}

HERE ARE THE TWO SCRIPTS

ONE

Code:

featuredcontentglider.init({
		gliderid: "splash",
		contentclass: "splashContent",
		togglerid: "splashPages",
		remotecontent: "",
		selected: 0,
		persiststate: false,
		speed: 500,
		direction: "rightleft"
		autorotate: true,
		autorotateconfig: [2000, 4]
})

TWO

http://www.dynamicdrive.com/dynamici...ntentglider.js
(This script is unmodified).

---

I'm using jquery-1.3.2.min.js

Also, this is not the entire index.html... just the Featured Content Glider part. I do have a DOCTYPE (Strict) and all the necessary information for it to validate @ W3C.

Thanks!

**Sovereign** · 03-08-2009, 06:16 PM

I know I've had jquery incompatibility issues before, so to isolate that, I used the jquery (1.2.2) provided with the script... and it works using that. I guess my next question is, what do I need to change to make it work with 1.3.2?

Thanks!

**jscheuer1** · 03-08-2009, 07:55 PM

Apparently 1.3 and up are more consistent in executing bound events. So it actually cancels the autorotate just like a live click would. To get around that, change the autorotate function in featuredcontentglider.js to (change highlighted):

Code:

	autorotate:function(config){
		var rotatespeed=config.speed+config.autorotateconfig[0]
		window[config.togglerid+"timer"]=setInterval(function(){
			if (config.totalsteps>0 && config.stepcount>=config.totalsteps){
				clearInterval(window[config.togglerid+"timer"])
			}
			else{
				featuredcontentglider.glide(config, config.$next.attr('loadpage'));
				config.stepcount++
			}
		}, rotatespeed)
	},

This should be compatible with jQuery 1.2.2 (perhaps earlier) and up, including 1.3.2.