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();
});
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>
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 wrote the following AngularJS routing code and it's not working:
/// <reference path="C:\Users\elwany\documents\visual studio 2015\Projects\spaapplication\spaapplication\scripts/angular.js" />
var myApp = angular.module("myApp", ['ngRoute']);
myApp.config(['$routeProvider',
function($routeProvider){
$routeProvider.
when('/add',{templateurl:'Views/add', controller:'addController'}).
when('/edit',{templateurl:'Views/edit', controller:'editController'}).
when('/delete',{templateurl:'Views/delete', controller:'deleteController'}).
when('/home',{templateurl:'Views/home', controller:'homeController'}).
otherwise({redirectTo :'/home'});
}]);
myApp.controller('addController',function($scope){
$scope.message="in Add view Controller";
});
myApp.controller('editController',function($scope){
$scope.message="in edit view Controller";
});
myApp.controller('deleteController',function($scope){
$scope.message="in delete view Controller";
});
myApp.controller('homeController',function($scope){
$scope.message="in home view Controller";
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title></title>
<meta charset="utf-8" />
<link href="Content/bootstrap.css" rel="stylesheet" />
<script src="scripts/jquery-1.9.0.js"></script>
<script src="scripts/bootstrap.js"></script>
<script src="scripts/angular.js"></script>
<script src="scripts/angular-route.js"></script>
<script src="demo.js"></script>
</head>
<body>
<div class="container">
<nav style="background-color:darkslateblue" role="navigation" class="nav navbar-inverse">
<ul class="nav navbar-nav">
<li class="active">home</li>
<li>add</li>
<li>edit</li>
<li>delete</li>
</ul>
</nav>
<div ng-view>
</div>
<h3 style="font-size:small" class="text-center text-info">developed by Mr-Mohammed Elwany</h3>
</div>
</body>
</html>
And another 4 html <div> in separated 4 HTML pages (add, edit, delete, home) implement this code:
<div class="row jumbotron">
<h2>{{message}}</h2>
</div>
The references should come inside the <body> tag , also you are missing the reference for angular-route
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
</head>
DEMO APP
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.
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