Using jQuery to load menu

**nonagon** · 04-17-2012, 03:39 PM

Glossy Accordion Menu: http://www.dynamicdrive.com/dynamici...enu-glossy.htm

Is there a way to use jQuery to pull in the menu from an HTML file and still run the ddaccordion.init script?

It doesn't seem to work for me when I use this:

Code:

<script type="text/javascript">
$("#navigation").load("nav_jq.html");
</script>

**ggalan** · 04-18-2012, 03:29 AM

you need to load it with function()

Code:

<script type="text/javascript">
$(function() {
  $("#navigation").load("nav_jq.html");
});
</script>

**nonagon** · 04-18-2012, 03:03 PM

Here is my code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<title>New Features in CourseLink (D2L v.9.4.1)</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="scripts/ddaccordion.js"></script>
<script type="text/javascript" src="scripts/jquery.corner.js"></script>
<script type="text/javascript">
	$(function() {
		$("#navigation").load("nav_jq.html");
	});
</script>

<script type="text/javascript">
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: 100, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
		collapseprev: true, //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: true, //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='images/plus.gif' class='statusicon' />", "<img src='images/minus.gif' class='statusicon' />"], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
		animatespeed: "fast", //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
				//do nothing
		}
})		
</script>
</head>

<body>
<div id="container">

  <div id="header">
    <div class="logo"></div>
    <div class="titletext">
      <h1>What's New in Version 9.4.1</h1>
    </div>
  </div>

 <div id="wrapper">
 
  <div id="navigation">
  </div>
 
  <div id="maincontent">
   <div class="contentbox">
      <h2>Exciting News!</h2>
      <p>We have upgraded to version 9.4.1!</p>
   </div>
   <div style="clear:both"></div>
   </div>
 </div>
</div>
<p>Updated 10:45 AM</p>
</body>
</html>

**ggalan** · 04-19-2012, 03:17 AM

i just tried it and it seems fine. what does nav_jq.html look like? also which browser are you testing on? local or on webserver?
im on firefox

**nonagon** · 04-19-2012, 02:30 PM

Sorry, I should have included the nav_jq code as well...

I am testing from a Windows web server with Firefox.

The problem is that when the menu loads it does not show the [+] icons in the menu that are created by the ddaccordion.init script.

Code:

<div class="glossymenu">
<a class="menuitem submenuheader" href="http://www.dynamicdrive.com/style/" >New Features</a>
<div class="submenu">
	<ul>
	<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Notifications</a></li>
	<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Dropbox Document Viewer</a></li>
	<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Calendar Views</a></li>
	<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Social&nbsp;Profiles&nbsp;and&nbsp;Social&nbsp;Sharing</a></li>
	</ul>
</div>
<a class="menuitem submenuheader" href="http://www.dynamicdrive.com/style/" >Interface Changes</a>
<div class="submenu">
	<ul>
	<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Dropbox Leave Feedback</a></li>
	<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">ePortfolio Streamlined</a></li>
	</ul>
</div>
<a class="menuitem submenuheader" href="http://www.dynamicdrive.com/style/" >Tool Improvements</a>
<div class="submenu">
	<ul>
	<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Dropbox</a></li>
	<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">ePortfolio</a></li>
	<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Import/Export/Copy Components</a></li>
	<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">News</a></li>
	</ul>
</div>
</div>

Thread: Using jQuery to load menu

Thread Tools

Search Thread

Using jQuery to load menu

Tried that - still doesn't work

nav_jq.html

Bookmarks

Bookmarks

Posting Permissions