Results 1 to 5 of 5

Thread: Using jQuery to load menu

  1. #1
    Join Date
    Apr 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Using jQuery to load menu

    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>

  2. #2
    Join Date
    Jan 2008
    Posts
    441
    Thanks
    67
    Thanked 4 Times in 4 Posts

    Default

    you need to load it with function()

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

  3. #3
    Join Date
    Apr 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Tried that - still doesn't work

    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>

  4. #4
    Join Date
    Jan 2008
    Posts
    441
    Thanks
    67
    Thanked 4 Times in 4 Posts

    Default

    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

  5. #5
    Join Date
    Apr 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Red face nav_jq.html

    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>

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
  •