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

Popular posts from this blog

html - How to style widget with post count different than without post count -

i have border below li elements in wordpress widget types appropriate. element inside set block gives them nice easy click full width. the problem, when choose option "show post count" when adding widget such categories or archives displays post count plain text after tag , because tag block pushes post number text line below. whether choose show post count or not show post count still gives exact same element identifyer example "widget_categories". how style post count not on next line still keep links non post count list items full width? here's example on sidebar www.bbmthemes.com/themes/modular/blog-standard/ in order solve problem need remove display:block; for ul.widgets ul a , add in it's place line-height: 33px; what going achieve have same visual effect. what going lose doing links going work on text , not on "box". the other way out of find post count coming , make changes this. example change text count i
Read more

How to remove text and logo OR add Overflow on Android ActionBar using AppCompat on API 8? -

have researched death , cannot find answer. i have actionbar using appcompat. supporting api v7 (api v8 do). actionbar works api v11. api < v11 has problem of removing icon (and feature) actionbar without supplying overflow. big picture have app logo, app title, , 3 icons squidging same actionbar on low end phone. trying make room! i happy 1 of 2 solutions. either: a method of getting overflow functionality can retrieved pull down. (preferred) method of removing icon , text actionbar below current xml api 11+: <resources> <!-- base application theme api 11+. theme replaces appbasetheme res/values/styles.xml on api 11+ devices. --> <style name="appbasetheme" parent="theme.appcompat.light.darkactionbar"> <item name="android:actionbarstyle">@style/liteactionbarstyle</item> <item name="actionbarstyle">@style/liteactionbarstyle</item> </st
Read more

javascript - storing input from prompt in array and displaying the array -

i want take the inputs user prompt, store input in array, , display it. want take 10 inputs user using for loop. have tried do-while shown below. var givennames = new array(); var pattern = /[\w\d]{1,}/ig; do{ var name = prompt("enter names. letters , digits accepted!\nentering empty field stops asking",""); if(name && name.match(pattern)){givennames.push(name);} } while(name != ""); function displaynames(){ if(givennames.length > 0){ document.getelementbyid("list").innerhtml = "<span style='color:navy;font- weight:bold;'>given names are:<\/span><br><br>" + givennames.join("<br><br>"); } else { document.getelementbyid("list").innerhtml = "<span style='color:navy;font-weight:bold;'>nothing has been given!<\/span>"; } } how replace for loop? var givennames = new array();
Read more