PDA

View Full Version : Switch Content with multiple links



oz99
12-30-2007, 03:10 PM
Script: DD Switch Content Script

http://www.dynamicdrive.com/dynamicindex17/switchcontent.htm

First, a million thanks for your service.
Is it possible to have more than one link which expands the same individual div? I am trying to build an area with 10 tabs and 10 divs which all expand one at a time in the same location, but i need several additional links on page to expand the same same certain divs as well.

I dont know java well so if there is no quick fix, what i was thinking of doing was having the additional links to the divs reload the page, and on the reload I will rebuild HTML page with the script variables modified so that the proper div will be open when reload is complete. If this can work, which variable will I have to change on page reloads to ensure proper div is expanded?

I use a language which works a little like php but the language is not known by many.

Thanks.

ddadmin
12-30-2007, 11:10 PM
You can create arbitrary links on the page that expand/contract a particular header's content, yes. The syntax would look like:


<a href='javascript:joeexample.toggledisplay(document.getElementById("joecontent1-title"))'>Open/ Contract first header content</a>

Where "joeexample" is the name of the variable instance you used when initializing this script, and "joecontent1-title", the ID attribute of the header in which its content should be expanded/contracted. Using the original HTML you've cut and pasted, here's the addition of this link to see it in action:


<script type="text/javascript" src="switchcontent.js" >

/***********************************************
* Switch Content script- Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use. Last updated April 05th, 2007.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

<style type="text/css">

/*Style sheet used for demo. Remove if desired*/
.handcursor{
cursor:hand;
cursor:pointer;
}

</style>

<body>

<h2>Demo 1</h2>

<div><a href="javascript:bobexample.sweepToggle('contract')">Contract All</a> | <a href="javascript:bobexample.sweepToggle('expand')">Expand All</a></div>

<h3 id="bobcontent1-title" class="handcursor">What is JavaScript?</h3>
<div id="bobcontent1" class="switchgroup1">
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>

<h3 id="bobcontent2-title" class="handcursor">Difference betwen Java & JavaScript?</h3>
<div id="bobcontent2" class="switchgroup1">
Java is completely different from JavaScript.
The former is a compiled language while the later is a scripting language.
</div>

<h3 id="bobcontent3-title" class="handcursor">What is DHTML?</h3>
<div id="bobcontent3" class="switchgroup1">
DHTML is the embodiment of a combination of technologies- JavaScript, CSS, and HTML.
Through them a new level of interactivity is possible for the end user experience.
</div>



<script type="text/javascript">
// MAIN FUNCTION: new switchcontent("class name", "[optional_element_type_to_scan_for]") REQUIRED
//1) Instance.setStatus(openHTML, closedHTML)- Sets optional HTML to prefix the headers to indicate open/closed states
//2) Instance.setColor(openheaderColor, closedheaderColor)- Sets optional color of header when it's open/closed
//3) Instance.setPersist(true/false)- Enables or disabled session only persistence (recall contents' expand/contract states)
//4) Instance.collapsePrevious(true/false)- Sets whether previous content should be contracted when current one is expanded
//5) Instance.defaultExpanded(indices)- Sets contents that should be expanded by default (ie: 0, 1). Persistence feature overrides this setting!
//6) Instance.init() REQUIRED

var bobexample=new switchcontent("switchgroup1", "div") //Limit scanning of switch contents to just "div" elements
bobexample.setStatus('<img src="http://img242.imageshack.us/img242/5553/opencq8.png" /> ', '<img src="http://img167.imageshack.us/img167/7718/closedy2.png" /> ')
bobexample.setColor('darkred', 'black')
bobexample.setPersist(true)
bobexample.collapsePrevious(true) //Only one content open at any given time
bobexample.init()
</script>


<h2>Demo 2</h2>

<h3 id="joecontent1-title" class="handcursor">What is JavaScript?</h3>
<p id="joecontent1" class="switchgroup2">
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.
</p>

<h3 id="joecontent2-title" class="handcursor">Difference betwen Java & JavaScript?</h3>
<p id="joecontent2" class="switchgroup2">
Java is completely different from JavaScript- the former is a compiled language while the later is a scripting language.
</p>

<h3 id="joecontent3-title" class="handcursor">What is DHTML?</h3>
<p id="joecontent3" class="switchgroup2">
DHTML is the embodiment of a combination of technologies- JavaScript, CSS, and HTML. Through them a new level of interactivity is possible for the end user experience.
</p>



<script type="text/javascript">

var joeexample=new switchcontent("switchgroup2", "p") //Limit scanning of switch contents to just "p" elements
joeexample.setStatus('[open] ', '[closed] ')
joeexample.setColor('green', 'red')
joeexample.collapsePrevious(false) //Allow more than 1 content to be open simultanously
joeexample.setPersist(false)
joeexample.defaultExpanded(0,1)
joeexample.init()
</script>

<a href='javascript:joeexample.toggledisplay(document.getElementById("joecontent1-title"))'>Open/ Contract first header content</a>

oz99
12-31-2007, 02:29 AM
Thanks. Beautiful.
May you be healthy and wealthy!

oz99
01-02-2008, 03:32 AM
The link to divs you gave me works perfectly, but i have a related issue...

The page I am building is one which user reloads often as they browse.
Sometimes when page is reloaded, I need the div that is open on reload to be different from the div which was open right before page reload. On each reload, page is being rebuilt, and I was wondering if there was some kind of script or var renaming which I could add to page when it is rebuilt which would do a one time switch to the div I need open.

Same basic situation as original question except div needs to be changed as page is reloaded instead of a seperate link.

Thanks.

ddadmin
01-02-2008, 06:57 AM
Hi:
I'm not sure I understand, but if you're talking about how to specify particular contents be open by default when the page loads, the function:


instance.defaultExpanded(indices)

will do that (see docs on page).