Featured content Slider code

[Carox]

1) Script Title:
Featured Content Slider v2.4
2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...tentslider.htm
3) Describe problem:

I need a simple code of a component which has two rows. In the first row, there is an textarea/empty space and in the second row, there are few tabs. when the user clicks on any tab, the content should be shown in the area of first row. I mean, the content of first row should be replaced.

This resembles the code of Featured Content Slider.

I have downloaded the code but could not understand few things:

1. On the call of "javascript:featuredcontentslider.jumpTo('slider1', 3)" " code, which function is called? I know HTML, DHTML, Javascript, css. I cannot understand the syntax of the above code. Is it a javascript code?

2. In the HTML page of the above code, "1","2","3" are written but in the code I cannot see it. There is no code like "<p>1</p>".

3. when is featuredcontentslider.init() called?

4. what are the possible attributes of featuredcontentslider.init()? I mean, how are they defined? From where the attributes came?

[jscheuer1]

I'm going to take these out of order because I think that will make more sense:

3. when is featuredcontentslider.init() called?

As instructed on the demo page in the code block of Step 2, excerpt:

<script type="text/javascript">

featuredcontentslider.init({
	id: "slider1",  //id of main slider DIV
	contentsource: ["inline", ""],  //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
	toc: "#increment",  //Valid values: "#increment", "markup", ["label1", "label2", etc]
	nextprev: ["Previous", "Next"],  //labels for "prev" and "next" links. Set to "" to hide.
	revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
	enablefade: [true, 0.2],  //[true/false, fadedegree]
	autorotate: [true, 3000],  //[true/false, pausetime]
	onChange: function(previndex, curindex){  //event handler fired whenever script changes slide
		//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
		//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
	}
})

</script>

Notice the highlighted.

1. On the call of "javascript:featuredcontentslider.jumpTo('slider1', 3)" " code, which function is called? I know HTML, DHTML, Javascript, css. I cannot understand the syntax of the above code. Is it a javascript code?

You mean:

<a href="javascript:featuredcontentslider.jumpTo('slider1', 3)">Go to 3rd slide within FCS with ID="slider1"</a>

Yes it's javascript. It tells slider1 to switch to 3rd tab. It could also be better written as:

<a href="#" onclick="featuredcontentslider.jumpTo('slider1', 3); return false;">Go to 3rd slide within FCS with ID="slider1"</a>

4. what are the possible attributes of featuredcontentslider.init()? I mean, how are they defined? From where the attributes came?

They are defined in the main script. You don't need to edit them there though because they are set in the init. These are explained in the section HTML and CSS Structure on the demo page.

2. In the HTML page of the above code, "1","2","3" are written but in the code I cannot see it. There is no code like "<p>1</p>".

See:

http://www.dynamicdrive.com/dynamici...suppliment.htm

[Carox]

Thanks John for the useful description.

Frankly speaking, I have studied Javascript through www.w3schools.com. I have never gone through the syntax of this line:
"javascript:featuredcontentslider.jumpTo('slider1', 3)"

Why "javascript" keyword is written?
what is featuredcontentslider? Is it a object? Where in the code it is made?
We have never called the method featuredcontentslider.init() method in the code like featuredcontentslider.jumpTo('slider1',3), so when is this method (init) called?
How is the featuredcontentslider.init({}) defined? Is this javascript?

[jscheuer1]

The:

javascript:whatever();

convention is probably not anywhere on w3schools because, although it usually works out fine, it can have problems, some severe, especially when used as the href value of a link or the action attribute of a form. These generally are browser specific, but depending upon the rest of your page can cause some nasty things to happen, or actually not to happen later once one of these links has been clicked or one of these forms submitted.

Yes, featuredcontentslider is an object. It's defined in the main script. The featuredcontentslider.init() and featuredcontentslider.jumpTo() are functions. This is a common way to write javascript. The advantage is that only one variable must be placed in the global scope (featuredcontentslider) all functions are properties of that object.

Here' where, in the main script that the init function is defined:

init:function(setting){
	var persistedpage=this.getCookie("fcspersist"+setting.id) || 1
	var urlselectedpage=this.urlparamselect(setting.id) //returns null or index from: mypage.htm?featuredcontentsliderid=index
	this.settingcaches[setting.id]=setting //cache "setting" object
	setting.contentdivs=[]
	setting.toclinks=[]
	setting.topzindex=0
	setting.currentpage=urlselectedpage || ((this.enablepersist)? persistedpage : 1)
	setting.prevpage=setting.currentpage
	setting.revealtype="on"+(setting.revealtype || "click")
	setting.curopacity=0
	setting.onChange=setting.onChange || function(){}
	if (setting.contentsource[0]=="inline")
		this.buildpaginate(setting)
	if (setting.contentsource[0]=="ajax")
		this.ajaxconnect(setting)
}