i am having the following Problem.
I implemented a nested accordion Menu JQuery script on my Website.
What i need to do now is that the accordion Menu sub categories expand based on an URL.
Here is the fiddle https://jsfiddle.net/w6fa87ov/
You will find that i set the Menu item "Test_2" within "Sub Category 1.2" on active.
When the user enters the corresponding URL i.e. "/myurl/Test_2" then the Accordion Menu should open the item "Sub Category 1.2" by default.
Iam not a JQuery programmer and i dont know how to do this in JQuery.
My noob consideration was something like:
- If i find an active element within the menu i "click" the corresponding element which should expand it
Thanks in advance, best regards Burnie
HTML:
<div id="main">
<div id="nestedAccordion">
<h5 id="id_element_TopKat_Food">First Top Category</h5>
<div id="container2">
<h6 id="id_element_Sub1Kat">Sub Category 1.1</h6>
<div id="container3">
<a class="accordionSubKategorie" href="/myurl/Test_0" style="text-decoration:none;">
<h7 id="id_element_Sub2Kat" class="Sub2Kat"> Test_0</h7>
</a>
</div>
<h6 id="id_element_Sub1Kat">Sub Category 1.2</h6>
<div id="container3">
<a class="accordionSubKategorie" href="/myurl/Test_1" style="text-decoration:none;">
<h7 id="id_element_Sub2Kat" class="Sub2Kat"> Test_1</h7>
</a>
<a class="accordionSubKategorie" href="/myurl/Test_2" style="text-decoration:none;">
<h7 id="id_element_Sub2Kat" class="Sub2Kat active"> Test_2</h7>
</a>
<a class="accordionSubKategorie" href="/myurl/Test_3" style="text-decoration:none;">
<h7 id="id_element_Sub2Kat" class="Sub2Kat"> Test_4</h7>
</a>
</div>
</div>
<h5 id="id_element_TopKat_Non-Food">Second Top Category</h5>
<div id="container2">
<h6 id="id_element_Sub1Kat">Sub Category 2.1</h6>
<div id="container3">
<a class="accordionSubKategorie" href="/myurl/Test_4" style="text-decoration:none;">
<h7 id="id_element_Sub2Kat" class="Sub2Kat"> Test_4</h7>
</a>
</div>
</div>
</div>
JQuery:
var parentDivs = $('#nestedAccordion div');
var childDivs = $('#nestedAccordion h6').siblings('div');
$('#nestedAccordion h5').click(function() {
parentDivs.slideUp();
if ($(this).next().is(':hidden')) {
$(this).next().slideDown();
} else {
$(this).next().slideUp();
}
});
childDivs.slideUp();
$('#nestedAccordion h6').click(function() {
childDivs.slideUp();
if ($(this).next().is(':hidden')) {
$(this).next().slideDown();
} else {
$(this).next().slideUp();
}
});
CSS:
h5 {
margin-bottom: 8px;
font-weight:bold;
font-size: 20px;
width: 100%;
display: block;
background: #6EB90A;
color: #fefefe;
padding: .75em;
border-radius: 0.15em;
cursor: pointer;
cursor: hand;
}
h5:hover {
background: #5c8a1c;
text-decoration: none;
color: white;
}
h6 {
margin-top:-3px;
font-size: 15px;
width: 100%;
display: block;
background: #FFFFFF;
border-color: #476767;
box-shadow: 0px 0px 0px 2px rgba(71,103,103,1);
color: #476767;
padding: .25em;
border-radius: 0.8em;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
cursor: hand;
}
h6:hover {
background: #476767;
text-decoration: none;
color: white;
}
h7.Sub2Kat {
font-size: 15px;
width: 100%;
display: block;
color: #476767;
padding-top: 2px;
padding-bottom: .1em;
padding-left: 1.8em;
border-radius: 0.2em;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
cursor: hand;
}
h7.Sub2Kat:hover {
background: #6EB90A;
color: white;
}
h7.Sub2Kat.active {
border: 2px solid #ddd;
border-radius: 0.8em;
padding-left: 1.2em;
}
.Sub2Katactive {
font-size:0.9em;
}
h7.Sub2Kat.active {
border: 2px solid #ddd;
border-radius: 0.8em;
padding-left: 1.2em;
}
If this is intended as a menu you could build everything in an unordered list with list elements inside. Any nested menus can be done as such:
<ul class="menu">
<li class="menuItem">
Page 1
<ul class="subMenu">
<li class="menuItem2">Sub Page 1</li>
<li class="menuItem2">Sub Page 2</li>
<li class="menuItem2">Sub Page 3</li>
</ul>
</li>
<li class="menuItem">Page 2</li>
<li class="menuItem">Page 3</li>
</ul>
DOing it this way will allow you to target the :active list item that is built in with browsers. Then you could use css and jquery to make the dropdown magic. In jquery you can target the :active anchor as such:
$('menu > li a:active').doSomething();
If this doesn't interest you, check out this other stack overflow answer that may be of help as well.
Jquery - determining which link was clicked
Cheers
Ok i solved my Prolbem.
Within my Django code which i use to construct the Template i give a specific Class to hasActive or hasPassive which refers to the menu items which has the active or only passive elements inside (elemnts that are not clicked based on the url).
In case someone has the same Problem ill provide more informationen on this.
Related
I have extracted following code from an already developed script. I need to change this text according to clicked item.
As an example if someone clicked Home button I need to change this div to some other text like you have clicked "Home" likewise. Simply I need the navigation in same page to different text portions.
This is providing what I need exactly without one function. I could see that following text portion is static for every time.
<div style="padding:0 16px">
<h3>Subnav/dropdown menu inside a Navigation Bar</h3>
<p>Hover over the "about", "services" or "partners" link to see the sub navigation menu.</p>
</div>
I hope this could be done using jQuery/JavaScript.
Thanks in advance!!
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
}
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.subnav {
float: left;
overflow: hidden;
}
.subnav .subnavbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover,
.subnav:hover .subnavbtn {
background-color: red;
}
.subnav-content {
display: none;
position: absolute;
left: 0;
background-color: red;
width: 100%;
z-index: 1;
}
.subnav-content a {
float: left;
color: white;
text-decoration: none;
}
.subnav-content a:hover {
background-color: #eee;
color: black;
}
.subnav:hover .subnav-content {
display: block;
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="navbar">
Home
<div class="subnav">
<button class="subnavbtn">About <i class="fa fa-caret-down"></i></button>
<div class="subnav-content">
Company
Team
Careers
</div>
</div>
<div class="subnav">
<button class="subnavbtn">Services <i class="fa fa-caret-down"></i></button>
<div class="subnav-content">
Bring
Deliver
Package
Express
</div>
</div>
<div class="subnav">
<button class="subnavbtn">Partners <i class="fa fa-caret-down"></i></button>
<div class="subnav-content">
Link 1
Link 2
Link 3
Link 4
</div>
</div>
Contact
</div>
<div style="padding:0 16px">
<h3>Subnav/dropdown menu inside a Navigation Bar</h3>
<p>Hover over the "about", "services" or "partners" link to see the sub navigation menu.</p>
</div>
</body>
// This is classes that you need to add for it to work
<p class="paragraph">Hover over the "about", "services" or
"partners" link to see the sub navigation menu.</p>
<a class="home" href="#home">Home</a>
// And this is your javascript code
const home= document.querySelector('.home')
const paragraph=document.querySelector('.paragraph')
home.onclick=function(){
paragraph.innerHTML="You are now in a home page"
}
// Hope it helps!
I'm trying to get multiple tabs on the same page working without having to change my markup or style.
The problem is that clicking the tab links in one section removes the content from the other sections
I see other questions with the same issue but I can't modify my HTML or CSS
// Change tab class and display content
$('.tabs-nav a').on('click', function (event) {
event.preventDefault();
$('.tab-active').removeClass('tab-active');
$(this).parent().addClass('tab-active');
$('.tabs-stage .tab-content').hide();
$($(this).attr('href')).show();
});
$('.tabs-nav a:first').trigger('click'); // Default
JS Fiddle
There's a couple of issues with the logic.
You need to add the .current class to the targeted tab, not manually call show() on it, as the latter will apply an inline style which will not be overriden by removing the .current class.
Use li:nth-child(1) a instead of a:first to get the first a element in each container, not the first in the entire page.
You need to remove the .tab-active class from the li, not the a.
Your CSS needs to include the rules to hide/show the tab content in .tab-content and .tab-content.current.
With those issues addressed, the code works:
$('.tabs-nav a').on('click', e => {
e.preventDefault();
let $tabLink = $(e.target);
let $div_container = $tabLink.closest('.wrap');
$div_container.find('li').removeClass('tab-active');
$div_container.find('.tab-content').removeClass('current');
let targetSelector = $tabLink.attr('href');
$tabLink.parent().addClass('tab-active');
$(targetSelector).addClass('current');
});
$('.tabs-nav li:nth-child(1) a').trigger('click');
.tabs-nav {
list-style: none;
margin: 0;
padding: 0;
}
.tabs-nav a {
border-bottom: 5px #a6a6a6 solid;
color: #a6a6a6;
display: block;
font-size: 18px;
font-weight: 600;
padding: 10px 40px;
position: relative;
text-align: center;
text-transform: uppercase;
}
.tabs-nav .tab-active a {
border-bottom-color: #000;
color: var(--body-color);
cursor: default;
z-index: 1;
}
.tabs-nav li {
float: left;
}
.tabs-stage {
background-color: #fff;
border-radius: 0 0 6px 6px;
border-top: 5px #a6a6a6 solid;
clear: both;
/* margin-bottom: 20px; */ /* removed for this demo to save space */
padding: 10px 20px 20px;
position: relative;
top: -5px;
width: 100%;
}
.tab-content {
display: none;
}
.tab-content.current {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<section class="wrap">
<ul class="tabs-nav">
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<div class="tabs-stage">
<div id="tab11" class="tab-content">
<h3>Tab 1 Content</h3>
</div>
<div id="tab12" class="tab-content">
<h3>Tab 2 Content</h3>
</div>
</div>
</section>
<section class="wrap">
<ul class="tabs-nav">
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<div class="tabs-stage">
<div id="tab21" class="tab-content">
<h3>Tab 1 Content</h3>
</div>
<div id="tab22" class="tab-content">
<h3>Tab 2 Content</h3>
</div>
</div>
</section>
After thoroughly trying to fix this issue - I need a little help.
I am trying to make a website that has a navbar (made with bootstrap) for websites and I am making a small drop-down menu for smaller screens (I haven't added this functionality yet, I just want it to work first). I haven't styled it much yet either.
The problem is that I know my button and code is working (because I have a codepen showing that it works), but in my website, I cannot see the drop-down menu. Not sure if it is hidden or what but I just can't figure this out.
Here is the HTML (because I have to put something...):
<div class = "dropdown">
<button onclick = "menuBtn ()" class = "dropBtn">Menu</button>
<div id = "dropCollapse" class = "dropdownContent">
<a class = "contentLinks" href = "#about">About</a>
<a class = "contentLinks" href = "#team">Team</a>
<a class = "contentLinks" href = "#photos">Photos</a>
<a class = "contentLinks" href = "#shirts">T-Shirts</a>
<a class = "contentLinks" href = "#contact">Contact</a>
</div>
</div>
I have played around with z-index (in a number of places but if you have a suggestion, feel free to make it and I will try it). I have taken the menu out of the navbar (thinking it had something to do with that). But mostly I am just confused - nothing else really answered my question about this menu issue. I feel like there is something small that I am overlooking and I just can't figure it out.
Here is a fiddle showing the basic outline of my website with the menu not working: https://jsfiddle.net/nekochan/eh69segg/1/
A few things I noticed:
you were using jQuery but did not define jQuery to load. If you do an "inspect element" you'll see that $ is not defined
also you had a few missing divs, and an anchor wasn't closed
I'd recommend just using purely jQuery if you're going to go that approach - it's a very simple example. Here is your updated fiddle - notice the toggle animates nicely :)
https://jsfiddle.net/qdL9mch2/1/
/* global $ */
$(document).ready(function() {
//makes the masethead fit the whole screen
$("#masthead").css("min-height", $(window).height());
//mobile menu button collapse
$(".dropBtn").on("click", function(){
$("#dropCollapse").toggle("show");
});
// Close the dropdown menu if the user clicks outside of it
//update to jquery
window.onclick = function(event) {
if (!event.target.matches('.dropBtn')) {
var dropdowns = document.getElementsByClassName("dropdownContent");
for (var i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
};
});
there are multiple errors there in your HTML for example <a class="navBrand" href="#masthead"> is not closing and your menuBtn is not being called, I would recommend you to use jquery completely if you have it included inside your project see here your code working
//mobile menu button collapse
function menuBtn() {
document.getElementById("dropCollapse").classList.toggle("show");
}
/* global $ */
$(document).ready(function() {
$("#my-button").click(function() {
document.getElementById("dropCollapse").classList.toggle("show");
})
//makes the masethead fit the whole screen
$("#masthead").css("min-height", $(window).height());
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropBtn')) {
var dropdowns = document.getElementsByClassName("dropdownContent");
for (var i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
};
});
.main {
font-family: 'Roboto', sans-serif;
width: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
overflow-y: hidden;
}
.body {
position: relative;
}
#navBar {
margin-bottom: 0;
background-color: black;
font-family: 'Permanent Marker', cursive;
}
.brandImage {
height: 60px;
width: auto;
}
#navHeader {}
#navItem {}
#navLink {
text-decoration: none;
}
.dropBtn {
background-color: #4caf50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropBtn:hover,
.dropBtn:focus {
background-color: #3e8e41;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdownContent {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 9999;
}
.contentLinks {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.contentLinks:hover {
background-color: #f1f1f1;
}
.show {
display: block;
}
#media (max-width: 960px) {
#large-menu {
display: none;
}
.brandImage {
float: left;
}
}
#masthead {
background-color: #65737e;
background-image: url(https://static.pexels.com/photos/285286/pexels-photo-285286.jpeg);
width: 100%;
height: auto;
background-size: cover;
background-position: bottom center;
display: flex;
align-items: center;
min-height: 100%;
min-height: 100vh;
}
.headerText {
font-size: 90px;
font-family: 'Permanent Marker', cursive;
color: #fff;
}
.headerTagline {
font-size: 60px;
font-family: 'Permanent Marker', cursive;
color: #fff;
}
.anchor {
display: block;
height: 50px;
margin-top: -50px;
visibility: hidden;
}
.sectionHeader {
font-family: 'Permanent Marker', cursive;
padding: 20px 20px 20px 20px;
}
.sectionText {
padding: 20px 20px 20px 20px;
}
#aboutBox {
background-color: #c0c5ce;
padding: 20px 0 20px;
}
#teamBox {
background-color: #a7adba;
padding: 20px 0 20px;
}
#workBox {
background-color: #65737e;
padding: 20px 0 20px;
}
#shirtBox {
background-color: #4f5b66;
padding: 20px 0 20px;
}
#socialBox {
background-color: #343d46;
padding: 20px 0 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<nav class="navbar navbar-inverse navbar-fixed-top" id="navBar">
<div class="container-fluid">
<div class="navHeader navbar-left">
<a class="navBrand" href="#masthead"></a>
<ul class="nav navbar-nav navbar-right" id="large-menu">
<li class="navItem">
<a class="navLink" href="#about">About</a>
</li>
<li class="navItem">
<a class="navLink" href="#team">Team</a>
</li>
<li class="navItem">
<a class="navLink" href="#photos">Photos</a>
</li>
<li class="navItem">
<a class="navItem" href="#shirts">T-Shirts</a>
</li>
<li class="navItem">
<a class="navLink" href="#contact">Contact</a>
</li>
</ul>
</div>
<div class="dropdown">
<button class="dropBtn" id="my-button">Menu</button>
<div id="dropCollapse" class="dropdownContent">
<a class="contentLinks" href="#about">About</a>
<a class="contentLinks" href="#team">Team</a>
<a class="contentLinks" href="#photos">Photos</a>
<a class="contentLinks" href="#shirts">T-Shirts</a>
<a class="contentLinks" href="#contact">Contact</a>
</div>
</div>
</nav>
<div class="container text-center" id="masthead">
<div class="col-sm-12">
<h1 class="headerText"></h1>
<p class="headerTagline"></p>
</div>
</div>
<span class="anchor" id="about"></span>
<div class="container-fluid" id="aboutBox">
<div class="row">
<div class="col-sm-12">
<h2 class="sectionHeader">About Us</h2>
<p class="sectionText">We're all about that chedda</p>
</div>
</div>
</div>
<span class="anchor" id="team"></span>
<div class="container-fluid" id="teamBox">
<div class="row">
<div class="col-sm-12">
<h2 class="sectionHeader">Meet the team</h2>
<p class="sectionText">pictures of team go here</p>
</div>
</div>
</div>
<span class="anchor" id="photos"></span>
<div class="container-fluid" id="workBox">
<div class="row">
<div class="col-sm-12">
<h2 class="sectionHeader">Our Work</h2>
<p class="sectionText">pictures go here</p>
</div>
</div>
</div>
<span class="anchor" id="shirts"></span>
<div class="container-fluid" id="shirtBox">
<div class="row">
<div class="col-sm-12">
<h2 class="sectionHeader">T-shirts Preview</h2>
<p class="sectionText">pictures of tshirts go here</p>
</div>
</div>
</div>
<span class="anchor" id="contact"></span>
<div class="container-fluid" id="socialBox">
<div class="row">
<div class="col-sm-12">
<h2 class="sectionHeader">Contact Us</h2>
<p class="sectionText">links to social media and contact us form</p>
</div>
</div>
</div>
I am currently creating multiple navigation buttons for my website, each of them would show up menus.
So as example, this is the first menu:
<div class="outer-bar">
<ul class="down-bar" style="list-style:hidden">
<li>
<label id="down-nav-1" class="down-nav" onclick="Dropdown1()">Knives <b class="caret_down">▼</b></label>
<div class="mainsizer">
<div class="dropdown-menus" id="dropdown-menu-1">
<label class="m9_bayonet" style="width:30px;height:30px;position:absolute;top:5px;left:5px;cursor:pointer;"></label>M9 Bayonet
<label class="karambit" style="width:30px;height:30px;position:absolute;left:5px;top:59px;cursor:pointer;"></label>Karambit
<label class="bayonet" style="width:30px;height:30px;position:absolute;left:5px;top:116px;cursor:pointer;"></label>Bayonet
<label class="butterfly" style="width:30px;height:30px;position:absolute;left:5px;top:170px;cursor:pointer;"></label>Butterfly Knife
<label class="flip" style="width:30px;height:30px;position:absolute;left:5px;top:225px;cursor:pointer;"></label>Flip Knife
<label class="falchion" style="width:30px;height:30px;position:absolute;left:5px;top:280px;cursor:pointer;"></label>Falchion Knife
<label class="gut" style="width:30px;height:30px;position:absolute;left:5px;top:334.5px;cursor:pointer;"></label>Gut Knife
<label class="shadow" style="width:30px;height:30px;position:absolute;left:5px;top:390px;cursor:pointer;"></label>Shadow Daggers
<label class="huntsman" style="width:30px;height:30px;position:absolute;left:5px;top:444px;cursor:pointer;"></label>Huntsman Knife
<label class="bowie" style="width:30px;height:30px;position:absolute;left:5px;top:498.5px;cursor:pointer;"></label>Bowie Knife
</div>
</div>
</li>
So as you see on the <label> element #down-nav-1, it has onclick attribute linked to the function Dropdown1() and Display of menu is None and the time.
And this is the function itself in Javascript:
function Dropdown1() {
document.getElementById("dropdown-menu-1").style.display = "inline-block";
document.getElementById("down-nav-1").style.cssText = "border: solid 3px gray;background-color: gray;border-radius: 10px;";
}
All of this would simply work fine, please see Fiddle. (Only "Knives" button works atm).
But then i tried to add a function, so when user clicks outside of the menu, the display would be set to 'None' again:
function Dropdown1() {
document.getElementById("dropdown-menu-1").style.display = "inline-block";
document.getElementById("down-nav-1").style.cssText = "border: solid 3px gray;background-color: gray;border-radius: 10px;";
}
$(document).click(function(event) {
if(!$(event.target).closest('#dropdown-menu-1').length) {
if ( ($('#dropdown-menu-1').style.display = "None" ) {
$('#dropdown-menu-1').style.display = "inline-block";
}
}
})
And after adding this code, there would be no action when clicking the button. ( see the result ).
I don't understand the specific problem in there, but please note, i am new to Javascript, and don't know many things in there.
What could the problem be? can i do this with pure Javascript or should i use jquery in this case?
There is syntax & logical error in the code.
Updated your code:
function Dropdown1() {
if ($('#dropdown-menu-1').css("display") !== "none") {
$('#dropdown-menu-1').css("display", "none");
} else {
$('#dropdown-menu-1').css("display", "inline-block");
}
document.getElementById("down-nav-1").style.cssText = "border: solid 3px gray; background-color: gray; border-radius: 10px;";
}
$(document).click(function(event) {
if (!$(event.target).closest('.outer-bar').length) {
if ($('#dropdown-menu-1').css("display") !== "none") {
$('#dropdown-menu-1').css("display", "none");
}
}
});
Please use == or === instead of the = operator when comparing inside your if blocks.
Also brackets were not closed in the if block expressions.
Also, style.display is a property associated to a JavaScript object and not a jQuery object. You should use .css("display") for a jQuery object.
Updated working fiddle: https://jsfiddle.net/nashcheez/bjfz7twq/7/
If you are using jQuery, please use it consistently. Don't mix both jQuery and Vanilla JavaScript. To do something very simple dropdown like that, you just need to use JavaScript to only change classes and not the original effect. All the others should be handled by CSS.
Technically, this is achievable just using HTML and CSS. There are 1000s of examples outside. Also, you should use event handlers instead of functions for individual dropdowns, as it is better for scalability.
First thing, change this in CSS:
.mainsizer.open .dropdown-menus {
display: block;
}
And in your JavaScript, do this:
$(function () {
$("label").click(function () {
if ($(this).next(".mainsizer").hasClass("open"))
$(this).next(".mainsizer").toggleClass("open");
else {
$(".open").removeClass("open");
$(this).next(".mainsizer").addClass("open");
}
});
});
Ultimately, you should have this code:
$(function () {
$("label").click(function () {
if ($(this).next(".mainsizer").hasClass("open"))
$(this).next(".mainsizer").toggleClass("open");
else {
$(".open").removeClass("open");
$(this).next(".mainsizer").addClass("open");
}
});
});
.outer-bar {
position: relative;
display: block;
z-index: 1;
text-align: center;
top: 55px;
background-color: black;
height: 60px;
width: 100%;
}
.down-bar {
list-style-type: none;
font-size: 105%;
}
.down-bar li {
display: inline-block;
margin-top: 15px;
margin-right: 2%;
vertical-align: top;
}
.down-nav {
z-index: 1
font-size: 105%;
color: white;
font-family: 'Lato';
cursor: pointer;
transition: all 0.1s ease;
-moz-transition: all 0.1s ease;
}
.down-nav:hover {
color: white;
border: solid 3px gray;
background-color: gray;
border-radius: 10px;
font-family: 'Lato';
}
.down-nav li {
display: inline-block;
}
.caret_down {
font-size: 30%;
}
.mainsizer {
position: absolute;
width: 164px;
}
.dropdown-menus {
display: none;
position: absolute;
width: 164px;
right: 5%;
background-color: black;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 99;
transition: 0.1s ease-in;
margin-top: 5px;
}
.dropdown-menus a {
color: white;
text-align: center;
font-size: 0.9em;
padding: 8% 0px 15% 0%;
padding-right: 10%;
text-decoration: none;
display: block;
list-style-type: none;
white-space: nowrap;
margin-left: 0%;
text-indent: 4%;
font-family: 'Lato';
}
.dropdown-menus a:hover {
background-color: gray;
}
.mainsizer.open .dropdown-menus {
display: block;
}
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<div class="outer-bar">
<ul class="down-bar" style="list-style:hidden">
<li>
<label id="down-nav-1" class="down-nav" onclick="Dropdown1()">Knives <b class="caret_down">▼</b></label>
<div class="mainsizer">
<div class="dropdown-menus" id="dropdown-menu-1">
<label class="m9_bayonet" style="width:30px;height:30px;position:absolute;top:5px;left:5px;cursor:pointer;"></label>M9 Bayonet
<label class="karambit" style="width:30px;height:30px;position:absolute;left:5px;top:59px;cursor:pointer;"></label>Karambit
<label class="bayonet" style="width:30px;height:30px;position:absolute;left:5px;top:116px;cursor:pointer;"></label>Bayonet
<label class="butterfly" style="width:30px;height:30px;position:absolute;left:5px;top:170px;cursor:pointer;"></label>Butterfly Knife
<label class="flip" style="width:30px;height:30px;position:absolute;left:5px;top:225px;cursor:pointer;"></label>Flip Knife
<label class="falchion" style="width:30px;height:30px;position:absolute;left:5px;top:280px;cursor:pointer;"></label>Falchion Knife
<label class="gut" style="width:30px;height:30px;position:absolute;left:5px;top:334.5px;cursor:pointer;"></label>Gut Knife
<label class="shadow" style="width:30px;height:30px;position:absolute;left:5px;top:390px;cursor:pointer;"></label>Shadow Daggers
<label class="huntsman" style="width:30px;height:30px;position:absolute;left:5px;top:444px;cursor:pointer;"></label>Huntsman Knife
<label class="bowie" style="width:30px;height:30px;position:absolute;left:5px;top:498.5px;cursor:pointer;"></label>Bowie Knife
</div>
</div>
</li>
<li>
<label id="down-nav-2" class="down-nav">Pistols <b class="caret_down">▼</b></label>
<div class="mainsizer">
<div class="dropdown-menus" id="dropdown-menu-2">
</label>Glock-18
</label>USP-S
</label>P2000
</label>Five-SeveN
</label>Desert Eagle
</label>Tec-9
</label>CZ75-Auto
</label>P250
</label>Dual Berettas
</label>R8 Revolver
</div>
</div>
</li>
<li>
<label id="down-nav-4" class="down-nav">SMGs <b class="caret_down">▼</b></label>
<div class="mainsizer">
<div class="dropdown-menus" id="dropdown-menu-3">
</label>P90
</label>MAC-10
</label>MP7
</label>MP9
</label>PP-Bizon
</label>UMP-45
</div>
</div>
</li>
<li>
<label id="down-nav-5" class="down-nav">Rifles <b class="caret_down">▼</b></label>
<div class="mainsizer">
<div class="dropdown-menus" id="dropdown-menu-4">
</label>AK-47
</label>Galil AR
</label>SG 553
</label>M4A4
</label>M4A1-S
</label>AUG
</label>Famas
</div>
</div>
</li>
<li>
<label id="down-nav-6" class="down-nav">Snipers <b class="caret_down">▼</b></label>
<div class="mainsizer">
<div class="dropdown-menus" id="dropdown-menu-5">
</label>AWP
</label>SSG 08
</label>SCAR-20
</label>G3SG1
</div>
</div>
</li>
<li>
<label id="down-nav-6" class="down-nav">Heavy <b class="caret_down">▼</b></label>
<div class="mainsizer">
<div class="dropdown-menus" id="dropdown-menu-6">
</label>Nova
</label>MAG-7
</label>XM1014
</label>Sawed-Off
</label>Negev
</label>M249
</div>
</div>
</li>
<li>
<label id="down-nav-7" class="down-nav">Others <b class="caret_down">▼</b></label>
<div class="mainsizer">
<div class="dropdown-menus" id="dropdown-menu-7">
</label>Keys
</label>Cases
</label>Passes
</label>Capsules
</label>Pins
</label>Packages
</label>Stickers
</label>Music Kits
</div>
</div>
</li>
</ul>
</div>
Full Screen Output: http://output.jsbin.com/jeropupogu
Here's a minimal, working (although not styled completely) version, using no JS, and very basic HTML and CSS. Should work in any browser.
.nav {
display: block;
background-color: black;
height: 5em;
}
.nav a {
color: white;
}
.nav ul {
list-style-type: none;
}
.nav > ul > li {
display: inline-block;
}
.nav ul li > ul {
display: none;
}
.nav ul li:hover > ul {
display: block;
}
.down-nav {
font-size: 105%;
color: white;
font-family: 'Lato';
cursor: pointer;
transition: all 0.1s ease;
border: solid .2em transparent;
}
.down-nav:hover {
border: solid .2em gray;
background-color: gray;
border-radius: 1em;
font-family: 'Lato';
}
<div class="nav">
<ul>
<li class="down-nav">Knives <span>▼</span>
<ul>
<li>M9 Bayonet</li>
<li>Karambit</li>
<li>Bayonet</li>
<li>Butterfly Knife</li>
<li>Flip Knife</li>
<li>Falchion Knife</li>
<li>Gut Knife</li>
<li>Shadow Daggers</li>
<li>Huntsman Knife</li>
<li>Bowie Knife</li>
</ul>
</li>
<li class="down-nav">Pistols <span>▼</span>
<ul>
<li>Glock-18</li>
<li>USP-S</li>
<li>P2000</li>
<li>Five-SeveN</li>
<li>Desert Eagle</li>
<li>Tec-9</li>
<li>CZ75-Auto</li>
<li>P250</li>
<li>Dual Berettas</li>
<li>R8 Revolver</li>
</ul>
</li>
</ul>
</div>
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.