I am using Foundation 5 top bar drop down in an Aurelia web app.
I want to add on click event handler to the drop down menu items.
My code looks like below:
<!DOCTYPE html>
<html class=" js flexbox flexboxlegacy canvas canvastext webgl no-touch g… webworkers applicationcache svg inlinesvg smil svgclippaths" style="">
<head>
<meta charset="utf-8"></meta>
<meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
<title></title>
<script src="/Scripts/jquery-2.1.4.js"></script>
<link rel="stylesheet" href="/Content/foundation/foundation.css"></link>
<link rel="stylesheet" href="/Content/foundation/foundation.mvc.css"></link>
<link rel="stylesheet" href="/Content/font-awesome.min.css"></link>
<link rel="stylesheet" href="/Content/custom/app.css"></link>
<script src="/Scripts/modernizr-2.8.3.js"></script>
</head>
<body>
<nav class="top-bar fixed" data-topbar role="navigation">
...
<section class="top-bar-section">
<ul class="left">
<li class="has-dropdown">
<a href="#" title="${activeModule.Description}">
${activeModule.DisplayName}
</a>
<ul class="dropdown">
<ul repeat.for="module of allModules">
<li>
<a click.delegate="$parent.setActiveModule(module.Name)" data-trash="${$parent.activeModule.Name}">
<strong>${module.DisplayName} </strong> | <em> ${module.Description} </em>
</a>
</li>
<li class="divider">
</li>
</ul>
</ul>
</li>
</ul>
</section>
</nav>
<div class="page-host row">
...
</div>
<hr />
<footer>
<p></p>
</footer>
<script src="/Scripts/foundation/fastclick.js"></script>
<script src="/Scripts/foundation/foundation.js"></script>
<script src="/Scripts/foundation/foundation.abide.js"></script>
<script src="/Scripts/foundation/foundation.accordion.js"></script>
<script src="/Scripts/foundation/foundation.alert.js"></script>
<script src="/Scripts/foundation/foundation.clearing.js"></script>
<script src="/Scripts/foundation/foundation.dropdown.js"></script>
<script src="/Scripts/foundation/foundation.equalizer.js"></script>
<script src="/Scripts/foundation/foundation.interchange.js"></script>
<script src="/Scripts/foundation/foundation.joyride.js"></script>
<script src="/Scripts/foundation/foundation.magellan.js"></script>
<script src="/Scripts/foundation/foundation.offcanvas.js"></script>
<script src="/Scripts/foundation/foundation.orbit.js"></script>
<script src="/Scripts/foundation/foundation.reveal.js"></script>
<script src="/Scripts/foundation/foundation.slider.js"></script>
<script src="/Scripts/foundation/foundation.tab.js"></script>
<script src="/Scripts/foundation/foundation.tooltip.js"></script>
<script src="/Scripts/foundation/foundation.topbar.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
However whenever I am clicking the drop down item the custom event handler is not invoked. I tested the same piece of code by placing it outside the <li class="has-dropdown"> and directly under <ul class="left"> and I found it to be working.
Can anyone please let me know what I am missing here?
Thanks.
For anyone looking at this question, here is how I solved it:
I understood that the call to $(document).foundation(); is not working properly. As I am using Aurelia, I leveraged the lifecycle events of views for solving this issue. Thus, I added the call to $(document).foundation(); in the attached event like below:
attached() {
$(document).foundation();
}
And that's it. Hope it helps.
Related
I am triying to install a dropdown in materialize using instructions but when ran the code console throw me an error
This is the code
//main.js
$(()=>{
alert("Hola de nuevo! Ahora con Materialize")
console.log('Main cargando')
$('.dropdown-button').dropdown();
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ejs Test</title>
<link rel="stylesheet" href="css/materialize.css">
<link rel="stylesheet" href="css/materialize.min.css">
<script src="js/materialize.min.js"></script>
<script src="js/jquery.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<ul class="dropdown-content" id="dropdown1">
<li>TextoPrueba</li>
<li>TextoPrueba</li>
<li>TextoPrueba</li>
</ul>
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper">
BrandLogo
<ul class="right hide-on-med-and-down">
<li>Texto1</li>
<li>Texto2</li>
<li>Texto3</li>
<li>TextoDropDown</li>
</ul>
</div>
</nav>
</div>
</body>
</html>
in the console of the code inspector throw me
Uncaught TypeError: $(...).dropdown is not a function
what can i do to show the dropdown correctly?
Had the same problem and found the answer here: https://github.com/krescruz/angular-materialize/issues/96#issuecomment-164877838
In my case it was the order of javascript files include. materialize.js must be declared after jquery.
Add drop-down and their constrainWidth to false.
Materializecss dropdown documentation
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- Dropdown Trigger -->
<a class='dropdown-trigger ' href='#' data-target='dropdown1' >Drop Me!</a>
<!-- Dropdown Structure -->
<ul id='dropdown1' class='dropdown-content' >
<li>You got something</li>
<li>Extra stuff</li>
<li>You don't have notfications</li>
</ul>
<script>
$(document).ready(function () {
$('.dropdown-trigger').dropdown({
constrainWidth:false,
});
});
</script>
jQuery initialization for dropdowns is only necessary if you create them dynamically.
This should be enough:
<!-- Dropdown Trigger -->
<a class='dropdown-button btn' href='#' data-activates='dropdown1'>Drop Me!</a>
<!-- Dropdown Structure -->
<ul id='dropdown1' class='dropdown-content'>
<li>one</li>
<li>two</li>
<li class="divider"></li>
<li>three</li>
<li><i class="material-icons">view_module</i>four</li>
<li><i class="material-icons">cloud</i>five</li>
</ul>
CodePen:
https://codepen.io/raynerprogramming/project/editor/ArNmxN/
I'm trying to split out my header into a separate HTML file and include it with ng-include. However, I can't seem to get the sideNav() call to actually work in this setup. If I bring the header.html file into the index.html. It works as intended.
I've tried various events to hook into before calling the sideNav() without any luck.
angular.element(document).ready(function () {})
$rootScope.$on("$includeContentLoaded", function(event,
templateName){}); plain jquery $(function() {})
The codepen also includes the working copy, index_working.html.
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
<title>Test</title>
<!-- CSS -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="/app.js"></script>
</head>
<body ng-app="app" ng-controller="testController">
<div ng-include="'header.html'"></div>
HELLO WORLD
</body>
<script></script>
</html>
header.html:
<nav class="grey darken-3" role="navigation">
<div class="nav-wrapper container">
<ul class="right hide-on-med-and-down">
<li><a class="dropdown-button" href="#!" data-activates="srvDropdown">Test<i class="material-icons right">arrow_drop_down</i></a></li>
<li>{{data}}</li>
</ul>
<ul id="nav-mobile" class="side-nav">
<li>Home</li>
<li class="divider"></li>
<li>test</li>
</ul>
<i class="material-icons">menu</i>
</div>
<!-- Dropdown Structure -->
<ul id="srvDropdown" class="dropdown-content">
<li>TEST</li>
</ul>
</nav>
Angular:
var app = angular.module('app',[])
.controller('testController',function($scope){
$scope.data='test';
$scope.init = function(){
$(function () {
$('.button-collapse').sideNav();
});
}
$scope.init();
});
This is what I want: when I click the username (in header), show the sidebar. This only works out of the nav label and I must use a label. In a button not works.
HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="css/icon.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="css/materialize.min.css">
<title>Dashboard</title>
</head>
<body>
<ul id="side-setting" class="side-nav">
<li>ver perfil</li>
<li>editar perfil</li>
<li>cerrar sesion</li>
</ul>
<nav class="teal" role="navigation">
<div class="nav-wrapper container-fluid">
<ul class="hide-on-med-and-down">
<li>Inicio</li>
<li>Grupos</li>
</ul>
<ul class="right hide-on-med-and-down">
<li>
username
</li>
</ul>
</div>
</nav>
here
<button class="btn" data-activates="side-setting" class="button-coll">sidenav</button>
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/materialize.min.js"></script>
<script src="js/init.js"></script>
</body>
</html>
init.js code
(function($){
$(function(){
$('select').material_select();
$('.button-collapse').sideNav();
$('.parallax').parallax();
}); // end of document ready
})(jQuery); // end of jQuery name space
how I add this sidebar? I want this float to the right when I click in a button or username that is positioned in header (nav)
I am trying to use the angular-tour plugin to give a short tour of a sites functionality. I would like the tool tips to pop on each icon found in the horizontal navbar. The navbar is a view and even though I have included the required scripts etc in the index.html, it is just rendering text, and that is also being cut off by the main view. This makes sense but how can I fix this?
I have also included angular-tour in angular.module. I appreciate any help.I have also included a screenshot of what it looks like currently (the plain text "Highlighted"). I am just trying to implement the example from http://daftmonk.github.io/angular-tour/ to my application before editing.
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Scrummage</title>
<link rel="stylesheet" href="../bower_components/normalize.css/normalize.css">
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet" type="text/css"/>
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="./css/main.css">
<link href="../bower_components/angular-tour/dist/angular-tour.css" rel="stylesheet" type="text/css"/>
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/angular-route/angular-route.js"></script>
<script src="../bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="../bower_components/angular-drag-and-drop-lists/angular-drag-and-drop-lists.js"></script>
<script src="../bower_components/angular-bootstrap/ui-bootstrap.js"></script>
<script src="../bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="../bower_components/angular-ui-modal/angular-ui-modal.js"></script>
<script src="../bower_components/angular-charts/dist/angular-charts.js"></script>
<script src="../bower_components/d3/d3.js"></script>
<script src="./js/app.js"></script>
<script src="./js/services/utils.js"></script>
<script src="./js/controllers/signin/signin.js"></script>
<script src="./js/controllers/storyBoard/storyBoard.js"></script>
<script src="./js/controllers/analytics/analytics.js"></script>
<script src="./js/controllers/featureSetup/featureSetup.js"></script>
<script src="../bower_components/jquery/jquery.js"></script>
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/angular-tour/dist/angular-tour-tpls.min.js"></script>
</head>
<body ng-app="scrummage">
<div ui-view
></div>
</body>
</html>
navbar.html:
<div class="sidebar-nav">
<ul>
<li><i class="grow fa fa-gear nav-list-icon"></i>
<tour step="currentStep">
<span tourtip="tip 1"> Highlighted </span>
<span tourtip="tip 2"> Elements </span>
<input tourtip="You can use it as an attribute on your element" />
<span tourtip="Full options"
tourtip-step="3"
tourtip-next-label="Next"
tourtip-placement="right"
tourtip-offset="60">Full options</span>
</tour>
</li>
<div id= "analyticsModal" ng-controller='analyticsCtrl'>
<li><i class="grow fa fa-area-chart nav-list-icon"></i></li>
<div modal="showModal" close="cancel()" ng-include="'../js/controllers/analytics/analytics.html'"></div>
</div>
<div id= "featureSetupModal" ng-controller='featureSetupCtrl'>
<li><i class="grow fa fa-plus"></i></li>
<div class="featureModal" modal="showModal" close="cancel()" ng-include="'../js/controllers/featureSetup/featureSetup.html'"></div>
</div>
<li><i class="grow fa fa-sign-out"></i></li>
</ul>
</div>
I figured out what I was doing wrong. Basically, the view that the screenshot above shows is from a view that was included in another view, and I missed having the:
$scope.currentStep = -1;
in the parent view scope.
I'm using Zurb's Foundation, attempting to build a FAQ page using the accordion js. But it's not working and I have no idea why. All the js files are in the js folder. Here's my whole page:
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/app.css">
<script src="js/vendor/modernizr.js"></script>
</head>
<body>
<div class="row row-padding">
<div class="small-12 columns">
<h1>FAQ:<h1>
</div>
</div>
<div class="row row-padding small-12">
<ul class="accordion" data-accordion>
<li class="accordion-navigation">
Question
<div id="panel13a" class="content">
Answer
</div>
</li>
</ul>
</div>
<script>
$('#myAccordionGroup').on('toggled', function (event, accordion) {
console.log(accordion);
});
</script>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.accordion.js"></script>
</body>
</html>
I'm brand new to HTML websites, so sorry if it's something stupid.
You are targeting your accordion with an id that doesn't exist in your HTML.
You'll need to add the id to your HTML like this:
<div class="row row-padding small-12">
<ul id="myAccordionGroup" class="accordion" data-accordion>
<li class="accordion-navigation">
Question
<div id="panel13a" class="content">
Answer
</div>
</li>
</ul>
</div>
Also change the order of your scripts so that your custom accordion loads after everything else.
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.accordion.js"></script>
<script>
$(document).foundation();
$('#myAccordionGroup').on('toggled', function (event, accordion) {
console.log(accordion);
});
</script>
Here is a working CodePen: http://codepen.io/anon/pen/jPmRyB
You forgot about $(document).foundation();
http://foundation.zurb.com/docs/javascript.html - Initialize Foundation