PDA

View Full Version : switch content script - content appear in different DIV



nicker
07-02-2012, 10:48 PM
1) Script Title: switch content script

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

3) Describe problem: I just started using this script, and im extremely bad with js. I need my content to appear in different div. for example i have a div with a fixed width which appear at the center. and 2 div's inside of it. on the left is menu, on the right is content. i would like 'title' - <h3 id="bobcontent1-title" class="handcursor">What is JavaScript?</h3> to be in the menu div, and on click, content appear in the other div.
If i simply move 'content' <div id="bobcontent1" class="switchgroup1">aaa</div> to my content div, title becomes no longer a link, and content appears as a visible text in another div.. what's the solution for that?
Thanks a lot in advance..

vwphillips
07-03-2012, 10:39 AM
modified HTML


<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>

<div id="tst" ></div>

<script type="text/javascript">
// MAIN FUNCTION: new switchcontent("class name", "[optional_element_type_to_scan_for]") REQUIRED
// Call Instance.init() at the very end. 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('tst')
</script>


modified init function


switchcontent.prototype.init=function(id){
var instanceOf=this
this.collectElementbyClass(this.className) //Get all headers and its corresponding content based on shared class name of contents
if (this.headers.length==0) //If no headers are present (no contents to switch), just exit
return
//If admin has changed number of days to persist from current cookie records, reset persistence by deleting cookie
if (this.persistType=="days" && (parseInt(switchcontent.getCookie(this.className+"_dtrack"))!=this.persistDays))
switchcontent.setCookie(this.className+"_d", "", -1) //delete cookie
// Get ids of open contents below. Four possible scenerios:
// 1) Session only persistence is enabled AND corresponding cookie contains a non blank ("") string
// 2) Regular (in days) persistence is enabled AND corresponding cookie contains a non blank ("") string
// 3) If there are contents that should be enabled by default (even if persistence is enabled and this IS the first page load)
// 4) Default to no contents should be expanded on page load ("" value)
var opencontents_ids=(this.persistType=="session" && switchcontent.getCookie(this.className)!="")? ','+switchcontent.getCookie(this.className)+',' : (this.persistType=="days" && switchcontent.getCookie(this.className+"_d")!="")? ','+switchcontent.getCookie(this.className+"_d")+',' : (this.expandedindices)? ','+this.expandedindices+',' : ""
for (var innercontent,i=0; i<this.headers.length; i++){ //BEGIN FOR LOOP
if (typeof this.ajaxheaders["header"+i]!="undefined"){ //if this is an Ajax header
this.headers[i].ajaxstatus='waiting' //two possible statuses: "waiting" and "loaded"
this.headers[i].ajaxfile=this.ajaxheaders["header"+i]
}
innercontent=document.getElementById(this.headers[i].id.replace("-title", "")); //Reference content container for this header
if (innercontent&&document.getElementById(id)){
document.getElementById(id).appendChild(innercontent);
}
if (typeof this.statusOpen!="undefined") //If open/ closing HTML indicator is enabled/ set
this.headers[i].innerHTML='<span class="status"></span>'+this.headers[i].innerHTML //Add a span element to original HTML to store indicator
if (opencontents_ids.indexOf(','+i+',')!=-1){ //if index "i" exists within cookie string or default-enabled string (i=position of the content to expand)
this.expandcontent(this.headers[i]) //Expand each content per stored indices (if ""Collapse Previous" is set, only one content)
if (this.collapsePrev) //If "Collapse Previous" set
this.prevHeader=this.headers[i] //Indicate the expanded content's corresponding header as the last clicked on header (for logic purpose)
}
else {//else if no indices found in stored string
this.contractcontent(this.headers[i]) //Contract each content by default
}
this.headers[i].onclick=function(){instanceOf.toggledisplay(this)}
} //END FOR LOOP
switchcontent.dotask(window, function(){instanceOf.rememberpluscleanup()}, "unload") //Call persistence method onunload
}


simpler just change the HTML


<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>

<h3 id="bobcontent2-title" class="handcursor">Difference betwen Java & JavaScript?</h3>

<h3 id="bobcontent3-title" class="handcursor">What is DHTML?</h3>

<div id="tst" >
<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>
<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>
<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>

</div>

nicker
07-03-2012, 05:51 PM
Hello, thanks for the response.
I tried to change the code like you explained, I added 'tst' id for my content div, put all id="bobcontent1" div's inside, added 'tst' to "init" in the body script, changed the script as shown above.. but.. nothing had changed.. its still the same as it was before

nicker
07-07-2012, 04:22 AM
so could anyone help with the solution for this, please ? i still cant find out...

vwphillips
07-07-2012, 10:10 AM
please post a link to your page

nicker
07-07-2012, 03:52 PM
im trying to get it to work first.. I just need content to unfold in the different div, but it just doesnt work ..
i uploaded my sample here, so you can see: http://kupishmot.ru/help.html
thanks.. Nick.

vwphillips
07-08-2012, 09:04 AM
the amended HTML

<div style="width:1000px; margin-left:auto; margin-right:auto">

<div style="background-color:#FF0; width:300px; float:left">
<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>

<h3 id="bobcontent2-title" class="handcursor">Difference betwen Java & JavaScript?</h3>

<h3 id="bobcontent3-title" class="handcursor">What is DHTML?</h3>

</div>

<div style="background-color:#C6CC6C; width:700px; float:right" id="tst">
<b>WHATS UP?</b><br />

<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>
<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>
<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>

</div>


<script type="text/javascript">
// MAIN FUNCTION: new switchcontent("class name", "[optional_element_type_to_scan_for]") REQUIRED
// Call Instance.init() at the very end. 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('tst')
</script>
</div>