I am trying to use Angular-Foundation-http://pineconellc.github.io/angular-foundation/ but it does not seem to be working. The sample itself is what I am testing (after I tried it on my own app, and it failed there also.)
Here is the plunker - http://plnkr.co/edit/?p=preview
The problem is when you click the hamburger menu icon it does not display the menu. I am not sure even how to debug the problem to figure out what is wrong. I do know if i remove the mm.foundation service it will begin to work, but then it is only foundation, no more angular directives.
Thanks!
More information found in plunker:
HTML:
<div ng-controller="OffCanvasDemoCtrl">
<div class="off-canvas-wrap">
<div class="inner-wrap">
<nav class="tab-bar">
<section class="left-small">
<a class="left-off-canvas-toggle menu-icon" ><span></span></a>
</section>
<section class="middle tab-bar-section">
<h1 class="title">OffCanvas</h1>
</section>
<section class="right-small">
<a class="right-off-canvas-toggle menu-icon" ><span></span></a>
</section>
</nav>
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li>Left Sidebar</li>
</ul>
</aside>
<aside class="right-off-canvas-menu">
<ul class="off-canvas-list">
<li>Right Sidebar</li>
</ul>
</aside>
<section class="main-section">
<div class="small-12 columns">
<h1>How to use</h1>
<p>Just use the standard layout for an offcanvas page as documented in the foundation docs</p>
<p>As long as you include mm.foundation.offcanvas it should simply work</p>
</div>
</section>
<a class="exit-off-canvas"></a>
</div>
</div>
</div>
Javascript:
angular.module('plunker', ['mm.foundation']);
angular.module('foundationDemoApp').controller('OffCanvasDemoCtrl', function ($scope) {
});
Related
I am playing around with this bootstrap template ( github, emptypage code which I use ) and mostly just interested in the sidebar. However I cant seem to get scrollspy working on it in case the side menu gets too long. This is what I have:
<div class="col-md-3 left_col">
<div class="left_col scroll-view">
<div class="navbar nav_title" style="border: 0;">
<i class="fa fa-cogs"></i> <span>Engine of Travel</span>
</div>
<div class="clearfix"></div>
<!-- menu prile quick info -->
<div class="profile">
<div class="profile_pic">
<img src="images/img.jpg" alt="..." class="img-circle profile_img">
</div>
<div class="profile_info">
<span>Welcome,</span>
<h2>User</h2><br/>
</div>
</div>
<!-- /menu quick info -->
<br/>
<!-- sidebar menu -->
<div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
<div class="menu_section">
<h3>Side Side</h3>
<ul class="nav side-menu">
<li><a><i class="fa fa-flag"></i> Sidething <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu" data-spy="scroll" data-target="#child_menu" style="display: none">
<li>Option 2
</li>
<li>Option 3
</li>
...
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
Javascript:
<script type="application/javascript">
$("#child_menu").scrollspy();
</script>
The menu generated displays elements that can fit in the screen and after that 'breaks' as you can see in the image. WHat would be the best way to get scroll to work.
I am using jQuery.LocalScroll plugin to allow my website visitors to navigate my site with a smooth scrolling effect. It's working great with original header menu. But I am trying to function with cloned header. Here is the code:
$('.sf-menu').localScroll({lazy: true});
if($('header.header-sticky').length == 0) {
$('[data-sticky-header="true"]').before($('[data-sticky-header="true"]').clone().addClass("header-sticky"));
}
An here is the HTML Markup
<header class="op_style" data-sticky-header="true">
<div class="clearfix header-desktop">
<div class="large-3 medium-3 columns">
<div class="site-logo">
<h1>Logo</h1>
</div>
</div>
<div class="large-9 medium-9 columns">
<nav class="main-nav">
<ul id="menu-for-one-page-portfolio" class="sf-menu right">
<li>Home</li>
<li>Services</li>
</ul>
</nav>
</div>
</div>
</header>
Try to use .clone(true) - it clones an element with all event handlers to it
I'm trying to set up the JQueryUI Accordion for my webpage. I have it working for the most part, but it seems to be excluding some text that I intended to include under one of the headers.
The text "Office for Macs" and the link below it should be under the "Remote Access Support" header, but it seems to be showing up outside of the Accordion.
I've tried changing the header option several times to no avail. Here's what I have now:
HTML:
<div class="category-tree">
<section class="category">
<h2>
Application Support
</h2>
<i class="category-empty">
empty
</i>
</section>
<section class="category">
<h2>
Mac Support
</h2>
<i class="category-empty">
empty
</i>
</section>
<section class="category">
<h2>
Windows Support
</h2>
<i class="category-empty">
empty
</i>
</section>
<section class="category">
<h2>
Mobile Device Support
</h2>
<i class="category-empty">
empty
</i>
</section>
<section class="category">
<h2>
Remote Access Support
</h2>
<section class="section">
<h3>
Office for Windows
</h3>
<ul class="article-list">
<li >
How to delegate access to your mailbox
</li>
</ul>
</section>
<section class="section">
<h3>
Office for Macs
</h3>
<i class="section-empty">
empty
</i>
</section>
</section>
</div>
And here is the Javascript:
$(function() {
$( ".category-tree").accordion({
collapsible: true,
active: false,
header: 'h2'
});
});
I created a Fiddle that includes all relevant code here: http://jsfiddle.net/ukq45wts/
Any thoughts on how I can tell JQueryUI to include the "Office for Macs" text under the last header?
Thank you in advance!
remove <section class="section"> above the 'Office For Macs' and move within the containing like so:
<section class="section">
<h3>
Office for Windows
</h3>
<ul class="article-list">
<li >
How to delegate access to your mailbox
</li>
<h3>
Office for Macs
</h3>
<li class="section-empty">empty</li>
</ul>
</section>
</div>
fiddle: http://jsfiddle.net/ukq45wts/3/
What is <i class="section-empty">?
It should be <li class="section-empty">
You need to extend the under Remote Access Support in order to include Office for Mac sunder it.
HTML Markup
<div class="category-tree"><section class="category">
<h2>Application Support</h2>
<i class="category-empty">empty</i>
</section>
<section class="category">
<h2>Mac Support</h2>
<i class="category-empty">empty</i>
</section>
<section class="category">
<h2>Windows Support</h2>
<i class="category-empty">empty</i>
</section>
<section class="category">
<h2>Mobile Device Support</h2>
<i class="category-empty">empty</i>
</section>
<section class="category">
<h2>Remote Access Support</h2>
<section class="section">
<h3>
Office for Windows
</h3>
<ul class="article-list">
<li >
How to delegate access to your mailbox
</li>
</ul>
<section class="category">
<h3>
Office for Macs
</h3>
<i class="section-empty">empty</i>
</section>
</section>
</section>
</div>
Working Fiddle
UPDATE
In Jquery you are specifying that the header for the accordion will be a h2 tag. The accordion control will then directly check for the content in the tag which is just below it as a sibling. Hence If you need to add multiple sections (In case of remote access support) you need to wrap it up in another section ( I named it multiple sections) and then define it.
So the HTML code will look like:
<div class="category-tree">
<section class="category">
<h2>Application Support</h2>
<i class="category-empty">empty</i>
</section>
<section class="category">
<h2>Mac Support</h2>
<i class="category-empty">empty</i>
</section>
<section class="category">
<h2>Windows Support</h2>
<i class="category-empty">empty</i>
</section>
<section class="category">
<h2>Mobile Device Support</h2>
<i class="category-empty">empty</i>
</section>
<section class="category">
<h2>Remote Access Support</h2>
<section class="multipleSections">
<section class="section">
<h3>
Office for Windows
</h3>
<ul class="article-list">
<li> How to delegate access to your mailbox
</li>
</ul>
</section>
<section class="section">
<h3>
Office for Macs
</h3>
<i class="section-empty">empty</i>
</section>
</section>
</section>
</div>
Working Fiddle - Updated
Im making an 'interactive menu' that moves along with user clicks.
Im wondering if there is a way to include html templates in ng-switch,
since all the logic is different in each 'switch' - it will result in huge html files.
<div class="content" ng-switch on="selection">
<div ng-switch-when="1" >
<h1>1</h1>
</div>
<div ng-switch-when="2">
<h1>2</h1>
</div>
</div>
Use ngInclude:
<div class="content" ng-switch on="selection">
<div ng-switch-when="1" >
<ng-include src="'template1.html'"></ng-include>
</div>
<div ng-switch-when="2">
<ng-include src="'template2.html'"></ng-include>
</div>
</div>
Note: Dont forget to use single quotes wrapped inside the double quotes if you are hard-coding the path.
You should be able to do it with ng-include directive :
<div class="content" ng-switch on="selection">
<ng-switch-when="1" ng-include="//TEMPLATE PATH">
<ng-switch-when="2" ng-include="//TEMPLATE 2 PATH">
</div>
**I used ng-Include this way.**
<!-- Main content -->
<div class="row">
<!-- right col -->
<section class="col-lg-12">
<ul class="nav nav-tabs responsive ui-tabbed" id="myTab">
<li class="active">
<a data-ng-click=' main.active.tab = "tab-1" '>Tab 1</a>
</li>
</ul>
<!-- end responsive tabs -->
<div class="tab-content ui-tabbed-contents responsive">
<div data-ng-switch = " main.active.tab ">
<div data-ng-switch-when='tab-1' >
<ng-include src="'tab-one.html'" ></ng-include>
</div>
</div>
</div>
</div>
<!-- end main tabs container -->
</section>
Merged with scrollTo/localscroll.js not working at all.
hey I was just trying to use this javascript plugin but it won't work for some reason..
html:
<div id="container">
<div id="menu">
<nav>
<ul>
<li>HOME</li>
<li>GIGS</li>
<li>TOP10</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
<div id="content"><!-- content -->
<div id="home">home</div>
<div id="gigs">gigs</div>
<div id="top10">top10</div>
<div id="contact">contact</div>
</div><!-- end of content -->
</div>
js:
$(document).ready(function() {
$('#menu').localScroll();
});
you can see it live here: www.djhighpotentials.nl