ddaccordion menu not opening if page not completely loaded

[Marta_S]

Script Title: ddaccordion.js

Script URL (on DD): http://www.dynamicdrive.com/dynamici...enu-glossy.htm

Hi there, I used ddaccordion.js to replace a select element we used for selecting a corpus in our application (http://webitext.com/bin/webitext.cgi). It was mainly because we wanted the corpora to be shown category by category. I had to tweak the menu in order to have more than one level (I have not been aware at the time of a nested level accordion menu). For that reason I added some code in onopenclose() part of the init(). The menu works fine when the page is loaded. But when the user searches for something that takes a long time (try searching for "associate"), if I want to see what corpora are available while the application still prints the results, it cannot be done if I don't stop the page loading (window.stop()). If you click on the menu while page is still loading, you will see the message that the search was interrupted (that's where the stop() is called) and then you will be able to open it.

So the question is: can I open the menu and not interrupt the search? I.e. is it possible to open it if the page is not fully loaded? If so, I guess I probably didn't do things right in that onopenclose function (can't say I mastered the code behind the menu).

If it cannot be opened unless the page is fully loaded, do you have any other suggestions for that kind of functionality?

Thanks a lot,
Marta

[ddadmin]

To get the menu to initialize as fast as possible, try disabling the DOM onload event inside the .js file:

jQuery(document).ready(function($){

The attached .js file contains this change. Then, move the menu initialization code that usually is defined in the HEAD section of your page to right after the HTML markup of the menu, for example:

<div class="glossymenu">
<a class="menuitem submenuheader" href="#" name="tc_gui" id="target_corpus_gui" 
	onclick="if(navigator.appName == 'Microsoft Internet Explorer'){window.document.execCommand('Stop');}else{window.stop();}
	if(document.getElementById('wait') != null && document.getElementById('wait').innerHTML.match(/Please wait while/) && alert_printed == 0){document.getElementById('interrupted').style.display='block';clear_cursor(1000);};
	alert_printed=1;">GC &ndash; * Government of Canada (all sites)<br /><span class="small">click here to open or close the list</span><span class=accordsuffix><img class=statusicon src="/plus.gif" alt="+" height="13" width="13"></span></a>
<input type="hidden" id="tc" name="tc" value="* Government of Canada (all sites)">
<div class="submenu">

<a class="category menuitem submenuheader" href="#">General Corpora</a>
<div class="submenu">
<ul>
<li><a  id="All Canadian sites" href="javascript:set_target_corpus('All Canadian sites','All Canadian sites');">All Canadian sites</a></li>
<li><a  id="Codex Alimentarius" href="javascript:set_target_corpus('Codex Alimentarius','Codex Alimentarius');">Codex Alimentarius</a></li>
<li><a  id="EurLex" href="javascript:set_target_corpus('EurLex','EurLex');">EurLex</a></li>
<li><a  id="Gateway to the European Union" href="javascript:set_target_corpus('EU &ndash; Gateway to the European Union','Gateway to the European Union');">EU &ndash; Gateway to the European Union</a></li>
<li><a  id="Government of New Brunswick" href="javascript:set_target_corpus('GNB &ndash; Government of New Brunswick','Government of New Brunswick');">GNB &ndash; Government of New Brunswick</a></li>

<li><a  id="Government of Ontario" href="javascript:set_target_corpus('GO &ndash; Government of Ontario','Government of Ontario');">GO &ndash; Government of Ontario</a></li>
<li><a  id="Government of Quebec" href="javascript:set_target_corpus('GQc &ndash; Government of Quebec','Government of Quebec');">GQc &ndash; Government of Quebec</a></li>
<li><a  id="International Telecommunication Union" href="javascript:set_target_corpus('ITU &ndash; International Telecommunication Union','International Telecommunication Union');">ITU &ndash; International Telecommunication Union</a></li>
<li><a  id="Royal Canadian Mint" href="javascript:set_target_corpus('RCM &ndash; Royal Canadian Mint','Royal Canadian Mint');">RCM &ndash; Royal Canadian Mint</a></li>
<li><a  id="Royal Canadian Mounted Police" href="javascript:set_target_corpus('RCMP &ndash; Royal Canadian Mounted Police','Royal Canadian Mounted Police');">RCMP &ndash; Royal Canadian Mounted Police</a></li>

<li><a  id="Natural Resources Canada" href="javascript:set_target_corpus('NRCan &ndash; Natural Resources Canada','Natural Resources Canada');">NRCan &ndash; Natural Resources Canada</a></li>
<li><a  id="Public Safety Canada" href="javascript:set_target_corpus('PSC &ndash; Public Safety Canada','Public Safety Canada');">PSC &ndash; Public Safety Canada</a></li>
<li><a  id="Public Works and Government Services Canada" href="javascript:set_target_corpus('PWGSC &ndash; Public Works and Government Services Canada','Public Works and Government Services Canada');">PWGSC &ndash; Public Works and Government Services Canada</a></li>
<li><a  id="Transport Canada" href="javascript:set_target_corpus('TC &ndash; Transport Canada','Transport Canada');">TC &ndash; Transport Canada</a></li>
<li><a  id="Veterans Affairs Canada" href="javascript:set_target_corpus('VAC &ndash; Veterans Affairs Canada','Veterans Affairs Canada');">VAC &ndash; Veterans Affairs Canada</a></li>

</ul>
</div>
<a class="category menuitem submenuheader" href="#">Health</a>
<div class="submenu">
<ul>
<li><a style="font-style:italic; " id="Genomics" href="javascript:set_target_corpus('Genomics &mdash; prealigned (fast)','Genomics');">Genomics &mdash; prealigned (fast)</a></li>
<li><a style="font-style:italic; " id="Health Canada" href="javascript:set_target_corpus('HC &ndash; Health Canada &mdash; prealigned (fast)','Health Canada');">HC &ndash; Health Canada &mdash; prealigned (fast)</a></li>
<li><a  id="World Health Organization" href="javascript:set_target_corpus('WHO &ndash; World Health Organization','World Health Organization');">WHO &ndash; World Health Organization</a></li>

</ul>
</div>
<a class="category menuitem submenuheader" href="#">Legal – Treaties and Agreements</a>
<div class="submenu">
<ul>
<li><a  id="Canadian Legal Information Institute" href="javascript:set_target_corpus('CanLII &ndash; Canadian Legal Information Institute','Canadian Legal Information Institute');">CanLII &ndash; Canadian Legal Information Institute</a></li>
<li><a  id="Commission for Environmental Cooperation" href="javascript:set_target_corpus('CEC &ndash; Commission for Environmental Cooperation','Commission for Environmental Cooperation');">CEC &ndash; Commission for Environmental Cooperation</a></li>
<li><a  id="Hague Conference on Private International Law" href="javascript:set_target_corpus('HCCH &ndash; Hague Conference on Private International Law','Hague Conference on Private International Law');">HCCH &ndash; Hague Conference on Private International Law</a></li>

<li><a  id="Judgments of the Supreme Court of Canada" href="javascript:set_target_corpus('JSCC &ndash; Judgments of the Supreme Court of Canada','Judgments of the Supreme Court of Canada');">JSCC &ndash; Judgments of the Supreme Court of Canada</a></li>
<li><a  id="North American Free Trade Agreement" href="javascript:set_target_corpus('NAFTA &ndash; North American Free Trade Agreement','North American Free Trade Agreement');">NAFTA &ndash; North American Free Trade Agreement</a></li>
</ul>
</div>


<script type="text/javascript">
   var lastexpandedindex;
   var target_corpus;
   var target_corpus_id;
   var category_index;
   var alert_printed = 0;
   ddaccordion.init({
      headerclass: "submenuheader", //Shared CSS class name of headers group
      contentclass: "submenu", //Shared CSS class name of contents group
      revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
      mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
      collapseprev: false, //Collapse previous content (so only one open at any time)? true/false
      defaultexpanded: [], //index of content(s) open by default [index1, index2, etc] [] denotes no content
      onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
      animatedefault: false, //Should contents open by default be animated into view?
      persiststate: false, //persist state of opened contents within browser session?
      toggleclass: ["", ""], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
      togglehtml: ["suffix", "<img src='/plus.gif' alt='+' class='statusicon' />", "<img src='/minus.gif' alt='-' class='statusicon' />"], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
      animatespeed: 1, //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
      oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
         //do nothing
      },
      onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
	       if (state=="block" && isuseractivated==true){ //if header is expanded as a result of the user clicking on it (versus expanded by default when page loads)
             //alert("lastexpandedindex: " + lastexpandedindex + " category_index: " + category_index);
 		      if (index == 0) {
                if (lastexpandedindex != category_index && lastexpandedindex != 0 && lastexpandedindex != index && lastexpandedindex != undefined) {
					       ddaccordion.collapseone("submenuheader",lastexpandedindex);
				       }
				   ddaccordion.expandone("submenuheader",category_index);
		      } else if (lastexpandedindex != 0 && lastexpandedindex != index && lastexpandedindex != undefined) {
			       ddaccordion.collapseone("submenuheader",lastexpandedindex);
		       }
		       lastexpandedindex = index;
 	        }
 	        document.search_form.term.focus();
      }
   })
</script>

The initialization code must follow the menu markup with the changes, and not before.

I have not been aware at the time of a nested level accordion menu

The 2nd example on this menu page illustrates creating a nested accordion menu using this script.

[Marta_S]

Hi DD Admin,

Thanks for such a quick reply. I tried your fix, but it didn't work out. If you comment out this line:

jQuery(document).ready(function($){

the menu cannot be clicked on even when no search is done. The line has to stay (as per: http://docs.jquery.com/Tutorials:Int...29.ready%28%29). It allows the code inside it to be executed before the content of the page is loaded (images/scripts) but after the DOM object is loaded.

So I think the problem can probably be solved if after each printed result we close the html tag. For now, we print each result as a table and close the html tag only after the last result gets printed. And the DOM is only ready then. Before that the menu is inactive.

I appreciate your help greatly, it made me realize where the problem was (I think so; to be continued ....).

Best regards,
Marta

[ddadmin]

Hi:
Did you try the attached .js file? When I said comment out that line, I don't mean literally just that line, but that function call, by commenting out the two lines that wrap around the main code block:

//jQuery(document).ready(function($){


//})

It was easier to just make the modifications and attach the modified file above, which is what I've done.

[Marta_S]

Yes, I did, I used your file. And that's why I told you that commenting out that function call (both opening and closing line, of course) blocks the menu completely. At least in my case. Have you tried it yourself? In my case the menu seems totally ignorant of any mouse events. Does it work on your menus when you comment it out? If it does, it could be the code that I added in onopenclose that somehow doesn't fit with that approach?

Thanks for your help,
Marta