Results 1 to 6 of 6

Thread: Contractible Headers Script Help

  1. #1
    Join Date
    Jan 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Contractible Headers Script Help

    Hi there... This is my first javascript so I need a little help with these expandable menus. My test site works fine in Netscape, Safari, and Firefox, but for some reason will not work right in Internet Explorer. I'm wondering if there is a quick fix or something I just don't see. Here is the tutorial and code I used... http://dynamicdrive.com/dynamicindex1/navigate2.htm
    And here is my test site on the server... http://www.dawsonsrejects.com/test/bradbenefield

    I have to do this in two parts, it won't let me add the entire page so I am just putting in the code I got from dynamicdrive and then the code I did to actually do the menus. If you need the entire site please let me know.

    Thank you so much in advance.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <script type="text/javascript">

    /***********************************************
    * Contractible Headers script- © Dynamic Drive (www.dynamicdrive.com)
    * This notice must stay intact for legal use. Last updated Mar 23rd, 2004.
    * Visit http://www.dynamicdrive.com/ for full source code
    ***********************************************/

    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){
    document.write('<style type="text/css">')
    document.write('.switchcontent{display:none;}')
    document.write('</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(){
    uniqueidn=window.location.pathname+"firsttimeload"
    getElementbyClass("switchcontent")
    if (enablepersist=="on" && typeof ccollect!="undefined"){
    document.cookie=(get_cookie(uniqueidn)=="")? uniqueidn+"=1" : uniqueidn+"=0"
    firsttimeload=(get_cookie(uniqueidn)==1)? 1 : 0 //check if this is 1st page load
    if (!firsttimeload)
    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>

  2. #2
    Join Date
    Jan 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    And here is some of my coding inside the page....


    Code:
      <th width="250" scope="col"><table width="250" height="100%" border="0" align="left" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
                  <tr>
                    <th align="left" valign="top" scope="col">
    				<h onClick="expandcontent('video')" style="cursor:hand; cursor:pointer"><img src="images/video.gif" width="250" height="25"></h>
    <div id="video" class="switchcontent">
                          <a href="javascript:;" onClick="MM_openBrWindow('video/kansasvideo.mov','','status=yes,resizable=yes,width=480,height=390')" onMouseOver="MM_swapImage('kansas','','images/kansas2.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/kansas1.gif" name="kansas" width="250" height="18" border="0" id="Image1"></a>
    				  </div>
    
    <h onClick="expandcontent('photo')" style="cursor:hand; cursor:pointer"><img src="images/photography.gif" width="250" height="25"></h>
    <div id="photo" class="switchcontent">
    						<a href="javascript:;" onClick="MM_openBrWindow('photography/okburning/index.htm','','status=yes,resizable=yes')" onMouseOver="MM_swapImage('burning','','images/okcburning2.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/okcburning1.gif" name="burning" width="250" height="18" border="0" id="Image1"></a>
    				      <a href="javascript:;" 
    				  </div>
    
    <h onClick="expandcontent('web')" style="cursor:hand; cursor:pointer"><img src="images/webdesign.gif" width="250" height="25"></h>
    <div id="web" class="switchcontent">
                    <a href="javascript:;" onClick="MM_openBrWindow('http://band.dawsonsrejects.com','','toolbar=yes,location=yes,status=yes,menubar=yes,scrollbars=yes,resizable=yes')" onMouseOver="MM_swapImage('dawsons','','images/dawsons2.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/dawsons1.gif" name="dawsons" width="250" height="18" border="0"></a>
                  </div>
    				
    <h onClick="expandcontent('print')" style="cursor:hand; cursor:pointer"><img src="images/print.gif" width="250" height="25"></h>
    <div id="print" class="switchcontent">
    			  <a href="javascript:;" onClick="MM_openBrWindow('print/saltnovembercover.jpg','','status=yes,scrollbars=yes,resizable=yes,width=475,height=625')" onMouseOver="MM_swapImage('nov','','images/saltnov2.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/saltnov1.gif" name="nov" width="250" height="18" border="0" id="nov"></a>
                  <a href="javascript:;" onClick="MM_openBrWindow('print/saltjanuarycover.jpg','','status=yes,scrollbars=yes,resizable=yes,width=475,height=625')" onMouseOver="MM_swapImage('jan','','images/saltjan2.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/saltjan1.gif" name="jan" width="250" height="18" border="0" id="jan"></a>
    			  </div>
    
                  <img src="images/illustrations.gif" width="250" height="25">
    
    
    <h onClick="expandcontent('digital')" style="cursor:hand; cursor:pointer"><img src="images/digital.gif" width="250" height="18"></h>
    <div id="digital" class="switchcontent">
                  <a href="javascript:;" onClick="MM_openBrWindow('digital/dawsons.jpg','','status=yes,width=415,height=625')" onMouseOver="MM_swapImage('showposter','','images/showposter2.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/showposter1.gif" name="showposter" width="250" height="18" border="0"></a>
                  </div>
    
    <h onClick="expandcontent('airbrush')" style="cursor:hand; cursor:pointer"><img src="images/airbrush.gif" width="250" height="18"></h>
    <div id="airbrush" class="switchcontent">
                  <a href="javascript:;" onClick="MM_openBrWindow('airbrush/homer.jpg','','status=yes,width=400,height=625')" onMouseOver="MM_swapImage('homer','','images/homer2.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/homer1.gif" name="homer" width="250" height="18" border="0"></a>
                  <a href="javascript:;" onClick="MM_openBrWindow('airbrush/deco.jpg','','status=yes,width=625,height=375')" onMouseOver="MM_swapImage('decoman','','images/decoman2.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/decoman1.gif" name="decoman" width="250" height="18" border="0"></a>
                  </div>
    
    <h onClick="expandcontent('mixed')" style="cursor:hand; cursor:pointer"><img src="images/mixedmedia.gif" width="250" height="18"></h>
    <div id="mixed" class="switchcontent">
                  <a href="javascript:;" onClick="MM_openBrWindow('illustrations/xbox.jpg','','status=yes,width=625,height=475')" onMouseOver="MM_swapImage('xbox','','images/videogame2.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/videogame1.gif" name="xbox" width="250" height="18" border="0" id="xbox"></a>
                                <a href="javascript:;" onClick="MM_openBrWindow('illustrations/city.jpg','','status=yes,width=610,height=470')" onMouseOver="MM_swapImage('city','','images/city2.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/city1.gif" name="city" width="250" height="18" border="0" id="city"></a>
    </div>		  
    
    					  
    <h onClick="expandcontent('other')" style="cursor:hand; cursor:pointer"><img src="images/otherbig.gif" width="250" height="25"></h>
    <div id="other" class="switchcontent">
                  <a href="javascript:;" onClick="MM_openBrWindow('flash/oldsite1/index.html','','status=yes,resizable=yes,width=950,height=750')" onMouseOver="MM_swapImage('oldport1','','images/port12.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/port11.gif" name="oldport1" width="250" height="18" border="0"></a>
    			  <a href="javascript:;" onClick="MM_openBrWindow('flash/oldsite2/index.html','','status=yes,resizable=yes,width=825,height=450')" onMouseOver="MM_swapImage('oldport2','','images/port22.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/port21.gif" name="oldport2" width="250" height="18" border="0"></a>
                  <a href="javascript:;" onClick="MM_openBrWindow('flash/draw/brad.html','','status=yes,resizable=yes,width=850,height=650')" onMouseOver="MM_swapImage('drawtest','','images/drawtest2.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/drawtest1.gif" name="drawtest" width="250" height="18" border="0"></a>
                  <a href="javascript:;" onClick="MM_openBrWindow('flash/box.swf','','status=yes,resizable=yes,width=500,height=300')" onMouseOver="MM_swapImage('boxtest','','images/boxtest2.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/boxtest1.gif" name="boxtest" width="250" height="18" border="0"></a>
                  <a href="javascript:;" onClick="MM_openBrWindow('flash/vacation.swf','','status=yes,resizable=yes,width=725,height=500')" onMouseOver="MM_swapImage('vacation','','images/vacation2.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/vacation1.gif" name="vacation" width="250" height="18" border="0"></a></div>

  3. #3
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    And the problem...?
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends français | entiendo español | tôi ít hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  4. #4
    Join Date
    Jan 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    the problem is that the site works in everything but Internet Explorer. What is wrong with my site/code that makes it work in everything except IE? (It will not work in IE for mac or windows)

  5. #5
    Join Date
    Jan 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    nobody has any help they can offer?

  6. #6
    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 have no idea why this is but in IE6 PC all I needed to do was a global search and replace on two items:

    search for:
    <h

    replace all with:
    <h3

    and search for:
    </h>

    replace all with:

    </h3>

    After that it worked fine. I have no idea why IE6 didn't like the <h> tag for this. OK, but this made the layout look crappy, so I added this to the style section:

    Code:
    h3 {
    display:inline;
    }
    And one final adjustment, with the image 'digital.gif' in the HTML code:

    Code:
    <img src="images/digital.gif" width="250" height="18" style="margin-top:0!important;margin-top:-4px;">
    After that it looked and worked fine in IE6 and FF. I didn't check Opera though.

    Some serious advice though, you really should redesign the page so as to not use all those .gif's. It takes way too long to load and they all could be replaced by cleverly crafted css style and plain text. This would also eliminate the need for all the image rollovers (and the script for them), which could be css hovers.

    Added Later: Turns out that, with the above modifications, it works in Opera, it didn't before.
    Last edited by jscheuer1; 01-31-2006 at 07:51 AM. Reason: add note
    - John
    ________________________

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

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
  •