PDA

View Full Version : Resolved Switch Content Script II open/close images



t3od0r
12-06-2009, 08:55 PM
1) Script Title: Switch Content Script II (icon based)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/switchcontent2.htm

3) Describe problem:
i want to use different open/close images. for example if i have a group with 3 divs i want to set different open/close images to each div.
Div 1 have minus1.gif - plus1.gif
Div 2 have minus2.gif - plus2.gif
Div 3 have minus3.gif - plus3.gif

Thanks for any help

jscheuer1
12-06-2009, 10:20 PM
Use this instead of the switchicon.js from the demo page:


// -------------------------------------------------------------------
// Switch Content Script II (icon based)- By Dynamic Drive, available at: http://www.dynamicdrive.com
// April 8th, 07: Requires switchcontent.js!
// March 27th, 08': Added ability for certain headers to get its contents remotely from an external file via Ajax (2 variables within switchcontent.js to customize)
// -------------------------------------------------------------------

function switchicon(className, filtertag){
switchcontent.call(this, className, filtertag) //inherit primary properties from switchcontent class
}

switchicon.prototype=new switchcontent //inherit methods from switchcontent class with its properties initialized already
switchicon.prototype.constructor=switchicon

switchicon.prototype.setStatus=null
switchicon.prototype.setColor=null

switchicon.prototype.setHeader=function(openHTML, closeHTML){ //PUBLIC
this.openHTML=openHTML
this.closeHTML=closeHTML
}

//PRIVATE: Contracts a content based on its corresponding header entered

switchicon.prototype.contractcontent=function(header){
var innercontent=document.getElementById(header.id.replace("-title", "")) //Reference content for this header
innercontent.style.display="none"
header.innerHTML=typeof this.closeHTML === 'object'? this.closeHTML[innercontent.id] : this.closeHTML;
header=null
}


//PRIVATE: Expands a content based on its corresponding header entered

switchicon.prototype.expandcontent=function(header){
var innercontent=document.getElementById(header.id.replace("-title", ""))
if (header.ajaxstatus=="waiting"){//if this is an Ajax header AND remote content hasn't already been fetched
switchcontent.connect(header.ajaxfile, header)
}
innercontent.style.display="block"
header.innerHTML=typeof this.openHTML === 'object'? this.openHTML[innercontent.id] : this.openHTML;
header=null
}

Now you can continue to use the script just as explained on the demo page if you like. But there is now an option to create the multiple images like you want. So let's say you want to do this for the first demo, the one that's initialized like this:


var faq=new switchicon("icongroup1", "div") //Limit scanning of switch contents to just "div" elements
faq.setHeader('<img src="minus.gif" />', '<img src="plus.gif" />') //set icon HTML
faq.collapsePrevious(true) //Allow only 1 content open at any time
faq.setPersist(false) //No persistence enabled
faq.defaultExpanded(0) //Set 1st content to be expanded by default
faq.init()

Notice the highlighted line. We can leave it like it is, and it will work just like before. But if we change it to:


faq.setHeader({faq1: '<img src="minus1.gif" />', faq2: '<img src="minus2.gif" />', faq3: '<img src="minus3.gif" />'},
{faq1: '<img src="plus1.gif" />', faq2: '<img src="plus2.gif" />', faq3: '<img src="plus3.gif" />'}) //set icon HTML

You will get your 6 different images. I think you can see what is happening, if not right away, after looking at it a bit. Technically speaking we have created 2 objects to take the place of the two strings that represented the two images. The first object:


{faq1: '<img src="minus1.gif" />', faq2: '<img src="minus2.gif" />', faq3: '<img src="minus3.gif" />'}

Holds HTML for the three different closed images. The faq1: faq2: faq3: are the keys that tell the script which image goes with which section. For instance, the:


faq1: '<img src="minus1.gif" />'

says that the minus1.gif goes with this section because its key is the same as the id:


<div class="eg-bar"><span id="faq1-title" class="iconspan"><img src="minus1.gif" /></span>What is JavaScript?</div>
<div id="faq1" class="icongroup1">
JavaScript is a scripting language originally developed by Netscape to add interactivity and power to web documents. It is purely client side, and runs completely on the client's browser and computer.
</div>

You will want to change the hard coded image there to the minus1.gif as shown. Do the same with the others, using the minus2 and minus3 images, and you're just about all set.

The second object:


{faq1: '<img src="plus1.gif" />', faq2: '<img src="plus2.gif" />', faq3: '<img src="plus3.gif" />'}

works the same way, just for the opening images. In this case though this is all that is needed, no changes to the title span images are required like there was with the close images.

That's it! Any questions, feel free to ask.

t3od0r
12-07-2009, 10:01 AM
thanks a lot, is working