I'm trying to use a dropdown menu with Meteor, but it's now working. I don't know if it's related with the packages that I have installed:
https://atmosphere.meteor.com/package/zurb-foundation
https://atmosphere.meteor.com/package/iron-router
https://atmosphere.meteor.com/package/accounts-entry
https://atmosphere.meteor.com/package/iron-router-progress
Here is the dropdown example:
<section class="top-bar-section">
<ul class="right">
<li class="has-dropdown">
user
<ul class="dropdown">
<li>Contact</li>
<li>Friends</li>
</ul>
<ul class="dropdown">
<li>Contact</li>
</ul>
</li>
</ul>
</section>
What might be the problem? The console prints this error: Uncaught TypeError: Cannot read property 'is_hover' of undefined
Thanks.
you can do $('document').foundation('reflow') on rendered template like here: zf5.meteor.com
This works great using the zurb-foundation package you linked to:
<section class="top-bar-section">
<ul class="right">
<li class="has-dropdown">
user
<ul id="drop1" class="f-dropdown" data-dropdown-content>
<li>Contact</li>
<li>Friends</li>
</ul>
</li>
</ul>
</section>
Related
I am using js mmenu on the shopify site. I run into issue which I cant figure out.
When there is a dropdown menu, parent link becomes not clickable and has #mm-0 at the end of it. I need to keep it as is and link to its own page.
You can see code below. Right now Links "Products" and "About" go to https://www.irestorelaser.com/products/irestore-laser-hair-growth-system#mm-0 . Any help would be great!
<div id="nav" >
<ul>
<li >How it works</li>
<li class="Selected">Products
<ul>
<li class="Selected">Laser Helmet</li>
<li >All Products</li>
</ul>
</li>
<li >About
<ul>
<li >Warranty</li>
</ul>
</li>
</ul>
</div>
Hello good people from stackoverflow.
I got a question.
I recently added a responsive menu to my website. It worked fine. But I added a second, different menu. One made for mobiles. I hide it on a normal scale and show it at the mobile version. But the function suddenly stopped working. No names were changed except for one but that should not interfere with it. Here is the old code:
<div class="header">
<div class="container">
<ul class="nav">
<li><a class="active_page" href="index.php">Home</a></li>
<li>Projects</li>
<li>About</li>
<li>Contact</li>
<li class="icon">
≡
</li>
</ul>
</div>
</div>
And here is the new code:
<div class="header">
<div class="container">
<ul class="nav">
<li><a class="active_page" href="index.php">Home</a></li>
<li>Projects</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="header_mobile">
<div class="container">
<ul class="nav">
<li>Home</li>
<li>Projects</li>
<li>About</li>
<li>Contact</li>
<li class="icon">
≡
</li>
</ul>
</div>
</div>
And last here is the function:
function myFunction() {
document.getElementsByClassName("nav")[0].classList.toggle("responsive");
}
It is all linked properly because it worked before. I hope anyone can help me with this.
Thanks in advance.
EDIT: Here is the link to the website, just scaled it to mobile to see it: http://portfoliotristan.esy.es/index.php
function myFunction() {
document.getElementsByClassName("nav")[1].classList.toggle("responsive");
}
You are selecting the first 'nav' item. You need to select the second nav item by changing 0 to 1.
I am trying to use Materialize with Meteor, and I have hit a bump on how to initialize Materialize javascript, when adding/removing emelents from dom.
Usecase is simple - navbar contains login/register functions when user has not logged in, when she is logged in, there is a dropdown (that requires separate initialization) containing sign out. as rendered on template gets called only once, after second login/logout dropdown stops working.
Template._header.onRendered(function(){
console.log('onRendered');
$(".dropdown-button").dropdown();
});
and html part
<template name="_header">
<!-- Dropdown Structure -->
<ul id="dropdown1" class="dropdown-content">
<li>one</li>
<li>two</li>
<li class="divider"></li>
<li><i class="fa fa-lock left"></i>Sign Out</li>
</ul>
<nav class="light-blue" role="navigation">
<div class="nav-wrapper">
Logo
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a class="clicker" href="#!">Clicker</a></li>
{{#if currentUser}}
<li>Welcome</li>
<!-- Dropdown Trigger -->
<li><a class="dropdown-button" href="#!" data-activates="dropdown1">Dropdown<i class="mdi-navigation-arrow-drop-down right"></i></a></li>
{{else}}
<li>Sign in</li>
<li>Register</li>
{{/if}}
</ul>
</div>
</nav>
</template>
I have read many questions here and posts in other parts of the interwebs, but I don't understand how to emulate template.updated style callback, that would be called every time element is added, removed or changed within a template. Any ideas?
update:
There are very similar question out there. Problem there has different circumstances, but solution is the same - have element in separate template.
Looks like only way are to to wrap the added/removed element in its own nested template, and then listening onRendered there. (As stipulated in this comment)
Now I have rewritten code like this:
Template._header_dropdown.onRendered(function(){
console.log('onRenderedDropdown');
$(".dropdown-button").dropdown();
});
with html part
<template name="_header">
<nav class="light-blue" role="navigation">
<div class="nav-wrapper">
Logo
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a class="clicker" href="#!">Clicker</a></li>
{{#if currentUser}}
<li>Welcome</li>
<li>Main</li>
<!-- Dropdown Trigger -->
{{> _header_dropdown}}
{{else}}
<li>Sign in</li>
<li>Register</li>
{{/if}}
</ul>
</div>
</nav>
</template>
<template name="_header_dropdown">
<!-- Dropdown Structure -->
<ul id="dropdown1" class="dropdown-content">
<li>one</li>
<li>two</li>
<li class="divider"></li>
<li><i class="fa fa-lock left"></i>Sign Out</li>
</ul>
<li><a class="dropdown-button" href="#!" data-activates="dropdown1">Dropdown<i class="mdi-navigation-arrow-drop-down right"></i></a></li>
</template>
and it works. Not very neat solution, but still a lot better than many other leads I had googled. Thanks everybody
Well, as the title said, my problem is that after add ajaxToolkit:SlideShowExtender to my Main.aspx, that page's Bootstrap dropdown menu stop working, and when i go to other page, drop down menu comeback to life itself. If i remove ajaxToolkit:SlideShowExtender from my Main.aspx, the Bootstrap dropdown menu begin to work again. So how can i put these 2 together?
I put my dropdown menu to my master page and all other pages is using that master page. Everything work fine unless i add ajaxToolkit:SlideShowExtender.
I also put these scripts on the head of the master page.
<script type="text/javascript" src="Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>
And these are the drop down menu code in the master page.
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Item</li>
<li class="dropdown">
Account<b class="caret"></b>
<ul class="dropdown-menu">
<li>Log in</li>
<li>Registration</li>
<li>Log out</li>
<li>Modify</li>
</ul>
</li>
<li class="dropdown">
Orders<b class="caret"></b>
<ul class="dropdown-menu">
<li>Cart</li>
<li>History</li>
</ul>
</li>
<li id="adminControl" runat="server" visible="false" class="dropdown">
Admins<b class="caret"></b>
<ul class="dropdown-menu">
<li>Item management</li>
<li>Order managerment</li>
<li>Article managerment</li>
</ul>
</li>
<li>Search</li>
<li>About</li>
<li>Contact</li>
</ul>
</div> <!--/.nav-collapse -->
</div> <!--/container -->
</div> <!--/navbar navbar-default navbar-fixed-top -->
Than you all for reading this question and for all your help.
Can someone please point me to where I can go to find info on how to create a mobile menu (drop list) for the code bellow? All the tutorials that I have found has been on switching pages, nothing for filters such as bellow. I am using the isotop plugin to navigate through my site.
<!-- SMOOTH MENU DIV -->
<div id="nav-button"> </div>
<nav id="smooth-menu" role="navigation" class="main-nav-links responsive-nav">
<ul id="filters" data-option-key="filter">
<li>Home</li>
<li>About Danielle</li>
<li id="one">My Work
<ul class="second-level">
<li>Kids and Family</li>
<li>Babies</li>
<li class="last">Seniors</li>
</ul>
</li>
<li id="two">Info
<ul class="second-level">
<li>Session Fees</li>
<li>Finished Art</li>
<li class="last">About Your Session</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
<!-- end nav -->
I ended up using an alternative solution. I went with a different menu.