how add a sidebar to navbar with materialize? - javascript

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)

Related

Ng-include header with materializecss

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();
});

Custom event for Foundation 5 top bar dropdown items

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.

Can't get Zurb Foundation accordion to work

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

How to use html() to modify html in jQuery mobile page post transition

I have a two page (1 file) jQuery mobile page and I want to write some dynamic text on the second page as soon as it loads.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link href="css/codiqa.ext.min.css" rel="stylesheet">
<link href="css/jquery.mobile-1.3.1.min.css" rel="stylesheet">
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>
<script src="js/codiqa.ext.min.js"></script>
<script src="js/universal-lotto.js"></script>
</head>
<body>
<div data-role="page" data-control-title="Home" id="page1">
<div data-role="content">
<ul data-role="listview" data-divider-theme="b" data-inset="true" id=menu>
<li data-role="list-divider" role="heading">Menu</li>
<li data-theme="c">Help</li>
</ul>
</div>
</div>
<div data-role="page" data-control-title="AnotherPage" id="ViewN" data-back-btn-text="Menu" data-add-back-btn="true">
<div data-role="content">
<div data-controltype="htmlblock" id=printhere>
</div>
</div>
</div>
</body>
</html>
How can I modify the #printhere div? In the file universal-lotto.js I have the following function:
$(document).on('pageshow', '#ViewN' ,function(){
alert('hi');
$('#printhere').html('printthis');
});
The alert comes up when the second page shows but the page itself remains blank.
your lign is invalid here :
<div data-controltype="htmlblock" id=printhere>
</div>
It should be :
<div data-controltype="htmlblock" id="printhere">
</div>

mmenu not closing on link pages

I'm currently working on another mobile website which has the mmenu installed, all works fine as far as the scroll opens to show the menu, but all the menu items are external links. When I tap/click an external link the page will hyperlink to the page selected without closing the menu first. Is there anyway of making the menu close before loading the external links?
Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=yes" />
<script type="text/javascript" src="../js/jquery.mmenu.min.all.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="../css/jquery.mmenu.all.css" />
<link type="text/css" rel="stylesheet" href="../css/main.css" />
<script type="text/javascript">
$(document).ready(function() {
$("#menu").mmenu({
classes: "mm-zoom-panels",
counters: true
});
});
</script>
</head>
<body>
<div id="page"><a href="main.asp">
<img border="0" src="../images/header.png" width="100%"></a>
<div class="header">
</div>
<div class="content">
<div align="center">
</div>
</div>
<nav id="menu">
<ul>
<li>Today</li>
<li>Times</li>
<li>Settings</li>
<li>Log out</li>
</ul>
</nav>
</div>
</body>
Thanks in advance!!
try this code
$("#menu").mmenu({
classes: "mm-zoom-panels",
counters: true,
onClick: {
close: true
}
});
for more info see this:-http://mmenu.frebsite.nl/documentation/options/
thanks

Categories