We Keep Coding

showing submenu one by one on hover

Actually, I am trying to make a sub-menu where user hovers on the first menu its child list should appear one after one and same on the other menu.
I think it is working fine just a minor problem. I am going to the 2nd or 3rd menu before the complete appearing of the first menu's child. 2nd and 3rd are working fine but again if I hover on the first menu it still shows the remaining list (child) which was left to appear.
(function($) {
$.fn.animateOneByOne = function(params) {
params = $.extend({
css: '',
duration: 700,
interval: 300,
order: 'ASC',
callback: ''
}, params);
if (params.order == 'ASC') {
elements = $(this);
} else {
elements = $(this).get().reverse();
}
count = $(this).length - 1;
$(elements).each(function(id) {
setTimeout(function(element) {
if (id == count) {
$(element).animate(params.css, params.duration, params.callback);
} else {
$(element).animate(params.css, params.duration);
}
}, id * (params.interval + params.duration), $(this));
});
};
})(jQuery);
$('.srvs_dropdown').hover(function() {
$(this).find("ul li").animateOneByOne({
css: {
opacity: '1'
},
duration: 450,
interval: 100
});
return false;
},
function() {
$(this).find("ul li").css("opacity", 0);
});
.srvs_dropdown li {
opacity: 0;
}
a {
color: #fff;
}
.pi-mm-list {
padding-left: 20px;
background-color: #09142D;
width: 250px;
color: #fff;
}
.pi-mm-list li ul {
display: none;
position: absolute;
left: 180px;
width: 234px;
padding-top: 7px;
background-color: #09142D;
z-index: 999;
}
.pi-mm-list li:hover ul {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="pi-mm-list">
<li class="srvs_dropdown">Network Security
<ul>
<li>Firewall and VPN</li>
<li>Web Security</li>
<li>Application Security</li>
<li>Threat Detection & Response</li>
<li>Data Leakage Prevention</li>
<li>IPS</li>
</ul>
</li>
<li class="srvs_dropdown">Endpoint Security
<ul>
<li>Antivirus</li>
<li>DLP</li>
</ul>
</li>
<li class="srvs_dropdown">Wireless Security
<ul>
<li>Access Point</li>
<li>Controller</li>
</ul>
</li>
</ul>

As far as I have understood or observed your question and code, looks like it only works correctly when you hover over all links for the first time top to bottom but once you reach the last menu item in the first block and start hovering in reverse from bottom to top you will see that the submenu links start appearing in randomly, problem is the delay that you have used you just need a small fix i.e incremental delay which you were missing. The code below it works as you expect, observe the difference in the $(elements).each(function(id) { just replace the setTimeOut with delay and add the increment there and watch the difference, you can remove the interval param too see below code and working example, hope it solves the problem.
(function($) {
$.fn.animateOneByOne = function(params) {
params = $.extend({
css: '',
duration: 700,
order: 'ASC',
callback: ''
}, params);
if (params.order == 'ASC') {
elements = $(this);
} else {
elements = $(this).get().reverse();
}
count = $(this).length - 1;
$(elements).each(function(id) {
let isLastLi = id == count;
console.log('animate', id);
(isLastLi) ? $(this).delay((id + 1) * params.duration).animate(params.css, 0, params.callback): $(this).delay((id + 1) * params.duration).animate(params.css, 0);
});
};
})(jQuery);
$('.srvs_dropdown').hover(function() {
console.log('here');
$(this).find("ul li").animateOneByOne({
css: {
opacity: '1'
},
duration: 400
});
return false;
},
function() {
$(this).find("ul li").stop().css("opacity", 0);
});
.srvs_dropdown li {
opacity: 0;
}
a {
color: #fff;
}
.pi-mm-list {
padding-left: 20px;
background-color: #09142D;
width: 250px;
color: #fff;
}
.pi-mm-list li ul {
display: none;
position: absolute;
left: 180px;
width: 234px;
padding-top: 7px;
background-color: #09142D;
z-index: 999;
}
.pi-mm-list li:hover ul {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="pi-mm-list">
<li class="srvs_dropdown">Network Security
<ul>
<li>Firewall and VPN</li>
<li>Web Security</li>
<li>Application Security</li>
<li>Threat Detection & Response</li>
<li>Data Leakage Prevention</li>
<li>IPS</li>
</ul>
</li>
<li class="srvs_dropdown">Endpoint Security
<ul>
<li>Antivirus</li>
<li>DLP</li>
</ul>
</li>
<li class="srvs_dropdown">Wireless Security
<ul>
<li>Access Point</li>
<li>Controller</li>
</ul>
</li>
</ul>

The main idea is to cancel timed-out function when it doesn't need to execute. It looks that out part in .hover(in, out) is the best place to do it. But first we need a list of setTimeout handlers which are generated in the in part. Something like this.
(function($) {
$.fn.animateOneByOne = function(params) {
params = $.extend({
css: '',
duration: 700,
interval: 300,
order: 'ASC',
callback: ''
}, params);
if (params.order == 'ASC') {
elements = $(this);
} else {
elements = $(this).get().reverse();
}
count = $(this).length - 1;
var handlers = [];
$(elements).each(function(id) {
var handle = setTimeout(function(element) {
if (id == count) {
$(element).animate(params.css, params.duration, params.callback);
} else {
$(element).animate(params.css, params.duration);
}
}, id * (params.interval + params.duration), $(this));
handlers.push(handle);
});
return handlers;
};
})(jQuery);
$('.srvs_dropdown').hover(function() {
$(this).data('handler',
$(this).find("ul li").animateOneByOne({//returns the list of handlers
css: {
opacity: '1'
},
duration: 450,
interval: 100
}));
return false;
},
function() {
$(this).data('handler').forEach(function(handle) {
clearTimeout(handle); //cancel setTimeout if it didn't start yet
});
$(this).find("ul li").css("opacity", 0);
});
.srvs_dropdown li {
opacity: 0;
}
.pi-mm-list {
padding-left: 20px;
}
.pi-mm-list li ul {
display: none;
position: absolute;
left: 180px;
width: 234px;
padding-top: 7px;
background: #09142D;
z-index: 999;
}
.pi-mm-list li:hover ul {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="pi-mm-list">
<li class="srvs_dropdown">Network Security
<ul>
<li>Firewall and VPN</li>
<li>Web Security</li>
<li>Application Security</li>
<li>Threat Detection & Response</li>
<li>Data Leakage Prevention</li>
<li>IPS</li>
</ul>
</li>
<li class="srvs_dropdown">Endpoint Security
<ul>
<li>Antivirus</li>
<li>DLP</li>
</ul>
</li>
<li class="srvs_dropdown">Wireless Security
<ul>
<li>Access Point</li>
<li>Controller</li>
</ul>
</li>
</ul>

Hide a Centered Logo on Mobile Viewport

So I am working on a site and the logo is centered on the navbar at the bottom of the page as list item. When the site collapses to mobile i want to hide it. I've tried display:none and hidden but cant figure it out. If you can see an easier way to have a bottom nav that scrolls up with a centered logo I will take it lol
(function($) {
var defaults = {
topSpacing: 0,
bottomSpacing: 0,
className: 'is-sticky',
wrapperClassName: 'sticky-wrapper',
center: false,
getWidthFrom: '',
responsiveWidth: false
},
$window = $(window),
$document = $(document),
sticked = [],
windowHeight = $window.height(),
scroller = function() {
var scrollTop = $window.scrollTop(),
documentHeight = $document.height(),
dwh = documentHeight - windowHeight,
extra = (scrollTop > dwh) ? dwh - scrollTop : 0;
for (var i = 0; i < sticked.length; i++) {
var s = sticked[i],
elementTop = s.stickyWrapper.offset().top,
etse = elementTop - s.topSpacing - extra;
if (scrollTop <= etse) {
if (s.currentTop !== null) {
s.stickyElement
.css('position', '')
.css('top', '');
s.stickyElement.trigger('sticky-end', [s]).parent().removeClass(s.className);
s.currentTop = null;
}
}
else {
var newTop = documentHeight - s.stickyElement.outerHeight()
- s.topSpacing - s.bottomSpacing - scrollTop - extra;
if (newTop < 0) {
newTop = newTop + s.topSpacing;
} else {
newTop = s.topSpacing;
}
if (s.currentTop != newTop) {
s.stickyElement
.css('position', 'fixed')
.css('top', newTop);
if (typeof s.getWidthFrom !== 'undefined') {
s.stickyElement.css('width', $(s.getWidthFrom).width());
}
s.stickyElement.trigger('sticky-start', [s]).parent().addClass(s.className);
s.currentTop = newTop;
}
}
}
},
resizer = function() {
windowHeight = $window.height();
for (var i = 0; i < sticked.length; i++) {
var s = sticked[i];
if (typeof s.getWidthFrom !== 'undefined' && s.responsiveWidth === true) {
s.stickyElement.css('width', $(s.getWidthFrom).width());
}
}
},
methods = {
init: function(options) {
var o = $.extend({}, defaults, options);
return this.each(function() {
var stickyElement = $(this);
var stickyId = stickyElement.attr('id');
var wrapperId = stickyId ? stickyId + '-' + defaults.wrapperClassName : defaults.wrapperClassName
var wrapper = $('<div></div>')
.attr('id', stickyId + '-sticky-wrapper')
.addClass(o.wrapperClassName);
stickyElement.wrapAll(wrapper);
if (o.center) {
stickyElement.parent().css({width:stickyElement.outerWidth(),marginLeft:"auto",marginRight:"auto"});
}
if (stickyElement.css("float") == "right") {
stickyElement.css({"float":"none"}).parent().css({"float":"right"});
}
var stickyWrapper = stickyElement.parent();
stickyWrapper.css('height', stickyElement.outerHeight());
sticked.push({
topSpacing: o.topSpacing,
bottomSpacing: o.bottomSpacing,
stickyElement: stickyElement,
currentTop: null,
stickyWrapper: stickyWrapper,
className: o.className,
getWidthFrom: o.getWidthFrom,
responsiveWidth: o.responsiveWidth
});
});
},
update: scroller,
unstick: function(options) {
return this.each(function() {
var unstickyElement = $(this);
var removeIdx = -1;
for (var i = 0; i < sticked.length; i++)
{
if (sticked[i].stickyElement.get(0) == unstickyElement.get(0))
{
removeIdx = i;
}
}
if(removeIdx != -1)
{
sticked.splice(removeIdx,1);
unstickyElement.unwrap();
unstickyElement.removeAttr('style');
}
});
}
};
// should be more efficient than using $window.scroll(scroller) and $window.resize(resizer):
if (window.addEventListener) {
window.addEventListener('scroll', scroller, false);
window.addEventListener('resize', resizer, false);
} else if (window.attachEvent) {
window.attachEvent('onscroll', scroller);
window.attachEvent('onresize', resizer);
}
$.fn.sticky = function(method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method ) {
return methods.init.apply( this, arguments );
} else {
$.error('Method ' + method + ' does not exist on jQuery.sticky');
}
};
$.fn.unstick = function(method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method ) {
return methods.unstick.apply( this, arguments );
} else {
$.error('Method ' + method + ' does not exist on jQuery.sticky');
}
};
$(function() {
setTimeout(scroller, 0);
});
})(jQuery);
.section-menu{
z-index: 9999;
}
.navbar-default{
background: #141414;
border: 0px;
border-radius: 0px;
}
.navbar-default .navbar-nav > li > a{
text-transform: uppercase;
font-weight: 700;
padding: 10px;
font-size: 16px;
font-family: 'Roboto', serif;
color: #fff;
line-height: 30px;
}
.navbar-default .navbar-nav > li > a:hover,.navbar-default .navbar-nav > li > a:focus{
color: #7f1f1f;
}
.main-nav{
width: 100%;
margin: 0 auto;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover {
color: #fcb027;
background-color: transparent;
}
#navbar-primary .navbar-nav {
width: 100%;
text-align: center;
}
#navbar-primary .navbar-nav > li {
display: inline-block;
float: none;
}
#navbar-primary .navbar-nav > li > a {
padding-left: 30px;
padding-right: 30px;
}
#media only screen and (max-width: 1080px) {
.logo{
display: none;
}
}
<body data-spy="scroll" data-target=".main-nav">
<section id="section-banner">
<div class="container">
<div class="row">
<div class="banner-content text-center">
<h2 class="title">
<div class="line-top"></div>
Twitch Streamer & Web Designer
<div class="line-btm"></div>
</h2>
Learn More
</div>
</div>
</div>
</section>
<!-- Navagation Starts -->
<section class="section-menu">
<div id="navbar-primary" class="navbar navbar-default main-nav" role="navigation" >
<div class="container" >
<div class="navbar-header">
<button type= "button" class="navbar-toggle collapsed" data-target="#bs-example-navbar-collapse-1" data-toggle="collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div><!-- navbar-header end -->
<!-- main nav -->
<div class="collapse navbar-collapse navigation" id="bs-example-navbar-collapse-1" role="navigation">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Channel</li>
<li>Games</li>
<li class="logo"><img src="assets/images/logo.png" alt=""></li>
<li>News</li>
<li>FAQ</li>
<li>Contact</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</div>
</section>

Use bootstrap's hidden-xs helper class:
<li class="logo hidden-xs"><img src="assets/images/logo.png" alt=""></li>

Just change display: none; to visibility: hidden;

Get each scroll and increment active class

I want to make a custom slider on mousewheel event, my question is how can i do for get each scroll done on my page and add an active class on my 'ul li' and increment it one by one like:
if ($('scroll') === 1, function() {
$('ul li:first-child').addClass('active');
});
if ($('scroll') === 2, function() {
$('ul li:nth-child(2)').addClass('active');
});
ul li{
height:20px;
width:20px;
background:blue;
margin:5px;
list-style:none
}
ul li.active{
background:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>

Based on this answer: , you can do something like this:
var scrollable = $('ul li').length - 1,
count = 0;
$('body').bind('mousewheel', function(e) {
if (e.originalEvent.wheelDelta / 120 > 0) {
if (scrollable >= count && count > 0) {
$('.active').removeClass('active').prev().addClass('active');
count--
} else {
return false;
}
} else {
if (scrollable > count) {
$('.active').removeClass('active').next().addClass('active');
count++
} else {
return false;
}
}
})
ul li {
height: 20px;
width: 20px;
background: blue;
margin: 5px;
list-style: none
}
ul li.active {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>

This syntax doesn't work:
if (value === other value, function() {
});
The correct syntax for an if statement is as follows:
if (value === other value) {
// execute code in here
}
Also, you've got this:
$('scroll') === 1
Here, $('scroll') is a jQuery function that selects the <scroll> HTML element (which doesn't exist).
Instead, you can detect the page's scroll position in JavaScript using window.scrollY, which returns the number of pixels that the document is currently scrolled down from the top. For example:
if (window.scrollY < 100) {
$('ul li:first-child').addClass('active');
} else if (window.scrollY < 200) {
$('ul li:nth-child(2)').addClass('active');
}

can't use scroll function correctly after click

I made a function that increment class on a li list everytime i scroll on the page, so now i want to make the function on click but there is a conflict, for example if i click and i want to scroll again the increment function stop, how can i fix it ?
var scrollable = $('ul li').length - 1,
count = 0,
allowTransition = true;
$('body').bind('mousewheel', function(e) {
if (allowTransition) {
allowTransition=false;
if (e.originalEvent.wheelDelta / 120 > 0) {
if (scrollable >= count && count > 0) {
$('.active').removeClass('active').prev().addClass('active');
count--
} else {
return false;
}
} else {
if (scrollable > count) {
$('.active').removeClass('active').next().addClass('active');
count++
} else {
return false;
}
}
setTimeout(function() {
allowTransition=true;
}, 1000);
}
});
$('ul li').on('click', function() {
$('ul li').removeClass('active');
$(this).addClass('active');
});
body{
overflow:hidden;
}
ul li {
height: 20px;
width: 20px;
background: blue;
margin: 5px;
list-style: none
}
ul li.active {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>

here is a working script http://codepen.io/mozzi/pen/oLWZjY
you needed to reset allowTransition flag andd update the current count
var scrollable = $('ul li').length - 1,
count = 0,
allowTransition = true;
$('body').bind('mousewheel', function(e) {
//alert(count);
if (allowTransition) {
allowTransition=false;
if (e.originalEvent.wheelDelta / 120 > 0) {
if (scrollable >= count && count > 0) {
$('.active').removeClass('active').prev().addClass('active');
count--;
} else {
allowTransition=true;
return false;
}
} else {
if (scrollable > count) {
$('.active').removeClass('active').next().addClass('active');
count++;
} else {
allowTransition=true;
return false;
}
}
setTimeout(function() {
allowTransition=true;
}, 1000);
}
});
$('ul li').on('click', function() {
$('ul li').removeClass('active');
$(this).addClass('active');
count = $(this).attr('count');
allowTransition=true;
});
body{
overflow:hidden;
}
ul li {
height: 20px;
width: 20px;
background: blue;
margin: 5px;
list-style: none
}
ul li.active {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="active" count='0'></li>
<li count='1'></li>
<li count='2'></li>
<li count='3'></li>
</ul>

Changing Style of Parent LI in Collapsible Menu

This should be easy, but I'm having a hard time with it.
I have a simple collapsing menu that uses SPAN tags inside LI tags, the usual.
Here's the JavaScript:
var allSpan = document.getElementsByTagName('SPAN');
for (var i = 0; i < allSpan.length; i++) {
allSpan[i].onclick = function() {
if (this.parentNode) {
var childList = this.parentNode.getElementsByTagName('UL');
for (var j = 0; j < childList.length; j++) {
var currentState = childList[j].style.display;
if (currentState == "none") {
childList[j].style.display = "block";
} else {
childList[j].style.display = "none";
}
}
}
}
}
It works just fine in hiding and showing the nested ULs. What I'd like to do is add a piece of code that also changes the SPAN of the clicked-on parent LI item.
I'm thinking it would be something like:
if(currentState=="none") {
childList[j].style.display="block";
$(this).css('background-color', 'red');
}
else {
childList[j].style.display="none";
$(this).css('background-color', 'blue');
}
I'm sure I'm missing the obvious. Could somebody please point me in the right direction?
UPDATE
Sorry, I totally forgot there was more code at the bottom:
$(function() {
$('#menu').find('SPAN').click(function(e) {
$(this).parent().find('UL').toggle();
});
});
And here is the body of the HTML:
<style TYPE="text/css">
<!--
body { background: white;color: #000000;font-family:geneva; }
a:link { color: #ff8080 }
a:visited { color: #ff0000 }
a:active { color: #a05050 }
ul { margin:0;padding:0; }
li { list-style-type: none; }
ul li span { display:block;min-height:20px;background:blue;color:white;font-weight:bold;padding: 3px 8px 3px 8px;border-top:1px solid black;border-left:1px solid black;border-right:1px solid black;margin:0; }
li ul { display:none; }
li ul li span { background:#98ff33;padding: 3px 8px 3px 8px;color:black;font-weight:normal;display:block; }
li ul li:last-child span { border-bottom:1px solid black; }
-->
</style>
</head>
<body>
<UL id="menu">
<LI class="Category"><SPAN>Solid Tumors</SPAN><UL>
<LI class="subtopic"><SPAN>Anal Cancer</SPAN></LI>
<LI class="subtopic"><SPAN>Biliary Cancer</SPAN></LI>
<LI class="subtopic"><SPAN>Bladder Cancer</SPAN></LI>
</UL>
<LI class="Category"><SPAN>Hematologic Malignancies</SPAN><UL>
<LI class="subtopic"><SPAN>Acute Myeloid Leukemia</SPAN></LI>
<LI class="subtopic"><SPAN>Acute Promyelocytic Leukemia</SPAN></LI>
</UL>
<LI class="Category"><SPAN>Reviewers</SPAN><UL>
<LI class="subtopic"><SPAN>Physician Reviewers</SPAN></LI>
<LI class="subtopic"><SPAN>Pharmacy Reviewers </SPAN></LI>
</UL>
</UL>

A simple method would be to only toggle the class of the parent li element:
$(function () {
$('#menu SPAN').click(function (e) {
$(this).parent().toggleClass('open');
});
});
And then add then using CSS to manage the colors and the show/hide by adding the following css:
#menu li.open > span {
background-color: red
}
#menu li.open ul {
display: inline
}
see: http://jsfiddle.net/3TTDJ/
Note: if you only want to do this for the first menu level and not recursive, you'll want to specify that in the selector using immediate child selector '#menu > li > SPAN':
$(function () {
$('#menu > li > SPAN').click(function (e) {
$(this).parent().toggleClass('open');
});
});
see: http://jsfiddle.net/tleish/3TTDJ/2/

Below changes the span background color or the parent listitem
http://jsfiddle.net/tuusT/2/
$('#menu').find('SPAN').click(function(e){
$('#menu').find('.active').removeClass("active");
$(this).parents(".Category").children("span:first").addClass("active")
$(this).parent().find('UL').toggle();
});