PDA

View Full Version : 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:


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

ggalan
04-18-2012, 03:29 AM
you need to load it with function()



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

nonagon
04-18-2012, 03:03 PM
Here is my 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.


<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>