javascript - Uncaught TypeError: Cannot call method 'menuAim' of null -
i'm using 3 level dropdown works fine on it's own conflicts when added magento template. have added $.noconflict(true); fixed problems i'm still getting uncaught typeerror, plus 3rd level of dropdown isn't displaying.
<div class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <div class="nav-collapse collapse"> <ul class="nav"> <li class="active"> <a id="dropdown-toggle" data-toggle="dropdown" href="#">shop a-z</a> <!-- jquery-menu-aim: <ul> defines dropdown main menu , contents. 1 of many possible examples defining menu's html. jquery-menu-aim agnostic html structure, fires events used please. --> <ul class="dropdown-menu" role="menu"> <li data-submenu-id="submenu-patas"> <a href="#">patas</a> <!-- jquery-menu-aim: each class="popover" div defines submenu content. there million , 1 ways this, places structure html, etc. 1 example. jquery-menu-aim agnostic html structure, fires events used please. --> <div id="submenu-patas" class="popover"> <h3 class="popover-title">patas</h3> <div class="popover-content"><img src="media/img/patas.png"></div> </div> </li> <li data-submenu-id="submenu-snub-nosed"> <a href="#">golden snub-nosed</a> <div id="submenu-snub-nosed" class="popover"> <h3 class="popover-title">golden snub-nosed</h3> <div class="popover-content"><img src="media/img/snub-nosed.png"></div> </div> </li> <li data-submenu-id="submenu-duoc-langur"> <a href="#">duoc langur</a> <div id="submenu-duoc-langur" class="popover"> <h3 class="popover-title">duoc langur</h3> <div class="popover-content"><img src="media/img/duoc-langur.png"></div> </div> </li> <li data-submenu-id="submenu-pygmy"> <a href="#">baby pygmy marmoset</a> <div id="submenu-pygmy" class="popover"> <h3 class="popover-title">baby pygmy marmoset</h3> <div class="popover-content"><img src="media/img/pygmy.png"></div> </div> </li> <li data-submenu-id="submenu-tamarin"> <a href="#">black lion tamarin</a> <div id="submenu-tamarin" class="popover"> <h3 class="popover-title">black lion tamarin</h3> <div class="popover-content"><img src="media/img/tamarin.png"></div> </div> </li> <li data-submenu-id="submenu-monk"> <a href="#">monk saki</a> <div id="submenu-monk" class="popover"> <h3 class="popover-title">monk saki</h3> <div class="popover-content"><img src="media/img/monk.png"> </div> </div> </li> <li data-submenu-id="submenu-gabon"> <a href="#">gabon talapoin</a> <div id="submenu-gabon" class="popover"> <h3 class="popover-title">gabon</h3> <div class="popover-content"><img src="media/img/gabon.png"></div> </div> </li> <li data-submenu-id="submenu-grivet"> <a href="#">grivet</a> <div id="submenu-grivet" class="popover"> <h3 class="popover-title">grivet</h3> <div class="popover-content"><img src="media/img/grivet.png"></div> </div> </li> <li data-submenu-id="submenu-red-leaf"> <a href="#">red leaf</a> <div id="submenu-red-leaf" class="popover"> <h3 class="popover-title">red leaf</h3> <div class="popover-content"><img src="media/img/red-leaf.png"></div> </div> </li> <li data-submenu-id="submenu-king-colobus"> <a href="#">king colobus</a> <div id="submenu-king-colobus" class="popover"> <h3 class="popover-title">king colobus</h3> <div class="popover-content"><img src="media/img/colobus.png"></div> </div> </li> </ul> </li> </ul> </div> </div> </div> </div>
javascript code placed @ bottom of template before
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script> <script src="js/jquery/jquery.menu-aim.js" type="text/javascript"></script> <script src="js/bootstrap.min.js" type="text/javascript"></script> <script> $.noconflict(true); var $menu = $(".dropdown-menu"); // jquery-menu-aim: <meaningful part of example> // hook events fired on menu row activation. $menu.menuaim({ activate: activatesubmenu, deactivate: deactivatesubmenu }); // jquery-menu-aim: </meaningful part of example> // jquery-menu-aim: following js used show , hide submenu // contents. again, can done in number of ways. jquery-menu-aim // doesn't care how this, fires activate , deactivate // events @ right times know when show , hide submenus. function activatesubmenu(row) { var $row = $(row), submenuid = $row.data("submenuid"), $submenu = $("#" + submenuid), height = $menu.outerheight(), width = $menu.outerwidth(); // show submenu $submenu.css({ display: "block", top: -1, left: width - 3, // main should overlay submenu height: height - 4 // padding main dropdown's arrow }); // keep activated row's highlighted $row.find("a").addclass("maintainhover"); } function deactivatesubmenu(row) { var $row = $(row), submenuid = $row.data("submenuid"), $submenu = $("#" + submenuid); // hide submenu , remove row's highlighted $submenu.css("display", "none"); $row.find("a").removeclass("maintainhover"); } // bootstrap's dropdown menus close on document click. // don't let event close menu if submenu being clicked. // event propagation control doesn't belong in menu-aim plugin // because plugin agnostic bootstrap. $(".dropdown-menu li").click(function(e) { e.stoppropagation(); }); $(document).click(function() { // hide submenu on click. again, hacked // menu/submenu structure show use of jquery-menu-aim. $(".popover").css("display", "none"); $("a.maintainhover").removeclass("maintainhover"); }); </script> </div> </div> </body>
getting null
$(".dropdown-menu");
means not rendered jquery rather other library, looks you're not using .noconflict
properly.
try instead:
$.noconflict(true); var $menu = jquery(".dropdown-menu"); //...
Comments
Post a Comment