Web Analytics Made Easy -
StatCounter Modify Contractible Headers?? - CodingForum

Announcement

Collapse
No announcement yet.

Modify Contractible Headers??

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Modify Contractible Headers??

    Hello All,

    I've used this Contractible Headers script before, but have a question. I was wondering if this script could be modified to open to the right rather than down? Meaning there would be headers, except they would all open to the right of the headers block. If someone could take a look and offer some ideas i would appreciate it. Im not real oriented with java otherwise i would figure this out myself, lol. Thx in advance.

  • #2
    This is more of a CSS problem than a javascript problem but, as
    the original script had done, I did use javascript to document
    write the style changes I have made.

    Try this:
    Code:
    <!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
      "http://www.w3.org/TR/REC-html40/loose.dtd">
    <html lang="en-US">
      <head>
        <title>Your Page Title</title>
    <script type="text/javascript">
    
    /***********************************************
    * Contractible Headers script- © Dynamic Drive ([url]www.dynamicdrive.com[/url])
    * This notice must stay intact for legal use. Last updated Oct 21st, 2003.
    * Visit [url]http://www.dynamicdrive.com/[/url] for full source code
    * Stylesheet modified by: [email][email protected][/email] on February 24, 2004
    ***********************************************/
    
    var enablepersist="on" //Enable saving state of content structure using session cookies? (on/off)
    var collapseprevious="yes" //Collapse previously open content when opening present? (yes/no)
    
    if (document.getElementById){
        with(document){
        writeln('<style type="text/css">   ');
        writeln('<!--                      ');
        writeln('.content{                 ');
        writeln('     display: none;       ');
        writeln('     float: none;         ');
        writeln('     border: none;        ');
        writeln('     margin: none;        ');
        writeln('     font-size  : 20px;   ');
        writeln('     font-weight: 100;    ');
        writeln('     color : blue;        ');
        writeln('     background: #90ee90; ');
        writeln('     }                    ');
    
        writeln('.left{                    ');
        writeln('     float : left;        ');
        writeln('     border: none;        ');
        writeln('     margin: none;        ');
        writeln('     font-size  : 20px;   ');
        writeln('     font-weight: 900;    ');
        writeln('     color : red;         ');
        writeln('     cursor: hand;        ');
        writeln('     cursor: pointer;     ');
        writeln('     }');
    
        writeln('.right{                   ');
        writeln('     width: 100%;         ');
        writeln('     float: left;         ');
        writeln('     border: none;        ');
        writeln('     margin: none;        ');
        writeln('     line-height: 1px;    ');
        writeln('}                         ');
        writeln('-->                       ');
        writeln('</style>                  ');
      }
    }
    
    function getElementbyClass(classname){
    ccollect=new Array()
    var inc=0
    var alltags=document.all? document.all : document.getElementsByTagName("*")
    for (i=0; i<alltags.length; i++){
    if (alltags[i].className==classname)
    ccollect[inc++]=alltags[i]
    }
    }
    
    function contractcontent(omit){
    var inc=0
    while (ccollect[inc]){
    if (ccollect[inc].id!=omit)
    ccollect[inc].style.display="none"
    inc++
    }
    }
    
    function expandcontent(cid){
    if (typeof ccollect!="undefined"){
    if (collapseprevious=="yes")
    contractcontent(cid)
    document.getElementById(cid).style.display=(document.getElementById(cid).style.display!="block")? "block" : "none"
    }
    }
    
    function revivecontent(){
    contractcontent("omitnothing")
    selectedItem=getselectedItem()
    selectedComponents=selectedItem.split("|")
    for (i=0; i<selectedComponents.length-1; i++)
    document.getElementById(selectedComponents[i]).style.display="block"
    }
    
    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=="block")
    selectedItem+=ccollect[inc].id+"|"
    inc++
    }
    
    document.cookie=window.location.pathname+"="+selectedItem
    }
    
    function do_onload(){
    getElementbyClass("content")
    if (enablepersist=="on" && typeof ccollect!="undefined")
    revivecontent()
    }
    
    
    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>
    [color=blue]<div [/color][color=red]class="left"[/color][color=blue]>
    <a onClick="expandcontent('sc1')">What is JavaScript? </a></div>
    <div id="sc1" [/color][color=red]class="content"[/color][color=blue]> 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 [/color][color=red]class="right"[/color][color=blue]>&amp;nbsp;</div>[/color]
    
    <div class="left">
    <a onClick="expandcontent('sc2')">Difference betwen Java & JavaScript? </a></div>
    <div id="sc2" class="content"> Java is completely different from JavaScript-
    the former is a compiled language while the later is a
    scripting language.</div>
    <div class="right">&amp;nbsp;</div>
    
    <div class="left">
    <a onClick="expandcontent('sc3')">What is DHTML? </a></div>
    <div id="sc3" class="content"> 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 class="right">&amp;nbsp;</div>
    
    </body>
    </html>
    Note: Each content section has three classes. left, content and right.

    .....Willy

    Comment

    Working...
    X