We Keep Coding

Creating menu list with next and prev buttons like carousel

I'm trying to make a carousel, but I am having issues.
First, when you keep clicking the Next button the function keeps on working where it should be stop if the last item is reached. I don't have any idea on how can I tell to the function to stop working. I managed to do it in the prev button though.
Second, I need it to be flexible because I don't know the width nor the count of the items. For example, if there are only two Items, the button Next and Prev is no longer necessary, I want it to hide or something like if the items are no longer fit in the container then show Next or Prev button.
$(document).ready(function() {
var margin_left = 0;
$('#prev').on('click', function(e) {
e.preventDefault();
if (margin_left != 0) {
margin_left = margin_left + 190;
$('ul#csx-chips-menu-slider').animate({
'margin-left': margin_left
}, 300);
}
});
$('#next').on('click', function(e) {
e.preventDefault();
margin_left = margin_left - 190;
$('ul#csx-chips-menu-slider').animate({
'margin-left': margin_left
}, 300);
});
});
* {
box-sizing: border-box;
}
.chips-slider-container {
border: solid 1px;
width: 100%;
padding: 2px;
}
.chips-slider-parent {
width: 100%;
display: flex;
border: solid 1px;
}
.chips-slider-parent .csx-chips-items {
background-color: #CCCCCC;
padding: 5px;
}
.chips-slider-parent .csx-chips-items:nth-child(2) {
background-color: #DDDDDD;
flex: 1;
display: block;
overflow-x: hidden;
}
.csx-chips-menu {
padding: 0;
margin: 0;
list-style: none;
white-space: nowrap;
}
.csx-chips-menu li {
display: inline-block;
padding-left: 10px;
padding-right: 10px;
border: solid 1px;
}
.csx-chips-sub-menu {
display: none;
position: absolute;
background-color: #FFFFFF;
padding: 0;
margin: 0;
margin-left: -11px;
list-style: none;
}
.csx-chips-sub-menu li {
display: block;
}
.csx-chips-menu li:hover>.csx-chips-sub-menu {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="chips-slider-container">
<div class="chips-slider-parent">
<div class="csx-chips-items">
PREV
</div>
<div class="csx-chips-items">
<ul class="csx-chips-menu" id="csx-chips-menu-slider">
<li>
Sample Menu 1
<ul class="csx-chips-sub-menu">
<li>Sample Sub Menu</li>
<li>Sample Sub Menu</li>
<li>Sample Sub Menu</li>
<li>Sample Sub Menu</li>
</ul>
</li>
<li>Sample Menu 2</li>
<li>Sample Menu 3</li>
<li>Sample Menu 4</li>
<li>Sample Menu 5</li>
<li>Sample Menu 6</li>
<li>Sample Menu 7</li>
<li>Sample Menu 8</li>
<li>Sample Menu 9</li>
<li>Sample Menu 10</li>
<li>Sample Menu 11</li>
</ul>
</div>
<div class="csx-chips-items">
NEXT
</div>
</div>
</div>

Here is how I usually do it:
Get the max negative margin by substracting the slider width from the parent width in the getMaxMargin() function. The difference is the maximum offset you can add to the slider.
Then simply use Math.max to make sure to always stay above this limit. And for the other end - to not go above 0 - use Math.min. So the whole magic is this line: margin_left = Math.min(0, Math.max( getMaxMargin(), margin_left + amount ))
$(document).ready(function() {
var margin_left = 0;
$('#prev').on('click', function(e) {
e.preventDefault();
animateMargin( 190 );
});
$('#next').on('click', function(e) {
e.preventDefault();
animateMargin( -190 );
});
const animateMargin = ( amount ) => {
margin_left = Math.min(0, Math.max( getMaxMargin(), margin_left + amount ));
$('ul#csx-chips-menu-slider').animate({
'margin-left': margin_left
}, 300);
};
const getMaxMargin = () =>
$('#csx-chips-menu-slider').parent().width() - $('#csx-chips-menu-slider')[0].scrollWidth;
});

This may help you figure the issue you've got with Next button.
$(document).ready(function(){
$('#btn-nav-previous').click(function(){
$(".menu-inner-box").animate({scrollLeft: "-=100px"});
});
$('#btn-nav-next').click(function(){
$(".menu-inner-box").animate({scrollLeft: "+=100px"});
});
});
nav#menu-container {
background:#586e75;
position:relative;
width:100%;
height: 56px;
}
#btn-nav-previous {
text-align: center;
color: white;
cursor: pointer;
font-size: 24px;
position: absolute;
left: 0px;
padding: 9px 12px;
background: #8f9a9d;
fill:#FFF;
}
#btn-nav-next {
text-align: center;
color: white;
cursor: pointer;
font-size: 24px;
position: absolute;
right: 0px;
padding: 9px 12px;
background: #8f9a9d;
fill:#FFF;
}
.menu-inner-box
{
width: 100%;
white-space: nowrap;
margin: 0 auto;
overflow: hidden;
padding: 0px 54px;
box-sizing: border-box;
}
.menu
{
padding:0;
margin: 0;
list-style-type: none;
display:block;
text-align: center;
}
.menu-item
{
height:100%;
padding: 0px 25px;
color:#fff;
display:inline;
margin:0 auto;
line-height:57px;
text-decoration:none;
text-align:center;
white-space:no-wrap;
}
.menu-item:hover {
text-decoration:underline;
}
.last-item{
margin-right: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="menu-container" class="arrow">
<div id="btn-nav-previous" style="fill: #FFF">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"
viewBox="0 0 24 24">
<path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
<path d="M0 0h24v24H0z" fill="none" />
</svg>
</div>
<div id="btn-nav-next">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"
viewBox="0 0 24 24">
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
<path d="M0 0h24v24H0z" fill="none" />
</svg>
</div>
<div class="menu-inner-box">
<div class="menu">
<a class="menu-item" href="#">Menu 1</a>
<a class="menu-item" href="#">Menu 2</a>
<a class="menu-item" href="#">Menu 3</a>
<a class="menu-item" href="#">Menu 4</a>
<a class="menu-item" href="#">Menu 5</a>
<a class="menu-item" href="#">Menu 6</a>
<a class="menu-item" href="#">Menu 7</a>
<a class="menu-item" href="#">Menu 8</a>
<a class="menu-item" href="#">Menu 9</a>
<a class="menu-item" href="#">Menu 10</a>
<a class="menu-item last-item" href="#">Menu 11</a>
</div>
</div>
</nav>
Notice that I added margin to the last item class.
Credit to Phppot.
EDIT: If you cannot add class to the last item for adding margin on it you can use the following selectors.
:last-of-type
:last-child
e.g.
.two:last-of-type{
color:red;
}
ul :last-child {
color:green;
}
/*These match nothing:*/
.one:last-of-type {
color:pink;
/*.. because li.one is not the last <li>*/
}
.one:last-child {
color: pink;
/*.. because li.one is not the last child*/
}
<ul class="test">
<li class="one">1</li>
<li class="one">2</li>
<li class="one">3</li>
<li class="two">4</li>
<li class="two">This is the last LI type</li>
<dt>This is the last child</dt>
</ul>

toggleClass triggering twice when resizing browser window

I'm currently in the middle of creating a responsive navigation. I've managed to finish and trying to fix an issue. Whenever I tried resizing the browser, it seems the toggleClass seems to be triggering multiple times. If refresh the browser it works OK, but after resizing it seems to trigger a couple of times in one click.
Here is the code that I have been working on.
JSFiddle - https://jsfiddle.net/kvpyzbxr/1/
<header>
<ul class="navigation secondary-navigation">
<li>
Schools
</li>
<li>
Faculty
</li>
<li>
Research
</li>
<li>
Contact Us
</li>
</ul>
<ul class="navigation primary-navigation">
<li>
Programs
<ul>
<li>Degree Programs</li>
<li>Master in Business Administration</li>
<li>Executive Master in Business Administration</li>
<li>Master in Entrepreneurship</li>
<li>Master of Science and Innovation and Business</li>
<li>Master in Development Management</li>
</ul>
</li>
<li>
Admissions
<ul>
<li>How to Apply</li>
<li>Application Form</li>
<li>Scholarship and Financial Aid</li>
</ul>
</li>
<li>
About Us
<ul>
<li>Why AIM</li>
<li>Leadership</li>
<li>Network and Alliances</li>
<li>Our Brand Story</li>
</ul>
</li>
<li>
News
</li>
<li>
Alumni
<ul>
<li>AIM Leader Magazine</li>
<li>My AIM Connect</li>
<li>Triple A Awardees</li>
</ul>
</li>
<li>
Give
<ul>
<li>Make A Gift</li>
</ul>
</li>
</ul>
</header>
<script>
$(document).ready(function() {
function detectMobile() {
if ($(window).width() < 1080) {
$('header').addClass('mobile');
$('.secondary-navigation').insertAfter('.primary-navigation');
}
else {
$('header').removeClass('mobile');
$('.secondary-navigation').insertBefore('.primary-navigation');
}
$('.navigation li').on('click', function() {
console.log('open');
$(this).toggleClass('expand-menu');
})
}
detectMobile();
$(window).resize(function() {
detectMobile();
})
})
</script>
header {
max-width: 1336px;
margin: 0 auto;
}
header .navigation {
padding: 10px 0;
clear: both;
}
header .navigation li {
padding: 10px;
display: inline-block;
position: relative;
font-family: 'Arial', sans-serif;
background-color: #272041;
color: #fff;
float: left;
}
header .navigation li a {
color: #fff;
}
header .navigation li ul {
position: absolute;
top: 0;
left: 0;
padding-top: 30px;
display: none;
}
header .navigation li ul li {
background-color: #231d39;
color: #95939e;
}
header .navigation li:hover ul {
display: block;
}
header.mobile .navigation li {
display: block;
float: none;
}
header.mobile .navigation li ul {
position: static;
display: none;
height: 0;
}
header.mobile .navigation li.expand-menu ul {
height: initial;
display: block;
}

That's because you add the click-event several times. Every time detectMobile() is called you bind a click event to $('.navigation li'). So just move
$('.navigation li').on('click', function() {
console.log('open');
$(this).toggleClass('expand-menu');
})
outside of your detectMobile() function.

Bootstrap 3 Gentelella navbar alignment to the right issue

When removing one element out of 3 from the panel of a tile, the 2 elements left are not fully aligned to the right - theres 1 space left.
Before:
before
<ul class="nav navbar-right panel_toolbox">
<li class="dropdown"><i class="fa fa-wrench"></i>
<ul class="dropdown-menu" role="menu">
<li>Settings 1</li>
<li>Settings 2</li>
</ul>
</li>
<li><a class="collapse-link"><i class="fa fa-chevron-up"> </i></a></li>
<li><a class="close-link"><i class="fa fa-close"></i></a></li>
</ul>
After:
after
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up"> </i></a></li>
<li><a class="close-link"><i class="fa fa-close"></i></a></li>
</ul>
The CSS for panel_toolbox looks like that:
.panel_toolbox {
float: right;
min-width: 70px; }
.panel_toolbox > li {
float: left;
cursor: pointer; }
.panel_toolbox > li > a {
padding: 5px;
color: #C5C7CB;
font-size: 14px; }
.panel_toolbox > li > a:hover {
background: #F5F7FA; }
and the CSS for navbar-right:
.navbar-right {
margin-right: 0; }
Can it be fixed?

Rod, In the CSS, instead of:
.panel_toolbox > li {
float: left;
cursor: pointer; }
It should be:
.panel_toolbox > li {
float: right;
cursor: pointer; }

Why don't you add a "pull-right" class on each element?
<ul class"nav navbar-right panel_toolbox">
<li class="collapse-link pull-right"></li>
<li class="close-link pull-right"></li>
</ul>
It should helps you

Custom CSS Navigation dropdown

Currently on my site when I have too many links, the link falls down below the navigation. See my example: https://jsfiddle.net/cn6z13n1/
Is it possible instead to have a More Links list item at the far right which will have a dropdown populated with links?
.toolkit_nav {
background:#dfdfdf;
width:100%;
height:40px;
padding:0;
}
.toolkit_nav ul {
margin:0;
}
.toolkit_nav ul .page_item {
display:inline-block;
line-height:40px;
list-style-type:none;
margin:0px;
padding:0 20px;
}
.toolkit_nav ul .page_item:first-child {
margin-left:0;
padding-left:0;
}
.page_item:hover, .current_page_item {
background:grey;
}
.page_item a {
color:black;
font-size: 0.9em;
font-weight: 400;
text-decoration:none;
}
<nav class="toolkit_nav">
<div class="row">
<div class="medium-12 columns">
<ul>
<li class="page_item page-item-1035 current_page_item">Introduction</li>
<li class="page_item page-item-1039">Digital Landscapes</li>
<li class="page_item page-item-1039">Link 4</li>
<li class="page_item page-item-1039">Link 3</li>
<li class="page_item page-item-1039">Link 2</li>
<li class="page_item page-item-1039">Link 1</li>
<li class="page_item page-item-1039">Link 5</li>
</ul>
</div>
</div>
</nav>

You would need to do this in js i suggest something like this
get the width of the row (max width for nav)
loop through the li elements and sum up there width (+ remember to add the width of a "more" element here
when sum of width > width of nav element hide the elements
add js to your "more" button which shows the hidden elements
Following code is not tested but should give you an idea:
var maxWidth = $('#nav').width();
var moreWidth = $('#more').width(); // li "more" element
var sumWidth = moreWidth;
$('#nav li').each(function() {
sumWidth += $(this).width();
if(sumWidth > maxWidth) {
$(this).addClass('hide'); // add css for hide class
}
});
$('#more').on('click', function() {
$('#nav .hide').fadeIn(100);
// You will need more code here to place it correctly, maybe append the elements in an container
});
Here an example with your fiddle:
https://jsfiddle.net/cn6z13n1/3/
Note: this is just a rough draft, you might to calc paddings etc. to make this work rly good
Edit: updated example with $(window).resize() function
https://jsfiddle.net/cn6z13n1/6/

You'll need to change you HTML slightly but this will work.
.toolkit_nav {
background: #dfdfdf;
width: 100%;
height: 40px;
padding: 0;
}
.toolkit_nav ul {
margin: 0;
}
.toolkit_nav ul .page_item {
display: inline-block;
line-height: 40px;
list-style-type: none;
margin: 0px;
padding: 0 20px;
}
.toolkit_nav ul .page_item:first-child {
margin-left: 0;
padding-left: 0;
}
.page_item:hover,
.current_page_item {
background: grey;
}
.page_item a {
color: black;
font-size: 0.9em;
font-weight: 400;
text-decoration: none;
}
/* NEW STUFF */
.sub-nav,
.sub-nav li {
box-sizing: border-box;
}
.more {
position: relative;
}
.more>ul {
display: none;
position: absolute;
left: 0;
top: 100%;
padding: 0
}
.more:hover>ul {
display: block;
}
.more>ul>li {
display: block;
width: 100%;
clear: both;
text-align: center;
}
.toolkit_nav ul.sub-nav .page_item:first-child {
padding: 0 20px;
}
<nav class="toolkit_nav">
<div class="row">
<div class="medium-12 columns">
<ul>
<li class="page_item page-item-1035 current_page_item">Introduction
</li>
<li class="page_item page-item-1039">Digital Landscapes
</li>
<li class="page_item page-item-1039">Link 4
</li>
<li class="page_item page-item-1039">Link 3
</li>
<li class="page_item page-item-1039">Link 2
</li>
<li class="page_item page-item-1039 more">More...
<ul class="sub-nav">
<li class="page_item page-item-1039">Link 1
</li>
<li class="page_item page-item-1039">Link 5
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>

Accordion submenu wont slide down

Making an accordion menu its lost its slide down/up function what am I doing wrong?
Can someone check this code
Jquery
$(document).ready(function() {
$('.nav-pills ul li').on('click touchstart', function(e) {
e.preventDefault();
var checkElement = $(this).next();
$('.nav-pills li').removeClass('open');
$(this).closest('li').addClass('open');
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
$(this).closest('li').removeClass('open');
checkElement.slideUp(300);
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('nav-pills ul ul:visible').slideUp(300);
checkElement.slideDown(300);
}
if($(this).closest('li').find('ul').children().length == 0){
return true;
}
else {
return false;
}
});
});
HTML
<div class="nav-container">
<div class="nav nav-pills nav-stacked">
<ul class="nav nav-pills nav-stacked">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Is Landscape Architecture Right For Me?</a>
<ul class="dropdown-menu">
<li>What Is Landscape Architecture?</li>
<li>I Want to Be a Landscape Architect (Video)
<li>What Skills Do I Need?</li>
<li>Future Career Prospects (U.S. Labor Department)</li>
</ul>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">What Does A Landscape Architects Do?</a>
<ul class="dropdown-menu">
<li>Interviews with Leading Landscape Architects</li>
<li>ASLA Professional Awards</li>
<li>ASLA Student Awards</li>
<li>Buy the Book: <em>Becoming A Landscape Architect</em></li>
</ul>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Why Is Their Work So Important?</a>
<ul class="dropdown-menu">
<li>Designing Our Future: Sustainable Landscapes</li>
<li>ASLA Animations</li>
</ul>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Where Can I Study?</a>
<ul class="dropdown-menu">
<li>Picking A School</li>
<li>DesignIntelligence Rankings (2013)</li>
</ul>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">How Do I Learn More?</a>
<ul class="dropdown-menu">
<li>Graduating Student Surveys</li>
<li>ACE Mentor Program</li>
<li>Find An ASLA Student Chapter</li>
<li>Learn New Software Programs</li>
<li>Local Parks / Conservation Programs</li>
</ul>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Personal Stories</a>
<ul class="dropdown-menu">
<li>The Path</li>
<li>Obstacles</li>
<li>Aids</li>
</ul>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">About Columbus Circle</a>
<ul class="dropdown-menu">
<li>Learn More About Columbus Circle</li>
<li>Before Photo</li>
</ul>
</ul>
</div>
</div>
</div>
CSS
.nav-pills > li > a {
border-radius: 0px;
line-height: 1.5;
}
.nav-container {
max-width: 26%;
width: 280px;
top: 90px;
left: 45px;
padding: 0;
background-color: #000000;
position: fixed;
z-index: 3;
cursor: pointer;
}
.nav .open>a,
.nav .open>a:hover,
.nav .open>a:focus {
background-color: #f26527;
color: #ffffff;
}
.dropdown > a {
color: #ffffff;
}
.dropdown-menu {
border-radius: 0px;
padding: 0px;
position: relative;
width: 345px;
z-index: 4;
}
.dropdown-menu > li > a {
line-height: 1.3;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
color: #ffffff;
background-color: #f26527;
}
.dropdown-menu li {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica", "Ariel", "sans- serif";
font-weight: 300;
background: #ffffff;
line-height: 1.5;
}
The menu works like and accordion but again has lost its sliding function it just drops down
Thanks

I've encountered this too, and if you tried all the possible solutions here, the answer is that lists cant animate, that if youre trying to animate the list.
Best way is to wrap the lists in a div.