We Keep Coding

toggleClass from within the fully outed menu

I can't seem to make it work. when i click on the menu icon, the menu comes out ok
and it closes when i click again.
but how do i toggle when i click and a url within the menu itself?
I tried adding a class to each li and adding the clas on the function i tried meny thing. maybe its because i have angular on the li?
<div class="icomMenu"></div>
<navbar class="">
<nav class="nav">
<ul>
<li><a ui-sref="index" ui-sref-active="active">Home</a></li>
<li><a ui-sref="About" ui-sref-active="active">About</a></li>
<li><a ui-sref="Contact" ui-sref-active="active">Contact</a></li>
<li><a ui-sref="Nested" ui-sref-active="active">Nested</a></li>
</ul>
</nav>
</navbar>
$(document).ready(function() {
$(".icomMenu").click(function() {
$("navbar").toggleClass("NavOut");
});
});
thank you.

Since I see you are using angular I would recommend going against using jQuery and instead using component/view controller to handle this. You can for example add ng-class="{'NavOut': vm.menuVisible}" to your navbar HTML element and then instead of using ui-sref on the li elements you can use ng-click="vm.onMenuItemClick("About")" then in controller you can inject $state and create method onMenuItemClick(link) that will set this.menuVisible = false and go to another route with this.$state.go(link).
EDIT:
Template:
<div class="icomMenu"></div>
<navbar ng-class="{'NavOut: vm.menuVisible}">
<nav class="nav">
<ul>
<li><a ng-click="vm.onMenuClick('Home')" ui-sref-active="active">Home</a></li>
</ul>
</nav>
</navbar>
Controller:
constructor($state) {
this.$state = $state;
}
this.onMenuClick(link) {
this.$state.go(link);
this.menuVisible = false;
}
Something like that, I hope you get the idea. The navbar seems like the ideal candidate for creating an component then use it's controller to handle the logic above.

jquery active menu lost after clicking on link

So I have a simple menu and I'm trying to remove/add an active class to the clicked menu item.
$(function(){
$('ul.navbar-nav li').click(function(){
$('ul.navbar-nav li').removeClass('active');
$(this).addClass('active');
});
});
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>work</li>
<li>methods</li>
<li>blog</li>
<li>team</li>
<li>contact</li>
</ul>
The issue I'm having is this works but since going to a new page refreshes the site once I'm in the new page the active class always goes back to the initial active class in my HTML. I feel like I've done this a number of times and never had this issue. Maybe I'm missing something.

As you redirecting new page on each link click, so dynamically added active class is removed on page load. You can do it like following.
Remove the active class from home menu and add specific href to this like below.
<li class="active">Home</li>
jQuery
$(function () {
$('ul.navbar-nav > li > a').each(function () {
if (window.location.pathname.indexOf($(this).attr('href')) > -1) {
$(this).closest('li').addClass('active');
return false;
}
});
});

There is more than just one file in your project, right?
I would copy the whole ul navbar and paste it into every single page. All you have to do after that, is to put the active class on the respective li element.

Update: None of your li's should have an active class and then add the active class on page load.
/menu.html
<ul class="nav navbar-nav">
<li class="home">Home</li>
<li class="work">work</li>
<li class="methods">methods</li>
<li class="blog">blog</li>
<li class="team">team</li>
<li class="contact">contact</li>
</ul>
js could be something like this
var page = window.location.pathname.split('/')[1];
$('li.' + page).addClass('active');

You can try following things
$(function()
{
$('ul.navbar-nav li').click(function(event)
{
$('ul.navbar-nav li').removeClass('active');
$(this).addClass('active');
event.preventDefault();
});
});
Prevent default would avoid anchor tag tag default action to reload the page. So this should work.
Or if you do not need to go to another page then you can use div instead anchor tag.You can simulate anchor tag behaviour using :hover css selector.
div:hover
{
color:blue;
cursor:pointer;
font-style:underline;
}

This seems to be working:
HTML:
<ul class="nav navbar-nav">
<li id="liHome">home</li>
<li id="liWork">work</li>
<li id="liMethods">methods</li>
<li id="liBlog">blog</li>
<li id="liTeam">team</li>
<li id="liContact">contact</li>
</ul>
The event handler:
$('ul.navbar-nav li').click(function(){
window.sessionStorage.activeMenuItem = this.id;
});
When the page has loaded:
if (window.sessionStorage.activeMenuItem) {
$("#"+sessionStorage.activeMenuItem).addClass('active');
}
From https://developer.mozilla.org/en/docs/Web/API/Window/sessionStorage:
A page session lasts for as long as the browser is open and survives over page reloads and restores.
One problem with this solution is that you cannot open links in a new window, since:
Opening a page in a new tab or window will cause a new session to be initiated, which differs from how session cookies work.

You're likely in one of three scenarios:
A) You have a collection of static HTML pages with unique content.
B) You're using a server-side language and doing some basic includes
C) You're using a framework with routing logic.
A If you have two pages both containing the menu code, then it's as simple as moving the default active class.
<!-- Home -->
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>work</li>
…
</ul>
<!-- Work -->
<ul class="nav navbar-nav">
<li>Home</li>
<li class="active">work</li>
…
</ul>
B Assuming you're using PHP then something like the following is an easy way to pass this info around:
// menu.php
<ul class="nav navbar-nav">
<li <?php if($page = 'home'){ echo 'class="active"' } ?>>Home</li>
…
</ul>
// home.php
<?php
$page = 'home';
include(menu.php);
…
C This will largely depend on the framework you're using, but most will have template helpers that can access the current route, something like:
<ul class="nav navbar-nav">
<li <% is_route('home') class="active" %>>Home</li>
But adding classes after DOM load with javascript or using session or cookie states is likely over the top.

Bootstrap Navtabs as Buttons

I'm new to js/bootstrap and am reading about it from the official website.
I'm having problem with the nav-tabs. In the official example, they are taking the user to some other url, like this:
<ul class="nav nav-tabs">
<li class="active">Search</li>
<li>Click</li>
<li>Play</li>
<li>Hours Viewed</li>
</ul>
But my requirement is to call some js method on click on these tabs.
Is it possible using nav-tabs ? or do I have to use buttons ?

You can change the native comportement of the <a> with JS. For example, if you set something like this, the link will execute your doSomething function but not link you to another page :
click me
To go further, if you want to better separate the JS and the HTML (good practice), avoid the inline-javascript and prefer the use of listener : https://developer.mozilla.org/fr/docs/DOM/element.addEventListener

The simplest way I can think of is to add an onclick attribute for each <a> tag...
Maybe something like this...
<ul class="nav nav-tabs">
<li><a onclick="clickFirst();" href="#">Click</a></li>
<li><a onclick="clickSecond();" href="#">Play</a></li>
<li><a onclick="clickThird();" href="#">Hours Viewed</a></li>
</ul>
and add this in your script tag...
function clickFirst() {
alert('First anchor clicked...');
}
function clickSecond() {
alert('Second anchor clicked...');
}
function clickThird() {
alert('Third anchor clicked...');
}

You can use bootstrap javascript. And this one is about tab.
Here is a sample code:
$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})

Click event on jQuery "fly out" menu

I'm trying to create a click event on a jQuery fly out menu. Once you hover to the 2nd or 3rd layer is where I need the event to take place.
I'm also new to jQuery so forgive me if the code isn't up to standards.
I have a sample here: http://jsbin.com/makoreficexe/1/edit

If I understood it right, you just want to have a click event inside the sub items of menu.
To do that, you need to find a way to identify the tag that was clicked, and there are a lot of ways.
I'll show you just 3 examples, but there are a lot...
1 - you can have a class for every tag that you want to click.
HTML - specifying a class
<li>Home
<!-- This is the sub nav -->
<ul class="listTab">
<li><a class="About" href="#">About This Template Here</a></li>
<li><a class="Flash" href="#">Flash</a></li>
<li><a class="Jquery" href="#">jQuery</a></li>
</ul>
</li>
Js
$(document).ready(function($) {
$(".About").click(function(){
alert("clicked")
}),
$(".Flash").click(function(){
alert("clicked")
})
});
The problem in this case is that is difficult to manage a lot of classes.
2 Using Id's
<li>Home
<!-- This is the sub nav -->
<ul class="listTab">
<li><a id="About" href="#">About This Template Here</a></li>
<li><a id="Flash" href="#">Flash</a></li>
<li><a id="Jquery" href="#">jQuery</a></li>
</ul>
</li>
JS
$(document).ready(function($) {
$("#About").click(function(){
alert("clicked")
}),
$("#Flash").click(function(){
alert("clicked")
})
});
The problem is that could be harder to manage a lot of ids as well. but i guess that is the better approach for your simple scenario
3 - You can get it using nth child. the problem is that if you change the structure of your html file, it can "break" your jquery selector.
$("#navList li:nth-child(2)").click(function(e){
alert(e);
})
Here is a list with a lot of types of jquery selector .
http://www.tutorialspoint.com/jquery/jquery-selectors.htm
Hope it helps.

$('.listTab a').click(function(e){...});

One approach would be to add "data" attributes to your a tags (http://api.jquery.com/data/).
For example, in the html for your first flyout:
<li><a data-whatever="This is in data-whatever" href="#">About This Template Here</a></li>
And in your jQuery ready bit, add this:
$('.listTab li a').click( function (e){
e.preventDefault(); // this prevents the href="#" in your a tag from firing
console.log($(this).data('whatever'));
});
You can then use the 'data-whatever' attribute in your click function to trigger what needs to happen.
http://jsbin.com/budoqizumuja/3/edit?html,css,js,console,output

Using JQuery Tabs as Main Navigation

A JQuery UI Tab that inherits from a JQuery Theme and redirects (HTTP GET) to a new page is the goal.
I'm 90% there using the following code, but the compromise has been to put the target URL in the anchor TITLE (the Tab widget expects the HREF to be a local page selector).
This works, but for SEO purposes I'd like the HREFs to be actual URLs to ensure search engines will follow and index them.
Thoughts?
<script>
$(function () {
$("#tabs").tabs();
$(".nav-link")
.click(function () {
window.location = this.title;
});
});
</script>
<div id="tabs">
<ul>
<li>Home</li>
<li>Contact Us</li>
</ul>
<div id="tabs-1"></div>
<div id="tabs-2"></div>
</div>

If you make sure that you follow certain HTML structure, you can do something like,
<div id="tabs">
<ul>
<li>Home</li>
<li>Contact Us</li>
</ul>
<!-- Make sure that your DIVs are called 'tabs-0', 'tabs-1' etc. 'tabs-0' will be referred by first link, tabs-1 will be referred by second link, so on and so forth. -->
<div id="tabs-0"></div>
<div id="tabs-1"></div>
</div>
If your HTML structure looks like this, you can do:
<script>
$(function() {
var tabId = '#tabs';
$(tabId + ' a').each(
function(index, val)
{
$(this).attr('href', tabId + '-' + index);
}
);
$("#tabs").tabs();
});
</script>
Now, search engine will see those links where as user will see your regular tab behavior.

I'm confused as to why this must be done through jquery. If you just want a Http Get redirect, that's what <a href=""> tages were designed to do.