Results 1 to 6 of 6

Thread: Query on "Switch Content Script II"

  1. #1
    Join Date
    Apr 2006
    Location
    Australia
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Query on "Switch Content Script II"

    Script: Switch Content Script II
    http://www.dynamicdrive.com/dynamici...chcontent2.htm

    I tried to use the above script to create a table as follows:
    http://testing.freeownhost.com/testing2.htm

    May I know how I should modify the script so that when I click on the "minus" sign or "contract all", B under Project 1 and D and E under Project 2 can be hidden as well.

    I would appreciate if someone could help.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
    <html>
    <head>
    <title>Projects</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <base href="http://testing.freeownhost.com/" />
    <style type="text/css">
    
    .showstate{ /*Definition for state toggling image */
    cursor:hand;
    cursor:pointer;
    float: right;
    margin-top: 2px;
    margin-right: 3px;
    }
    
    .headers{
    width: 400px;
    font-size: 120%;
    font-weight: bold;
    border: 1px solid black;
    background-color: lightyellow;
    }
    
    .switchcontent{
    width: 400px;
    border-top-width: 0;
    }
    
    td {
    empty-cells: hide;
    }
    
    .inset, .inset table {
    border:none;
    }
    
    </style>
    
    <script type="text/javascript">
    
    /***********************************************
    * Switch Content script II- c Dynamic Drive (www.dynamicdrive.com)
    * This notice must stay intact for legal use. Last updated April 2nd, 2005.
    * Visit http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    
    var enablepersist="on" //Enable saving state of content structure using session cookies? (on/off)
    var memoryduration="7" //persistence in # of days
    
    var contractsymbol='minus.gif' //Path to image to represent contract state.
    var expandsymbol='plus.gif' //Path to image to represent expand state.
    
    /////No need to edit beyond here //////////////////////////
    
    function getElementbyClass(rootobj, classname){
    var temparray=new Array()
    var inc=0
    var rootlength=rootobj.length
    for (i=0; i<rootlength; i++){
    if (rootobj[i].className==classname)
    temparray[inc++]=rootobj[i]
    }
    return temparray
    }
    
    function sweeptoggle(ec){
    var inc=0
    while (ccollect[inc]){
    ccollect[inc].style.display=(ec=="contract")? "none" : ""
    inc++
    }
    revivestatus()
    }
    
    
    function expandcontent(curobj, cid){
    if (ccollect.length>0){
    document.getElementById(cid).style.display=(document.getElementById(cid).style.display!="none")? "none" : ""
    curobj.src=(document.getElementById(cid).style.display=="none")? expandsymbol : contractsymbol
    }
    }
    
    function revivecontent(){
    selectedItem=getselectedItem()
    selectedComponents=selectedItem.split("|")
    for (i=0; i<selectedComponents.length-1; i++)
    document.getElementById(selectedComponents[i]).style.display="none"
    }
    
    function revivestatus(){
    var inc=0
    while (statecollect[inc]){
    if (ccollect[inc].style.display=="none")
    statecollect[inc].src=expandsymbol
    else
    statecollect[inc].src=contractsymbol
    inc++
    }
    }
    
    function get_cookie(Name) { 
    var search = Name + "="
    var returnvalue = "";
    if (document.cookie.length > 0) {
    offset = document.cookie.indexOf(search)
    if (offset != -1) { 
    offset += search.length
    end = document.cookie.indexOf(";", offset);
    if (end == -1) end = document.cookie.length;
    returnvalue=unescape(document.cookie.substring(offset, end))
    }
    }
    return returnvalue;
    }
    
    function getselectedItem(){
    if (get_cookie(window.location.pathname) != ""){
    selectedItem=get_cookie(window.location.pathname)
    return selectedItem
    }
    else
    return ""
    }
    
    function saveswitchstate(){
    var inc=0, selectedItem=""
    while (ccollect[inc]){
    if (ccollect[inc].style.display=="none")
    selectedItem+=ccollect[inc].id+"|"
    inc++
    }
    if (get_cookie(window.location.pathname)!=selectedItem){ //only update cookie if current states differ from cookie's
    var expireDate = new Date()
    expireDate.setDate(expireDate.getDate()+parseInt(memoryduration))
    document.cookie = window.location.pathname+"="+selectedItem+";path=/;expires=" + expireDate.toGMTString()
    }
    }
    
    function do_onload(){
    uniqueidn=window.location.pathname+"firsttimeload"
    var alltags=document.all? document.all : document.getElementsByTagName("*")
    ccollect=getElementbyClass(alltags, "switchcontent")
    statecollect=getElementbyClass(alltags, "showstate")
    if (enablepersist=="on" && get_cookie(window.location.pathname)!="" && ccollect.length>0)
    revivecontent()
    if (ccollect.length>0 && statecollect.length>0)
    revivestatus()
    }
    
    if (window.addEventListener)
    window.addEventListener("load", do_onload, false)
    else if (window.attachEvent)
    window.attachEvent("onload", do_onload)
    else if (document.getElementById)
    window.onload=do_onload
    
    if (enablepersist=="on" && document.getElementById)
    window.onunload=saveswitchstate
    
    </script>
    </head>
    <body> 
    <!--Optional Expand/ Contact All links. Remove if desired-->
    <div style="margin-bottom: 5px;text-align:center;"><a href="javascript:sweeptoggle('contract')">Contract All</a> | <a href="javascript:sweeptoggle('expand')">Expand All</a></div>
    
    <table align="center" border="3" cellspacing="5" cellpadding="5">
    
    <tr><td>01</td><td>2002</td><td class="headers"><img src="minus.gif" class="showstate" onClick="expandcontent(this, 'sc1')" />Project 1</td></tr>
      <tr><td></td><td></td><td class="inset">
    <table id="sc1" class="switchcontent" border="3" cellspacing="5" cellpadding="5">
    
    <tr><td><a href=>A</a></td></tr>
    
    <tr><td><a href=>B</a></td></tr></table></td></tr>
    
    <tr><td>02</td><td>2003</td><td class="headers"><img src="minus.gif" class="showstate" onClick="expandcontent(this, 'sc2')" />Project 2</td></tr>
    
     <tr><td></td><td></td><td class="inset">
    <table id="sc2" class="switchcontent" border="3" cellspacing="5" cellpadding="5">
    
    <tr><td><a href=>C</a></td></tr>
    
    <tr><td><a href=>D</a></td></tr>
    <tr><td><a href=>E</a></td></tr></table></td></tr>
    
    </table>
    </body>
    </html>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Apr 2006
    Location
    Australia
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Dear Professor Jscheuer1,
    Thank you so much for your kind assistance. You are excellent!

  4. #4
    Join Date
    Apr 2006
    Location
    Australia
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Sorry to query again.

    http://testing.freeownhost.com/Project2.htm

    To make the page neater, may I know if it is possible to reduce the cell spacing between the rows for the PROJECT table to be the same as that of the analysis table on top?

    Thanks once again.

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    I would think so. That really is a simple matter, up to you. You can play with the values for cellpadding and cellspacing all you like - to see what you like. If you notice, I was just using the values you had established.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Apr 2006
    Location
    Australia
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks a million

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •