We Keep Coding

How to close hamburger nav on click of the <a> tags?

As the title states, I am wanting my hamburger navbar to close when I click on the tags I have tried many ways for the last couple hours but am unable to solve my problem?
I Have tried setting the hide() property with jquery but no luck think it may be because i am pretty new to JS and am just wanting to get my website finished.
const menuBtn = document.querySelector(".menu-btn");
const mobileContent = document.querySelector(".mobile-content");
const mobileItem = document.querySelector(".mobile-item");
const mobileItems = document.querySelectorAll(".mobile-items");
// Set Initial State Of Menu
let showMenu = false;
menuBtn.addEventListener("click", toggleMenu);
function toggleMenu() {
if (!showMenu) {
menuBtn.classList.add("close");
mobileContent.classList.add("show");
mobileItem.classList.add("show");
mobileItems.forEach(item => item.classList.add("show"));
// Set Menu State
showMenu = true;
} else {
menuBtn.classList.remove("close");
mobileContent.classList.remove("show");
mobileItem.classList.remove("show");
mobileItems.forEach(item => item.classList.remove("show"));
// Set Menu State
showMenu = false;
}
}
.mobile-nav {
display: block;
position: fixed;
width: 100%;
top: 0;
z-index: 3;
}
.mobile-nav .menu-btn {
position: absolute;
z-index: 3;
right: 20px;
top: 20px;
cursor: pointer;
}
.mobile-nav .menu-btn .btn-line {
width: 28px;
height: 3px;
margin: 0 0 5px 0;
background: #333;
}
.mobile-content {
position: fixed;
top: 0;
width: 100%;
opacity: 0.9;
visibility: hidden;
}
.mobile-content.show {
visibility: visible;
}
.mobile-content .mobile-item {
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
float: right;
width: 100%;
height: 100vh;
overflow: hidden;
margin: 0;
padding: 0;
background: blue;
list-style: none;
transform: translate3d(0, -100%, 0);
}
.mobile-content .mobile-link {
display: inline-block;
position: relative;
font-size: 2rem;
padding: 1rem 0;
font-weight: bold;
color: #333;
text-decoration: none;
}
<!-- Mobile Nav -->
<div class="mobile-nav">
<div class="menu-btn">
<div class="btn-line"></div>
<div class="btn-line"></div>
<div class="btn-line"></div>
</div>
<h2>MATTY</h2>
<nav class="mobile-content">
<ul class="mobile-item">
<li class="mobile-items">
<a href="#about-me" class="mobile-link">
ABOUT
</a>
</li>
<li class="mobile-items">
<a href="#the-portfolio" class="mobile-link">
PORTFOLIO
</a>
</li>
<li class="mobile-items">
<a href="#" class="mobile-link">
BLOG
</a>
</li>
<li class="mobile-items">
<a href="#contact-me" class="mobile-link">
CONTACT
</a>
</li>
</ul>
</nav>
</div>

I had to remove some of your CSS as it was not working in the snippet.
Recommend you use element.classList.toggle() as below.
Note how much simpler the code becomes.
EDIT: Clicking any a tag will now close menu
document.addEventListener("click", (e) => {
if(e.target.matches('.menu-btn')
|| e.target.matches('.btn-line')
|| e.target.matches('a')) {
toggleMenu();
}
});
function toggleMenu() {
document.querySelector('.mobile-content').classList.toggle('hide');
}
.btn-line {
display: block;
width: 50px;
margin: 5px;
border: 2px solid black;
}
.mobile-nav {
display: block;
width: 100%;
z-index: 3;
}
.mobile-content {
position: fixed;
width: 100%;
opacity: 0.9;
}
.hide {
display: none;
}
<!-- Mobile Nav -->
<div class="mobile-nav">
<div class="menu-btn">
<span class="btn-line"></span>
<span class="btn-line"></span>
<span class="btn-line"></span>
</div>
<a href="#home">
<h2>MATTY</h2>
</a>
<nav class="mobile-content hide">
<ul class="mobile-item">
<li class="mobile-items">
<a href="#about-me" class="mobile-link">
ABOUT
</a>
</li>
<li class="mobile-items">
<a href="#the-portfolio" class="mobile-link">
PORTFOLIO
</a>
</li>
<li class="mobile-items">
<a href="#" class="mobile-link">
BLOG
</a>
</li>
<li class="mobile-items">
<a href="#contact-me" class="mobile-link">
CONTACT
</a>
</li>
</ul>
</nav>
</div>

#MPB A good way to dabble into some simple JQuery language is a way to fix your problem. A quick and easy way to make a good Hamburger Navigation menue is with the toggleClass(); function in JQuery. Just make a #keyframes-animation within an un-set class and toggleClass(); will switch between the two seamlessly. I do this all the time, comment if you'd like me to forward the code to you for you to use.

Event.target works only with first child [duplicate]

This question already has answers here:
Adding click event listener to elements with the same class
(5 answers)
addEventListener on NodeList [duplicate]
(8 answers)
Closed 4 years ago.
What I want to achieve is a simple tab function.
I have 3 images and a div showTab.
When i click in one of the images, the clicked image should take the active class and show inside showTab div and other image should take inActive class.
I'm totally a newbie in Javascript so forgive me for my ignorance.
For now only the first li inside my ul works.
The others do not show when i click on them.
HTML:
<div class="tab-container">
<div class="showtab active">
</div>
<ul class="tabs">
<li class="tab tab1">
<img src="https://images.unsplash.com/photo-1550364387-ffbad4f8e9b2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="foto1" class='img'>
</li>
<li class="tab tab2">
<img src="https://images.unsplash.com/photo-1550368759-0fdb22fe8020?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="foto2" class='img'>
</li>
<li class="tab tab3">
<img src="https://images.unsplash.com/photo-1550371554-387863e7bd38?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" class='img inActive'>
</li>
</ul>
</div>
CSS:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul li{
list-style: none;
}
.showtab{
width: 200px;
height: 100px;
color: red;
font-weight: bold;
display: flex;
margin-bottom: 20px;
}
.showtab img{
width: 100%;
}
.tabs{
display: flex;
}
.tabs li{
display: flex;
cursor: pointer;
width: 100px;
height: 100px;
margin-right: 10px;
}
.tabs li img{
width: 100%;
}
.active{
color: red;
border: 1px solid red;
opacity: 1;
}
.inActive{
color: blue;
border: 1px solid blue;
opacity: .3;
}
JS:
var tabs = document.querySelector('.tabs');
var tab = document.querySelector('.tab');
var showTab = document.querySelector('.showtab');
tab.addEventListener('click', function(event){
event.stopPropagation();
var content = event.currentTarget.innerHTML;
tab.classList.add('active');
showTab.classList.add('active');
showTab.innerHTML = content;
console.log(this);
});
Here is the demo in jsFiddle:

The .querySelector() function only returns the first matching element. You can use .querySelectorAll() instead and then iterate through the returned list:
var tabs = document.querySelectorAll(".tab");
tabs.forEach(tab => {
tab.addEventListener( ... );
});

How to use <ul> to display scrolling contents?

I came across https://minimill.co/ and saw it as a good example to what I'm trying to achieve.
I made an attempt to display the listed items like the site:
.wrap {
display: block;
list-style: none;
position: relative;
padding: 0;
margin: 0;
border: 0;
li {
background-color: green;
}
}
.content {
margin: 0 auto;
max-width: 66rem;
width: 90%;
padding: 0;
border: 0;
position: relative;
}
.right-details {
display: inline-block;
float: right;
box-size: border-box;
width: 33.33333%;
}
.left-img {
display: inline-block;
float: left;
box-sizing: border-box;
width: 66.66666%;
img {
width: 50px;
}
}
<ul class="wrap">
<li>
<div class="content">
<div class="left-img">
<img src="/assets/img/macbook-image.png"/>
</div>
<h2 class="right-details">
Item 1
</h2>
</div>
</li>
<li>
<div>
<h2>
Item 2
</h2>
</div>
</li>
</ul>
But the first <li> disappears.
How can I display my contents in one long scroll-like how https://minimill.co/ is doing? Am I doing it correctly as implemented on the site? Any guidance or insight on mimicking it more closely would be appreciated.

You should use min-height:100vh instead of height:100vh;. Please check my fiddle
// select all elements with data-background attribute
var lis = document.querySelectorAll("[data-background]");
// create empty array
var heights = [];
// use for loop to "discover" all of the elements in lis array
for(var i = 0; i < lis.length; i++){
// get element's distance from top
var distanceFromTop = lis[i].offsetTop;
// get value from data-backgrount attribute
var background = lis[i].getAttribute("data-background");
// push background and distance to heights array
heights.push({background: background, distance: distanceFromTop});
};
// check if page was scrolled
window.addEventListener("scroll", function(evt){
// if page was scrolled what's the user's distance from top
var distanceFromTop = this.scrollY;
// find distances in heights array
heights.forEach(function(height) {
// check if user reached another checkpoint
if(height.distance < distanceFromTop) {
// if so, change the background to value that we got from data-background attribute
//
document.body.className = height.background;
}
});
});
body {
transition: background-color .8s ease;
-webkit-transition: background-color .8s ease;
}
body.blue { background-color: #39f; }
body.red { background-color: #FF351A; }
body.dark { background-color: #222; }
body.yellow { background-color: #fd3; }
body.deep-blue { background-color: #417ABA; }
body.white { background-color: #fff; }
body.beige { background-color: #F7D693; }
li {
min-height: 100vh;
list-style-type:none;
}
<body class="blue">
<ul>
<li data-background="blue"></li>
<li data-background="red"></li>
<li data-background="dark"></li>
<li data-background="yellow"></li>
<li data-background="deep-blue"></li>
<li data-background="white"></li>
<li data-background="beige"></li>
</ul>
</body>
You should use min-height:100vh instead of height:100vh;. Please check my fiddle

So easiest approach seems to be using height: 100vh;, which stands for hundredths of the viewport height. (see: quirksmode.org).
body, ul, li {
height: 100%;
}
li { height: 100vh; }
ul { list-style-type: none; }
.a { background-color: red; }
.b { background-color: yellow; }
.c { background-color: black; }
.d { background-color: green; }
.e { background-color: orange; }
.f { background-color: pink; }
<body>
<ul>
<li class="a"></li>
<li class="b"></li>
<li class="c"></li>
<li class="d"></li>
<li class="e"></li>
<li class="e"></li>
</ul>
</body>
But: it is not supported for IE <= 10 and Android <= 4.3.
(see: caniuse).
What minimill does on their website is using two <ul> tags:
<ul class="backgrounds"> which has it's position: fixed (love self-descriptive class names);
<ul class="sections"> which stores actual content of the web site;
and the key to make it all work: .sections li with padding: 16rem 0 0; (which means: padding-top: 16rem;). It is all customized to the need of images they use.
See here:
body, li, ul { /* RESET */
margin: 0;
padding: 0;
border: 0;
font: inherit;
vertical-align: baseline;
}
html, body { height: 100%; }
body {
line-height: 1.5;
position: relative;
}
ul { list-style-type: none; }
.backgrounds {
height: 100%;
display: block;
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 1;
}
.backgrounds li {
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
transition: .5s ease opacity;
width: 100%;
z-index: 1;
}
.sections {
position: relative;
transition: .5s ease opacity;
z-index: 2;
}
.sections li { padding: 16rem 0 0; }
.a { background-color: red; }
.b { background-color: yellow; }
.c { background-color: black; }
.d { background-color: green; }
.e { background-color: orange; }
.f { background-color: pink; }
<body>
<ul class="backgrounds">
<li class="a"></li>
<li class="b"></li>
<li class="c"></li>
<li class="d"></li>
<li class="e"></li>
<li class="f"></li>
</ul>
<ul class="sections">
<li class="a"><p>Lorem ipsum dolor sit amet;</p></li>
<li class="b"><p>Lorem ipsum dolor sit amet;</p></li>
<li class="c"><p>Lorem ipsum dolor sit amet;</p></li>
<li class="d"><p>Lorem ipsum dolor sit amet;</p></li>
<li class="e"><p>Lorem ipsum dolor sit amet;</p></li>
<li class="f"><p>Lorem ipsum dolor sit amet;</p></li>
</ul>
</body>
Furthermore, all the background swaping is made with JS.

Based on the example you provided, the first list item should be height: 100vh; and the height of the other items will be based on the content itself. In the code below, I added a bit of script that scrolls from the first item to the second when the "Scroll Down" anchor tag is clicked.
Check out my jsfiddle.
Here's the HTML:
<ul id="wrap">
<li>
<div>
<h2>Item 1</h2>
<div id="scroll-down">
Scroll Down
</div>
</div>
</li>
<li id="scrollto">
<div>
<h2>Item 2</h2>
</div>
</li>
<li>
<div>
<h2>Item 3</h2>
</div>
</li>
</ul>
Here's the SCSS:
$width: 100%;
$height: 100%;
html, body {
width: $width;
height: $height;
margin: 0;
padding: 0;
}
#wrap {
display: inline-block;
list-style: none;
padding: 0;
margin: 0;
width: $width;
height: $height;
li {
display: block;
overflow: hidden;
position: relative;
width: $width;
}
li:first-child {
background-color: green;
height: 100vh;
}
li:not(:first-child) {
min-height: 400px;
}
li:nth-child(2) {
background-color: lightgreen;
}
li:last-of-type {
background-color: lightblue;
}
}
h2 {
margin-top: 0;
}
#scroll-down {
position: absolute;
bottom: 15px;
width: $width;
}
#scroll-down a {
display: block;
text-align: center;
color: #ffffff;
}
Here's a bit of JQuery:
$(document).ready(function(){
$("#scroll-down").click(function() {
$('html, body').animate({
scrollTop: $("#scrollto").offset().top
}, 1000);
});
});

What you are looking at https://minimill.co/ is in fact two ul's, one is being used to show the background color and the other is used to show the content. It seems that the ul associated with the background color does have a javascript event listener that tracks your the window scroll and depending on what content is being shown, the corresponding background color is displayed.
Yes, you are on the right path. In fact, this particular page has a very large top padding (16rem = 16 * 16px = 256px) to centralize the content and depending on the window size, it has different css classes.
Regarding your question, I did try it and the first item appears to me.

It depends on what from Minimill's site, that you want to achieve. Minimill does have that fancy background-color-change, which is an event-listener - but it sounds like, that you just want to have the sections as they do?
Such as:
Section about: We are Minimill
Section about: Redspread
Section about: KPCB
...
...
If it's just that you want to have sections in the same way, then that can achieve quite easily. If you haven't heard of it, then I would point you in the direction of Bootstrap which is a CSS-library that does A LOT for you. When I first heard of it, then I thought 'That sounds like a hassle to look into', - but it's really quite magical, how much time you save by spending a couple of hours understanding how it works.
You can also code the whole thing yourself, such as: https://jsfiddle.net/2awczzcc/2/
And here's the code:
<ul class="wrap">
<li>
<div class="content">
<div class="left-container">
<img src="http://vignette2.wikia.nocookie.net/fantheories/images/4/43/Toy-Story-Theme-Song-6.jpg/revision/latest?cb=20140624192735"/>
</div>
<div class="right-container">
<h2>
Item 1
</h2>
<p>
Text text text.
</p>
</div>
</div>
</li>
<li>
<div class="content">
<div class="left-container">
<img src="http://vignette2.wikia.nocookie.net/fantheories/images/4/43/Toy-Story-Theme-Song-6.jpg/revision/latest?cb=20140624192735"/>
</div>
<div class="right-container">
<h2>
Item 2
</h2>
<p>
Text text text.
</p>
</div>
</div>
</li>
<li>
<div class="content">
<div class="left-container">
<img src="http://vignette2.wikia.nocookie.net/fantheories/images/4/43/Toy-Story-Theme-Song-6.jpg/revision/latest?cb=20140624192735"/>
</div>
<div class="right-container">
<h2>
Item 2
</h2>
<p>
More text, more text, more text.
</p>
</div>
</div>
</li>
</ul>
And the CSS:
.wrap {
display: block;
list-style: none;
position: relative;
padding: 0;
margin: 0;
border: 0;
width: 100%;
}
.wrap li {
width: 100%;
clear: both;
display: block;
min-height: 200px;
float: left;
margin: 0;
padding: 0;
}
.wrap li:first-child {
background-color: green;
}
.wrap li:nth-child(2) {
background-color: blue;
}
.wrap li:nth-child(3) {
background-color: yellow;
}
.content {
margin: 0 auto;
max-width: 66rem;
width: 90%;
padding: 0;
border: 0;
position: relative;
}
.left-container {
float: left;
width: 48%;
overflow: hidden;
}
.right-container {
float: right;
width: 48%;
overflow: hidden;
}
.left-container img {
display: inline-block;
float: left;
box-sizing: border-box;
max-width: 100%;
height: auto;
margin: 25px 0 0 0;
}

Link to jsFiddle
HTML Code:
<ul>
<li id="one" data-color="#16A085">
<h2>Section One</h2>
</li>
<li id="two" data-color="#C0392B">
<h2>Section Two</h2>
</li>
<li id="three" data-color="#ff44AD">
<h2>Section Three</h2>
</li>
<li id="four" data-color="#f88f18">
<h2>Section Four</h2>
</li>
<li id="five" data-color="#E91E63">
<h2>Section Five</h2>
</li>
</ul>
Javascript
$(window).on("scroll touchmove", function() {
if ($(document).scrollTop() >= $("#one").position().top) {
$('body').css('background', $("#one").attr("data-color"));
};
if ($(document).scrollTop() > $("#two").position().top) {
$('body').css('background', $("#two").attr("data-color"))
};
if ($(document).scrollTop() > $("#three").position().top) {
$('body').css('background', $("#three").attr("data-color"))
};
if ($(document).scrollTop() > $("#four").position().top) {
$('body').css('background', $("#four").attr("data-color"))
};
if ($(document).scrollTop() > $("#five").position().top) {
$('body').css('background', $("#five").attr("data-color"))
};
});
CSS
li {
display: block;
width: 100%;
height: 100vh;
}
body {
background: #16A085;
color: #fff;
margin: 0;
transition: all 550ms ease;
will-change: background;
}

All you have to do is add height: 100vh; to the style for LI and you should be set.
Working codepen (I had to modify the CSS a bit since codepen doesn't support sass).
If I misunderstood the question and that's not what you're looking for, let me know.

You can set the height of ul or your div.
Also, set overflow to auto:
<ul style="width: 300px; height: 200px; overflow: auto">
<li>items</li>
<li>items</li>

Highlight menu on scroll not working

I am trying to highlight a menu link on scroll, when the associated element comes into view. I saw this answer, and I'm trying to write it in pure JavaScript. The problem is, when I scroll down, the menu links randomly get the active` class.
What am I doing wrong, and how can I fix it?
JSFiddle
window.addEventListener('scroll', selectLink)
var sections = {
link1: document.getElementById('1'),
link2: document.getElementById('2'),
link3: document.getElementById('3'),
link4: document.getElementById('4'),
};
function selectLink() {
var prevTarget = document.querySelector('.active');
var docHeight = document.documentElement.clientHeight;
for (var sectionKey in sections) {
if (!sections.hasOwnProperty(sectionKey)) continue;
var sectionKeyRect = sections[sectionKey].getBoundingClientRect();
if ((window.pageYOffset || doc.scrollTop) >= sectionKeyRect.top) {
prevTarget.classList.remove('active');
document.querySelector('#' + sectionKey).classList.add('active');
}
}
}
* {
margin: 0;
padding: 0;
}
#main {
width: 75%;
float: right;
}
#main div.target {
background: #ccc;
height: 400px;
}
#main div.target:nth-child(even) {
background: #eee;
}
#nav {
width: 25%;
position: relative;
}
#nav nav {
position: fixed;
width: 25%;
}
#nav a {
border-bottom: 1px solid #666;
color: #333;
display: block;
padding: 10px;
text-align: center;
text-decoration: none;
}
#nav a:hover,
#nav a.active {
background: #666;
color: #fff;
}
<section id="main">
<div class="target" id="1">TARGET 1</div>
<div class="target" id="2">TARGET 2</div>
<div class="target" id="3">TARGET 3</div>
<div class="target" id="4">TARGET 4</div>
</section>
<aside id="nav">
<nav>
<a id="link1" class="active">First</a>
<a id="link2">Second</a>
<a id="link3">Third</a>
<a id="link4">Fourth</a>
</nav>
</aside>

How do I stop my toggle function at the first and last list items?

I have an unordered list of numbers that scroll.
The selected/middle list item needs to show in a yellow font color.
I have applied a class toggle function to my scroll buttons. I just need help figuring out a solution that will stop the class toggle function when I get to my first and last list item.
The solution I need must allow for the addition and removal of list items without the need to adjust the JavaScript if possible.
As usual, I know this is light work for you guys.
Any and all help is very much appreciated.
HTML
<div id="container">
<div class="box">
<ul id="ulscroller">
<li value="22"> </li>
<li id="1" class="active">1</li>
<li id="2" class="target">2</li>
<li id="3" class="active">3</li>
<li id="4" class="target">4</li>
<li id="5" class="active">5</li>
<li value="21" class="lastitem"> </li>
</ul>
</div>
<!--Button Controls-->
<div class="buttholder">
<a href="#">
<button class="scrollup">UP</button>
</a>
<a href="#">
<button class="buttok">OK</button>
</a>
<a href="#">
<button class="scroll">Down</button>
</a>
</div>
CSS
.box li.target {
color: #fff;
}
.box li.active {
color: #fada15;
}
#container {
position: relative;
width: 310px;
height: 268px;
background: #000;
}
button {
width: 72px;
height: 72px;
margin-top: 5px;
margin-bottom: 5px
}
#container div {
position: absolute;
}
ul li {
font-size: 42px;
color: #fff;
overflow: hidden;
font-family: arial;
text-align: center;
}
li {
list-style-type: none;
margin-bottom: 30px;
margin-top: 32px;
}
.box {
border: 0px #00f solid;
height: 247px;
width: 199px;
overflow: hidden;
}
#container div.buttholder {
position: relative;
float: right;
border: 0px #0f0 solid;
width: 72px;
height: 236px;
top: 11px;
right: 13px;
}
.lastitem {height: 22px;}
JavaScript
$(document).ready(function() {
$('.scroll').click(function() {
$('li').toggleClass('active', 'target');
$('.box').animate({
scrollTop: '+=80'
}, 100);
});
});
$(document).ready(function() {
$('.scrollup').click(function() {
$('li').toggleClass('active', 'target');
$('.box').animate({
scrollTop: '-=80'
}, 100);
});
});

When toggleClass() has two parameters, the second parameter is expected to be a boolean (and not just truthy/falsy).
Therefore, 'target' is ignored in this code:
$('li').toggleClass('active', 'target');
What you could do is set the first li as "active," then move the active class to the previous or next li, depending on which button is pressed.
If the next li is the last child, or the previous li is the first child, then don't move the active class.
Snippet
$(document).ready(function() {
$('.scroll').click(function() {
var current= $('li.active'),
next= current.next().not(':last-child');
if(next.length) {
next.addClass('active');
current.removeClass('active');
}
$('.box').animate({
scrollTop: '+=80'
}, 100);
});
$('.scrollup').click(function() {
var current= $('li.active'),
prev= current.prev().not(':first-child');
if(prev.length) {
prev.addClass('active');
current.removeClass('active');
}
$('.box').animate({
scrollTop: '-=80'
}, 100);
});
});
.box li.target {
color: #fff;
}
.box li.active {
color: #fada15;
}
#container {
position: relative;
width: 310px;
height: 268px;
background: #000;
}
button {
width: 72px;
height: 72px;
margin-top: 5px;
margin-bottom: 5px
}
#container div {
position: absolute;
}
ul li {
font-size: 42px;
color: #fff;
overflow: hidden;
font-family: arial;
text-align: center;
}
li {
list-style-type: none;
margin-bottom: 30px;
margin-top: 32px;
}
.box {
border: 0px #00f solid;
height: 247px;
width: 199px;
overflow: hidden;
}
#container div.buttholder {
position: relative;
float: right;
border: 0px #0f0 solid;
width: 72px;
height: 236px;
top: 11px;
right: 13px;
}
.lastitem {
height: 22px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div class="box">
<ul id="ulscroller">
<li value="22"> </li>
<li id="1" class="active">1</li>
<li id="2">2</li>
<li id="3">3</li>
<li id="4">4</li>
<li id="5">5</li>
<li value="21" class="lastitem"> </li>
</ul>
</div>
<!--Button Controls-->
<div class="buttholder">
<a href="#">
<button class="scrollup">UP</button>
</a>
<a href="#">
<button class="buttok">OK</button>
</a>
<a href="#">
<button class="scroll">Down</button>
</a>
</div>

There are two solutions:
Solution #1
You can use the .first and .last functions of jQuery:
$('li').not($('li').first()).not($('li').last())
I am choosing all "li" elements,and then remove the first one and the last one.
https://api.jquery.com/last/
Solution #2:
You can also use slice function, like in arrays:
$('li').slice(1,-1)
This will remove the first and last item in the 'li' array of elements.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice

Answer of Rick Hitchcock is perfect, however I would just like to add one point.
For every jQuery function you call, you don't need to encapsulate it in a $(document).ready(function() or jQuery(document).ready(function($). A page manipulation begins only when the page has been loaded. So you don't need to check it twice whether the page has been loaded or not.