We Keep Coding

Change active state on sticky navbar?

I have a website I would like to have active state links on a sticky navbar when a user scrolls to let them know the current page they are on.
I've tried numerous javascript and jQuery code, nothing happens.
Can anyone take a look at my code and tell me what I'm missing? TIA
PS tried posting the code but the webpage won't allow me.
Edit #2 this website won't allow me to post my code it keeps telling me the format is bad.
Edit# 3 finally the code is up thank you!
$(document).ready(function () {
$(document).on("scroll", onScroll);
//smoothscroll
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
$('a').each(function () {
$(this).removeClass('active');
})
$(this).addClass('active');
var target = this.hash,
menu = target;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top+2
}, 500, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
});
function onScroll(event){
var scrollPos = $(document).scrollTop();
$('main-nav a').each(function () {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
$('sticky main-nav ul li a').removeClass("active");
currLink.addClass("active");
}
else{
currLink.removeClass("active");
}
});
}
.sticky {
position: fixed;
top: 0;
left:0;
width: 100%;
background: #fff;
box-shadow: 0 2px 2px #dbdbdb;
opacity: .95;
z-index: 9999;
transition: 1s;
}
.sticky .main-nav { margin-top: 35px;}
.sticky .main-nav li a:link,
.sticky .main-nav li a:visited {
color: black;
text-decoration: none;
font-size: 90%;
border-bottom: 2px solid transparent;
transition: border-bottom 0.2s;
text-transform: uppercase;
padding: 1px;
}
.sticky .main-nav li a:hover,
.sticky .main-nav li a:active {
border-bottom: 1.5px solid black;
color: rgb(153, 153, 153);
}
.sticky .main-nav li a:link,
.sticky .main-nav li a:visited {
padding: 5px 0;
color: #555;
}
.sticky .dog-dark {
display: block;
transition: 2s;
}
.sticky .dog-white {
display: none;
}
.sticky .mobile-nav-icon i {
font-size: 225%;
color: rgb(0, 0, 0);
margin-top: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="home">
<nav>
<div class="row">
<img src="img/dog.png" alt="Logo white" class="dog-white">
<img src="img/dog_dark.png" alt="Logo dark" class="dog-dark">
<ul class="main-nav js--main-nav">
<li><a class="active" href="#home">Home</a></li>
<li>About</li>
<!-- <li>Portfolio</li> -->
<li>Services</li>
<li>Contact</li>
</ul>
<a class="mobile-nav-icon js--nav-icon"><i class="ion-navicon-round"></i></a>
</div>
</nav>

jquery toggle append remove

Here is a menu with submenu. I need that when I click on the submenu item, submenu text toggle beside menu item "Everyday". Like the image below
(function($) {
$(".menu .sub-menu li a").each(function() {
var dayName = $(this).text();
$(this).on("click", function() {
$(this).closest(".menu").children("li").children("a").append('<span class="day-name">' + dayName + '</span>');
});
});
})(jQuery);
ul {
margin: 0;
padding: 0;
list-style: none;
}
a {
text-decoration: none;
}
.menu > li {
position: relative;
}
.menu > li > a {
background-color: #eee;
color: #333;
display: inline-block;
padding: 10px 20px;
}
.menu li:hover > .sub-menu {
opacity: 1;
visibility: visible;
}
.menu .sub-menu {
position: absolute;
left: 0;
background-color: #fff;
box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2);
min-width: 200px;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease 0s;
}
.menu .sub-menu li {
}
.menu .sub-menu li a {
color: #777;
display: block;
padding: 5px 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul class="menu">
<li>
Everyday
<ul class="sub-menu">
<li>Sat</li>
<li>Sun</li>
<li>Mon</li>
<li>Tue</li>
<li>Wed</li>
<li>Thu</li>
<li>Fri</li>
</ul>
</li>
</ul>
This is what I'm trying, but its does not work.

You can use Javascript's join & jQuery's - hasClass & toggleClass methods with on('click') event like this:
See jsFiddle
or see the code snippet below:
$(function() {
$('.menu .sub-menu li a').on('click', function(e) {
$(this).toggleClass('selected');
var txt = $('#title').text();
var total_len = $('.menu .sub-menu li').length;
var count = 0;
var values = [];
$('.menu .sub-menu li a.selected').each(function(i) {
values.push($(this).text());
count++;
});
if(count == total_len) {
txt = "Every Day";
} else {
txt = "Every " + values.join(',');
}
$('#title').text(txt);
});
})
ul {
margin: 0;
padding: 0;
list-style: none;
}
a {
text-decoration: none;
}
.menu > li {
position: relative;
}
.menu > li > a {
background-color: #eee;
color: #333;
display: inline-block;
padding: 10px 20px;
}
.menu li:hover > .sub-menu {
opacity: 1;
visibility: visible;
}
.menu .sub-menu {
position: absolute;
left: 0;
background-color: #fff;
box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2);
min-width: 200px;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease 0s;
}
.menu .sub-menu li {
}
.menu .sub-menu li a {
color: #777;
display: block;
padding: 5px 10px;
}
.menu .sub-menu li a.selected {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul class="menu">
<li>
<a id="title" href="#">Every </a>
<ul class="sub-menu">
<li>Sat</li>
<li>Sun</li>
<li>Mon</li>
<li>Tue</li>
<li>Wed</li>
<li>Thu</li>
<li>Fri</li>
</ul>
</li>
</ul>

(function($) {
$(".menu .sub-menu li a").on("click", function() {
var $this = $(this);
if (this.hasAttribute("data-selected")) {
$this.removeAttr("data-selected");
} else {
$this.attr("data-selected", 'true');
}
$this.closest(".menu").find(" > li > a").html(fillButton);
});
function fillButton() {
var options = $(this).next(".sub-menu").find("li a");
if (options.filter("[data-selected]").length > 0) {
if (options.length === options.filter("[data-selected]").length) {
return "Every day";
} else {
var html = "Every ";
options.filter("[data-selected]").each(function(i, el) {
html += (i > 0) ? ", " + $(el).text() : $(el).text();
});
return html;
}
} else {
return "Never";
}
}
})(jQuery);
ul {
margin: 0;
padding: 0;
list-style: none;
}
a {
text-decoration: none;
}
a[data-selected] {
background: #f0f0f0;
}
.menu > li {
position: relative;
}
.menu > li > a {
background-color: #eee;
color: #333;
display: inline-block;
padding: 10px 20px;
}
.menu li:hover > .sub-menu {
opacity: 1;
visibility: visible;
}
.menu .sub-menu {
position: absolute;
left: 0;
background-color: #fff;
box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2);
min-width: 200px;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease 0s;
}
.menu .sub-menu li {} .menu .sub-menu li a {
color: #777;
display: block;
padding: 5px 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul class="menu">
<li>
Never
<ul class="sub-menu">
<li>Sat
</li>
<li>Sun
</li>
<li>Mon
</li>
<li>Tue
</li>
<li>Wed
</li>
<li>Thu
</li>
<li>Fri
</li>
</ul>
</li>
</ul>

Check this fiddle.
Change JS as below and add schedule class to the "Everyday" anchor.
(function($) {
var currentValue = [];
function renderValue(){
var content = "Everyday ";
$('.schedule').text(content + currentValue.join(' '));
}
$(".menu .sub-menu li a").each(function() {
var dayName = $(this).text();
$(this).on("click", function() {
var el = $(this),
id = el.attr('data-id');
currentValue[id] = currentValue[id] ? undefined : el.text();
renderValue();
});
});
})(jQuery);

You can try this as well. you will have to check if the appended span in the days list is equal to total days.
(function($) {
$(".menu").children("li").children("a.all").hide();
$(".menu .sub-menu li a").each(function() {
var dayName = $(this).text();
$(this).on("click", function() {
var li = $(this).closest(".menu").children("li");
if ($(".menu .sub-menu li").length == $(".menu li a.days span").length + 1 && li.children("a.all").is(":visible") == false) {
li.children("a.days").hide();
li.children("a.all").show();
li.children("a.days").append('<span class="day-name">, ' + dayName + '</span>');
} else {
li.children("a.all").hide();
li.children("a.days").show();
if (li.children("a.days").children("span:contains('" + dayName + "')").length == 0) {
li.children("a.days").append('<span class="day-name">, ' + dayName + '</span>');
} else {
li.children("a.days").children("span:contains('" + dayName + "')").remove();
}
}
});
});
})(jQuery);
ul {
margin: 0;
padding: 0;
list-style: none;
}
a {
text-decoration: none;
}
.menu > li {
position: relative;
}
.menu > li > a {
background-color: #eee;
color: #333;
display: inline-block;
padding: 10px 20px;
}
.menu li:hover > .sub-menu {
opacity: 1;
visibility: visible;
}
.menu .sub-menu {
position: absolute;
left: 0;
background-color: #fff;
box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2);
min-width: 200px;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease 0s;
}
.menu .sub-menu li {} .menu .sub-menu li a {
color: #777;
display: block;
padding: 5px 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul class="menu">
<li>
Every
Everyday
<ul class="sub-menu">
<li>Sat
</li>
<li>Sun
</li>
<li>Mon
</li>
<li>Tue
</li>
<li>Wed
</li>
<li>Thu
</li>
<li>Fri
</li>
</ul>
</li>
</ul>

Clickable Submenu on Mobile Screens

I am building a WP theme and using default sub-menu behavior as user mouseover and drop down sub-menu appears. but as on mobile screen hover feature don't work and i simply hide the sub-menu on mobile resolution.
But as we can see in WP dashboard the sub menus converted with clickable feature and we can access the sub-menu by clicking the parent.
how can i implement this feature in my theme?

Here is what you are looking for
<!DOCTYPE html>
<html>
<head>
<style>
a {
text-decoration: none;
}
.container {
width: 90%;
max-width: 900px;
margin: 10px auto;
}
.toggleMenu {
display: none;
background: #666;
padding: 10px 15px;
color: #fff;
}
.nav {
list-style: none;
*zoom: 1;
background: #175e4c;
}
.nav:before,
.nav:after {
content: " ";
display: table;
}
.nav:after {
clear: both;
}
.nav ul {
list-style: none;
width: 9em;
}
.nav a {
padding: 10px 15px;
color: #fff;
}
.nav li {
position: relative;
}
.nav > li {
float: left;
border-top: 1px solid #104336;
}
.nav > li > .parent {
background-image: url("images/downArrow.png");
background-repeat: no-repeat;
background-position: right;
}
.nav > li > a {
display: block;
}
.nav li ul {
position: absolute;
left: -9999px;
}
.nav > li.hover > ul {
left: 0;
}
.nav li li.hover ul {
left: 100%;
top: 0;
}
.nav li li a {
display: block;
background: #1d7a62;
position: relative;
z-index: 100;
border-top: 1px solid #175e4c;
}
.nav li li li a {
background: #249578;
z-index: 200;
border-top: 1px solid #1d7a62;
}
#media screen and (max-width: 768px) {
.active {
display: block;
}
.nav > li {
float: none;
}
.nav > li > .parent {
background-position: 95% 50%;
}
.nav li li .parent {
background-image: url("images/downArrow.png");
background-repeat: no-repeat;
background-position: 95% 50%;
}
.nav ul {
display: block;
width: 100%;
}
.nav > li.hover > ul,
.nav li li.hover ul {
position: static;
}
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<a class="toggleMenu" href="#">Menu</a>
<ul class="nav">
<li class="test">
Shoes
<ul>
<li>
Womens
<ul>
<li>Sandals
</li>
<li>Loafers
</li>
<li>Flats
</li>
</ul>
</li>
<li>
Mens
<ul>
<li>Loafers
</li>
<li>Sneakers
</li>
<li>Formal
</li>
</ul>
</li>
</ul>
</li>
<li>
Shipping Info
</li>
</ul>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
var ww = document.body.clientWidth;
$(document).ready(function() {
$(".nav li a").each(function() {
if ($(this).next().length > 0) {
$(this).addClass("parent");
};
})
$(".toggleMenu").click(function(e) {
e.preventDefault();
$(this).toggleClass("active");
$(".nav").toggle();
});
adjustMenu();
})
$(window).bind('resize orientationchange', function() {
ww = document.body.clientWidth;
adjustMenu();
});
var adjustMenu = function() {
if (ww < 768) {
$(".toggleMenu").css("display", "inline-block");
if (!$(".toggleMenu").hasClass("active")) {
$(".nav").hide();
} else {
$(".nav").show();
}
$(".nav li").unbind('mouseenter mouseleave');
$(".nav li a.parent").unbind('click').bind('click', function(e) {
// must be attached to anchor element to prevent bubbling
e.preventDefault();
$(this).parent("li").toggleClass("hover");
});
} else if (ww >= 768) {
$(".toggleMenu").css("display", "none");
$(".nav").show();
$(".nav li").removeClass("hover");
$(".nav li a").unbind('click');
$(".nav li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
// must be attached to li so that mouseleave is not triggered when hover over submenu
$(this).toggleClass('hover');
});
}
}
</script>
</body>
</html>

jQuery dropdown menu with css

I've made a bit lists and I think I'm lost with them when it comes to jQuery and making my menu to toggle on click event.
Here is what I have: http://jsfiddle.net/3rc63e3L/
The problem is in menu. When mouse is hovering the element, It is showing and when I click it - It hides. But when i'm deleting from CSS
ol > li:hover > ul
{
display: block;
}
It won't even work while clicking on Menu2 tab. The idea is to delete this "hover" thing on menu2 and make it work only for "click". How can i fix it?

You’re trying to toggle the list elements instead of the list itself. Just use the following JavaScript:
$('ol li.submenuone').click(function() {
$('ol li.submenuone ul').toggle();
});
And remove your CSS from above.
Demo: JSFiddle

use jquery instead of css..
$('ol > li.submenuone').click(function() {
$('ol > li.submenuone ul').slideToggle();
});

Use jQuery, initially subMenu should be hidden. Then sho/hide, toggle using jQuery. Changed the css as well.
$('ol li.submenuone').click(function() {
//alert("hello");
$('ol li.submenuone ul').toggle();
});
.nav
{
width: 100%;
padding: 10px 0;
background-color: red;
text-align: center;
box-shadow: 0px -1px 40px black;
position: relative;
z-index: 9999;
}
ol
{
padding: 0;
margin: 0;
list-style-type: none;
font-size: 18px;
height: 35px;
line-height: 200%;
display: inline-block;
letter-spacing: 1px;
}
ol a
{
color: white;
text-decoration: none;
display: block;
}
ol > li
{
float: left;
width: 170px;
height: 40px;
border-right: 1px dashed #800517;
transition-property: background;
transition-duration: .4s;
}
ol > li:first-child
{
border-left: 1px dashed #800517;
}
ol > li:hover
{
background-color: #800517;
}
ol > li > ul
{
list-style-type: none;
padding: 0;
margin: 0;
height: 40px;
width: 100px;
display: none;
}
ol > li> ul
{
display: none;
}
ol > li > ul > li
{
padding: 2px;
background-color: red;
position: relative;
z-index: 9999;
border-top: 1px dashed #800517;
}
ol > li > ul > li:first-child
{
border-top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="nav">
<ol>
<li>menu1</li>
<li class="submenuone">menu2
<ul>
<li class="submenutwo">sub1</li>
<ul>
<li class="submenuthree">sub1</li>
<li class="submenuthree">sub2</li>
<li class="submenuthree">sub3</li>
</ul>
<li class="submenutwo">sub2</li>
<li class="submenutwo">sub3</li>
</ul>
</li>
<li>menu3</li>
</ol>
</div>

Cannot get span position with jQuery

I have this navigation here and i need to make the submenu aligned with the topmenu anchor text.
I can do that by moving the whole inner ul to the left with css. But it's a different amount for every li element. Since my anchor needs to be as big as the li i created a span around the text and my plan was to measure its distance form the parent and apply that number to left property of the inner ul. This is what i have so far:
jQuery(document).ready(function(){
menuAlign();
});
function menuAlign(){
$('nav.main-nav > ul > li:not(.small)').each(function(){
var self = $(this);
var innerMenu = self.children('ul');
var posOffset = self.children('.pos').position();
innerMenu.css( "left", posOffset.left );
});
}
I get an error on this line innerMenu.css( "left", posOffset.left ); saying:
Uncaught TypeError: Cannot read property 'left' of undefined
What am I doing wrong? Is there a way to achieve this with CSS?

I changed your menuAlign() function slightly, because I think it was looking the span with class="pos" in a different place where it actually was. Hopefully it's working in improved fashion :-) fiddle
function menuAlign() {
$('nav.main-nav > ul > li:not(.small)').each(function () {
var self = $(this);
var innerMenu = self.children('ul');
var parent = innerMenu.parent();
var posLeft = parent.find(".pos").position().left;
innerMenu.css("left", posLeft);
});
}

Removing the margin from nav.main-nav > ul > li > ul might help you. FIDDLE. I also added some padding to nav.main-nav > ul > li > ul > li.
.clearfix:after {
content: " ";
/* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
body {
font-family: 'Open Sans', sans-serif;
overflow-x: hidden;
/* trick for navigation */
}
nav.main-nav > ul {
padding: 0;
background-color: #f6a000;
border-bottom: 1px solid #fff;
}
nav.main-nav > ul > li {
display: inline-block;
position: relative;
z-index: 100;
width: 30%;
height: 60px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
border-right: 1px solid #fff;
float: left;
}
nav.main-nav > ul > li.small {
width: 2%;
}
nav.main-nav > ul > li > a {
width: 100%;
height: 100%;
display: block;
text-align: center;
line-height: 60px;
font-size: 16px;
color: #fff;
}
nav.main-nav > ul > li > ul {
position: absolute;
left: 0;
top: 100%;
width: 100%;
padding: 0;
_margin: 0 -1000em;
z-index: 101;
visibility: hidden;
opacity: 0;
background-color: #F67900;
list-style: none;
}
nav.main-nav > ul > li:hover {
background-color: #F67900;
}
nav.main-nav > ul > li:hover > ul {
visibility: visible;
opacity: 1;
}
nav.main-nav > ul > li > ul > li {
padding: 20px;
}
nav.main-nav > ul > li > ul > li > a {
color: #fff;
font-size: 16px;
}
nav.main-nav > ul > li:hover .drop {
font-weight: bold;
}
<nav class="main-nav">
<ul class="clearfix">
<li> <span class="pos">about us</span>
<ul>
<li>who we are
</li>
<li>what we do
</li>
<li>where we are
</li>
<li>other information
</li>
</ul>
</li>
<li> <span class="pos">accomodation</span>
<ul>
<li>apartments
</li>
<li>hotels
</li>
</ul>
</li>
</ul>
</nav>