Accordion Content Script

[TmD73]

1) Script Title: Accordion Content Script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...daccordion.htm

3) Describe problem:

See: http://www.debrotdesign.com/VS_Demo/TEST.html

Not all of the accordion headers work when the page loads for the first time. The plus/minus image is missing on some of the headers and you cannot "open" these headers. If you refresh the page, it usually works but if you repeatedly refresh the page, sometimes it works, sometimes it doesn't. The number of working headers changes on each refresh. I have slideshow, tool-tip and photo gallery scripts on this page as well.
I am a newbie so this is just a guess but it seems like some of the other scripts interfere w/ this script when the page is loading. Is this possible? If so, can I some how control the order of when the scripts load? If this is not the problem, do you have any other suggestions?

Thanks in advance.
TmD

[Jas]

Hey! You used coffee cup to make that! I was suppose to use that for one of my college classes, but I chose to hand code it all (for what I was doing, it was faster to hand code it). Anyway. . .

That's a weird error. Yes, it is most likely do to the order that the scripts are being loaded. Try placing all of the includes for the script to the bottom of the head section, just before the </head> tag. Things load (and execute) from top to bottom, left to right. So:

Item 1
Item 2
Item 3

Would load in that order (Item 1 first, then Item two, then Item 3).
The problem is that it may ruin some of your other things. You may need to play around with it, but it should fix that script.
Hopefully this is helpful to you.

[ddadmin]

It doesn't have anything to do with the order in which the script is called, as that's done automatically after the page has loaded. It looks like some of your accordion DIV contents contain missing closing tags, throwing the script for a loop. For example, in your first header that doesn't work, the accordion DIV looks like:

<div contentindex="0c" class="testmenu">

 <center>

  <script type="text/javascript">

  //Define your own array to hold the photo album images

  //Syntax: ["path_to_thumbnail", "opt_image_title", "opt_destinationurl", "opt_linktarget"]

  var pswingPDF=new Array()

    pswingPDF[0]=["dn/PDF/PantoSwing/thumbnails/PSwing-LuPo-Schul_TY_US_tn.jpg", "", "dn/PDF/PantoSwing/PSwing-LuPo-Schul_TY_US.pdf"]

    pswingPDF[1]=["dn/PDF/PantoSwing/thumbnails/PSwing-VF-Schul_TY_US_tn.jpg", "", "dn/PDF/PantoSwing/PSwing-VF-Schul_TY_US.pdf"]

    pswingPDF[2]=["dn/PDF/PantoSwing/thumbnails/PSwing-2K_TY_US_tn.jpg", "", "dn/PDF/PantoSwing/PSwing-2K_TY_US.pdf"]

    pswingPDF[3]=["dn/PDF/PantoSwing/thumbnails/PSwing-VF_TY_US_tn.jpg", "", "dn/PDF/PantoSwing/PSwing-VF_TY_US.pdf"]

    pswingPDF[4]=["dn/PDF/PantoSwing/thumbnails/PSwing-LuPo_TY_US_tn.jpg", "", "dn/PDF/PantoSwing/PSwing-LuPo_TY_US.pdf"]



   //initiate a photo gallery

  //Syntax: new photogallery(imagearray, cols, rows, tablewidth, tableheight, opt_[paginatetext_prefix, paginatetext_linkprefix])

  var thepics=new photogallery(pswingPDF, 5, 1, '595px', '170px',['Browse Cutsheets:', ''])

  //OPTIONAL: Run custom code when an image is clicked on, via "onselectphoto"

  //DELETE everything below to disable

  //Syntax: function(img, link){}, whereby img points to the image object of the image, and link, its link object, if defined

  thepics.onselectphoto=function(img, link){

    if (link!=null) //if this image is hyperlinked

     window.open(link.href, "", "width=800, height=600, status=1, resizable=1")

     return false //cancel default action when clicking on image, by returning false instead of true

  }

  </script><table class="photogallery" id="photogallery-1" style="width: 595px; height: 170px;"><tbody><tr><td valign="top"><a href="http://www.debrotdesign.com/VS_Demo/dn/PDF/PantoSwing/PSwing-LuPo-Schul_TY_US.pdf" target=""><img src="test9_files/PSwing-LuPo-Schul_TY_US_tn.jpg" title=""></a></td><td valign="top"><a href="http://www.debrotdesign.com/VS_Demo/dn/PDF/PantoSwing/PSwing-VF-Schul_TY_US.pdf" target=""><img src="test9_files/PSwing-VF-Schul_TY_US_tn.jpg" title=""></a></td><td valign="top"><a href="http://www.debrotdesign.com/VS_Demo/dn/PDF/PantoSwing/PSwing-2K_TY_US.pdf" target=""><img src="test9_files/PSwing-2K_TY_US_tn.jpg" title=""></a></td><td valign="top"><a href="http://www.debrotdesign.com/VS_Demo/dn/PDF/PantoSwing/PSwing-VF_TY_US.pdf" target=""><img src="test9_files/PSwing-VF_TY_US_tn.jpg" title=""></a></td><td valign="top"><a href="http://www.debrotdesign.com/VS_Demo/dn/PDF/PantoSwing/PSwing-LuPo_TY_US.pdf" target=""><img src="test9_files/PSwing-LuPo_TY_US_tn.jpg" title=""></a></td></tr></tbody></table><div class="photonavlinks" id="photogallerypaginate-1">Browse Cutsheets: <a class="current" href="#navigate" rel="0">1</a> </div>

  </center>

</div>

If you remove the portion in gray and replace that with some other content like "<b>This is a test</b>", that header now works.

[TmD73]

OK,
I did what you said and just added some simple text as content for each header and that seems to work. See: http://www.debrotdesign.com/VS_Demo/TEST5.html

It appears that this script is not playing nice with the photo gallery script. I tried to clean it up but I must still have something wrong. See: http://www.debrotdesign.com/VS_Demo/TEST.html
The photo gallery script can be found here: http://www.dynamicdrive.com/dynamici...photoalbum.htm

Just to prove this to myself, I removed the photo gallery script but left the tool-tip script and everything works great. See: http://www.debrotdesign.com/VS_Demo/TEST6.html

I did find another header script that does basically the same thing but it is just not as pretty as this one and it seems to play nice with the photo gallery script. It can be found here: http://www.dynamicdrive.com/dynamicindex1/navigate2.htm
Here is my example: http://www.debrotdesign.com/VS_Demo/TEST3.html

So, if I have to I will use the other header script but I really want to use the one I am having trouble with. Is it possible that some of these scripts will just not work together or do I have something wrong with my code? Is it possible that the CoffeeCup editor that I am using is causing the problems since it is a WYSIWYG editor? As you can see I am trying to debug this myself but I am stuck.

Thanks,
TmD

[Jas]

Sorry guys, I don't mean to digress here; but DDadmin, I thought the content loaded the HTML top to bottom, then the scripts and CSS top to bottom in the order they are included.
EDIT: TmD73: I don't think it's your WYSIWYG editor. I used front page for a long time and it didn't cause problems.