We Keep Coding

Active navigation class based on current URL problem

I have the following HTML menu:
<div class="nav">
<ul>
<li class="first">Home</li>
<li>Something</li>
<li>Else</li>
<li class="last">Random</li>
</ul>
<ul style="float:right;">
<li class="first last">News</li>
</ul>
</div>
</div>
And then I have this code:
jQuery(function($){
var current = location.pathname;
$('.nav ul li a').each(function(){
var $this = $(this);
// if the current path is like this link, make it active
if($this.attr('href').indexOf(current) !== -1){
$this.addClass('active');
}
})
})
The code is working great, but it has a problem. For example, if I see the Home page (www.example.com) then all of the menu links receives the active class. Another problem would be that it works great for www.example.com/something but it doesn't keep it active if I go to www.example.com/something/1 etc. Any idea how to fix this? Thanks in advance!

For home page add extra class 'default' in list like.
<li class="first default">Home</li>
jquery code.
jQuery(function($){
var current = location.pathname;
console.log(current);
//remove the active class from list item.
$('.nav ul li a').removeClass('active');
if(current != '/'){
$('.nav ul li a').each(function(){
var $this = $(this);
// if the current path is like this link, make it active
if(current.indexOf($this.attr('href')) !== -1 && $this.attr('href') != '/'){
$this.addClass('active');
}
})
}else{
console.log('home');
$('.default a').addClass('active');
}
})

Use the below jQuery code to add active class:
$(function() {
var pgurl = window.location.href.substr(window.location.href
.lastIndexOf("/") + 1);
$(".nav ul li a").each(function() {
if ($(this).attr("href") == pgurl || $(this).attr("href") == '')
$(this).addClass("active");
})
});

By using indexOf(), you are checking if the link's target is the same the current location.
What you want is not "the same URL" but "the same pattern", so I would tend to use a regular expression :
let re = new RegExp("^" + $(this).attr("href") + ".*");
if (re.test($current)) {
$(this).addClass("active");
}
Note that this would force you to create a separate solution for your link to the main page, else it would always be active.

preventDefault on lists that have a link ánd another list

I have a website where I am not able to change the HTML, I can only inject JavaScript and CSS. The website has a dropdown menu that doesn't work properly on Android. The parent menu is also a link, and when people click it they are taken to the link on the parent instead of opening the child/submenu.
The HTML (simplified)
<ul id="menu">
<li>
Parent menu ▼
<ul>
<li>Submenu link</li>
<li>Submenu link</li>
<li>Submenu link</li>
</ul>
</li>
<li>
Parent menu link
</li>
</ul>
And I have this jQuery:
var topmenuclicked == 0;
$("#menu > li a").click(function(event){
event.preventDefault();
if (topmenuclicked == 0) {
topmenuclicked = 1;
} else {
topmenuclicked = 0;
window.location.href = $(this).attr('href');
}
});
It's a bit messy and not the best way to solve this, but my main problem is with selecting only the a elements that have a submenu.
With the code as it is now I have to click all parent menu links twice and I'm not sure why.
So I need to be able to say something like $("#menu > li:has(ul) a) but I don't believe that works.

Use children("ul").length of li element
$("#menu > li a").click(function(event){
//use $(this).parent().children("ul").length
if($(this).closest("li").children("ul").length) {
event.preventDefault();
// the clicked on <li> has a <ul> as a direct child
}
if (topmenuclicked == 0) {
topmenuclicked = 1;
} else {
topmenuclicked = 0;
window.location.href = $(this).attr('href');
}
});

the previous answer won't work, cause submenu is not inside of A tag, but the rest is good.
Here is how can you fix it:
$('#menu > li a').on('click', function (event) {
if ($(this).next('ul').length) {
event.preventDefault();
// Parent link clicked
} else {
// Nested link clicked
// The ELSE part can be removed if custom logic is not needed
}
});
Another option can be:
$('#menu > li > a').on('click', function (event) {
event.preventDefault();
// Parent link clicked
});
$('#menu > ul a').on('click', function (event) {
// Nested link clicked
});

You can use parents for this. Also, use .on instead of .click
$('#menu').on('click', 'li a', function(event){
event.preventDefault();
var topmenuclicked = 0;
if($(this).parents('ul').length == 1) {
topmenuclicked = 1;
}
console.log('topmenuclicked -> ', topmenuclicked)
// do your stuff here
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul id="menu">
<li>
Parent menu ▼
<ul>
<li>Submenu link</li>
<li>Submenu link</li>
<li>Submenu link</li>
</ul>
</li>
<li>
Parent menu link
</li>
</ul>

put > before a. See below
var topmenuclicked == 0;
$("#menu > li > a").click(function(event){
event.preventDefault();
if (topmenuclicked == 0) {
topmenuclicked = 1;
} else {
topmenuclicked = 0;
window.location.href = $(this).attr('href');
}
});

In part because of #Love-Kesh his solution I came up with this that seems to be working.
$("#menu > li a").click(function(event){
// save parent in variable
var clickedlinkparent = $(this).parent();
// check if parent has any ul element as children
if (clickedlinkparent.children('ul').length) {
// prevent the link from opening
event.preventDefault();
// if link has not been clicked, do nothing
if (topmenuclicked == 0) {
topmenuclicked = 1;
// if link has already been clicked, go to href
} else {
topmenuclicked = 0;
window.location.href = $(this).attr('href');
}
}
});

Onepage navigation script needs to troggle / close on click on link

I have an onepage site with a responsive navigation script. Works great.
When you click on the Navigation button the "subnav" links show up. (These are anchors).
I need to toggle/close the subnav when clicking on a link/anchor.
Made an example here:
https://jsfiddle.net/fourroses666/jcj0kph2/
The script:
$(document).ready(function(){
$('nav').prepend('<div class="responsive-nav" style="display:none">Navigation</div>');
$('.responsive-nav').on('click',function(){
$('nav ul').slideToggle()
});
$(window).resize(function(){
if ($(window).innerWidth() < 768) {
$('nav ul li').css('display','block');
$('nav ul').hide()
$('.responsive-nav').show()
} else {
$('nav ul li').css('display','inline-block');
$('nav ul').show()
$('.responsive-nav').hide()
}
});
$(window).resize();
});

You may tidy up your code a bit by doing the prepend and attaching the click handler all in one statement as below.
var $nav = $('#nav').
prepend('<div class="responsive-nav" style="display:none">Navigation</div>').
on('click', '.responsive-nav, ul a', function() {
$nav.find('ul').slideToggle()
});
Updated fiddle
Note: I used $nav.find('ul') to target the specific nav in question as opposed to other navs that may exist on the page.
Edit: To make it not disappear when on >= 768, replace $nav.find('ul').slideToggle() with the following.
if (evt.target.tagName === 'A' && $(window).innerWidth() >= 768) {
return;
}
$nav.find('ul').slideToggle()
Updated fiddle

I'm assuming you want the Nav to hide when you click on a link?
/* This executes when the nav or li (inside #nav) is pressed */
$('#nav').on('click', 'li, .responsive-nav', function(){
$('nav ul').slideToggle()
});
https://jsfiddle.net/jcj0kph2/1/

Changing js functionality of themeforest theme

I purchased a theme off of http://themeforest.net and now the them was taken off.
The original theme functionality was to have all of the links pages inside of their own divs in the index page however I changed the functionality so that each link is on its own controller since I am using Codeigniter.
What I want to happen is when a new link is clicked it still rolls up the content div and goes to the clicked link and then rolls down the content of that page. As of right now it rolls up ALL the way up the page and doesn't even load the new page. The commented section of code is what the original code was from the template.
/*****************************************************
MENU TRANSITION EFFECTS
******************************************************/
$("#menu1 ul li a").click(function(e){
e.preventDefault();
$('#container').animate({top:'-500px'},500,'easeInQuart');
/*
var id = $(this).attr("href");
if(id == aid) return false;
$('#menu1 ul li a').removeClass('a');
$(this).addClass('a');
if($("#container > div:visible").size() > 0) {
$("#container > div:visible").animate({top:'-500px'},500,'easeInQuart',function(){ $("#container > div:visible").css({display:'none',top:'-500px'}); $('#container > div#' + id).css({display:'block'}).delay(400).animate({top:'500px'},800,'easeOutQuart');
$(function() {
$('.scroll').jScrollPane();
});
});
} else {
$('#container > div#' + id).css({display:'block'}).animate({top:'500px'},200,'easeOutQuart');
}
aid = id;
return false;
*/
});
Edit: I tried it on my regular site and for some reason it wasn't working the same. Here's the template. I uploaded it to one of my other sites for display. Keep in mind the difference is that each link is a new controller and each div is a new view. Does that explain any further the differences between the original template and what I"m trying to accomplish.
http://www.justmyfiles.me/
Does anybody have any ideas?

The "transition" javascript code could look like :
$("#menu1 ul li a").click(function(e){
var a = this;
e.preventDefault();
$('#container').animate({top:'-500px'},500,'easeInQuart',function() {
location.href = a.href;
});
});
And the document ready code :
$(document).ready(function() {
$('#container').animate({top:'0px'},500,'easeInQuart');
});
/*CSS*/
#container { top: -500px; }

Why doesn't my jQuery accordion menu stick?

When a user clicks the Accordion Menu button it usually works. But, about 1 out of 10 times the animation doesn't stick and goes back to either expanded or collapsed, depending on what state it started at. I've copied the scripts from other places, but they seem simple enough.
HTML:
<ul id="system-nav">
<li><div>Umbrella</div>
<ul>
<li>Admin</li>
<li>Dashboard</li>
<li>Daylight</li>
</ul>
</li>
</ul>
Like I've said, I've tried several different versions of the same thing. These were just taken from random places and I've only edited them slightly. All of them do the same thing.
$("#system-nav > li > div").click(function(){
if(false == $(this).next().is(':visible')) {
$('#system-nav ul').slideUp(300);
}
$(this).next().slideToggle(300).delay(250);
});
$('#system-nav ul:eq(0)').hide();
$(document).ready(function() {
$('#system-nav li div').click(function() {
$('#system-nav ul').slideUp('slow');
$(this).next().slideDown('slow');
});
$("#system-nav ul").hide();
});
$(document).ready(function(){
$('#system-nav li div').click(function() {
$(this).next().slideDown('slow');
return false;
}).next().hide();
});

In the first JS sample using :visible is not the right proprety. Use :hidden instead
In the second one you're cliping it ?
In the last one you're canceling it ?
Here's a working code: http://jsfiddle.net/Q9qNw/
$("#system-nav").on("click","div",function(){
if ($(this).next().is(":hidden")) {
$(this).next().slideDown("500");
} else {
$(this).next().slideUp("500");
}
});