We Keep Coding

Changing display after animation

I'm trying to change an element's display to none after a CSS transition. This is because I want elements below the removed to move up (or down) to take the removed element's place. The transition is working, but it doesn't change the display.
.glossary-item {
margin: 20px 0;
padding: 20px;
box-sizing: border-box;
border: 1px solid;
opacity: 1;
}
.hidden {
display: none;
}
.transition.hidden {
display: block;
opacity: 0;
}
.transition {
transition: opacity 1s ease;
}
<input type="text" id="glossaryFilter" onkeyup="myFunction()" placeholder="Search..">
<div id="glossary-container">
<div class="glossary-item">
<div class="glossary-body">
<h5 class="glossary-title">Title</h5>
<p>Content</p>
</div>
</div>
<div class="glossary-item">
<div class="glossary-body">
<h5 class="glossary-title">Other</h5>
<p>Stuff</p>
</div>
</div>
</div>
function myFunction() {
var input, filter, cards, cardContainer, h5, title, i;
input = document.getElementById("glossaryFilter");
filter = input.value.toUpperCase();
cardContainer = document.getElementById("glossary-container");
cards = cardContainer.getElementsByClassName("glossary-item");
for (i = 0; i < cards.length; i++) {
title = cards[i].querySelector(".glossary-body h5.glossary-title");
if (title.innerText.toUpperCase().indexOf(filter) > -1) {
cards[i].classList.add('transition');
cards[i].classList.remove('hidden');
} else {
cards[i].classList.add('transition');
cards[i].classList.add('hidden');
}
}
}

the class:
displayNone{
display: none;
}
some js:
const afterAnimate = (()=>{
setTimeout(()=>{
//change "elem" to the fitting element
elem.classList.add("displayNone");
}, 1000);
})
//add the function-call to your event which triggers the animation
afterAnimate();

Style is being added to the last child among a set of elements, instead of the last child of the selected element

var NavLinks = document.querySelectorAll('.nav-link');
var circuses = document.querySelectorAll('.circle');
for (var i = 0; i < NavLinks.length; i++) {
var navLink = NavLinks[i];
navLink.addEventListener('click', function () {
for (var i = 0; i < circuses.length; i++) {
var circle = circuses[i];
circle.style.display='none';
}
var theLastChild = navLink.lastChild;
theLastChild.style.display='block';
}
);
}
.nav-container{
height: 10px;
background: white;
padding: 30px 0px 40px 0px;
margin-left: 18%;
margin-right: 18%;
}
.nav-body ul{
text-align: right;
}
.nav-body ul li{
display: inline- block;
float: left;
margin-right: 30px;
}
#logo{
margin-right: 0px;
}
.nav-body ul li{
line-height: 0.6;
}
#logo{
margin-top: -10px;
}
#logo-light-blue{
color: #5dc5ef;
font-weight: 900;
}
#logo-dark-blue{
color: #1885c8;
font-weight: 900;
}
.circle {
display: none;
width: 8px;
height: 8px;
background: #5dc5ef;
/* -moz-border-radius: 50px;
-webkit-border-radius: 50px; */
border-radius: 4px;
margin: auto;
margin-top: 7px;
}
<header class="nav-container">
<nav class="nav-body">
<ul>
<li class="nav-link">צור קשר
<div class="circle"></div></li>
<li class="nav-link">המלצות ומאמרים
<div class="circle"></div></li>
<li class="nav-link">שאלות נפוצות
<div class="circle"></div></li>
<li class="nav-link">אודות ד"ר שי מרון אלדר
<div class="circle"></div></li>
<li class="nav-link">אודות ההליכים
<div class="circle"></div></li>
<li class="nav-link">ראשי
<div class="circle"></div></li>
<li id="logo"> <h3> <span id="logo-light-blue"> ד"ר </span><span id="logo-dark-blue"> שי מרון אלדר </span></h3><br>
<h6> פתרונות כירורגיים להשמנת יתר וניתוחים זעיר פולשניים</h6></li>
</ul>
</nav>
</header>
I need to make a blue circle under that category menu, which I pressed. But now blue circle added only to last menu category. Doesn't matter which one was pressed.
I looking for the last child of that menu category which was pressed. But it shows me every time last child of all menu categories.
What is wrong?
>

You have errors in HTML. Span tags need to be closed.
<li id="logo">
<h3>
<span id="logo-light-blue"> ד"ר </span>
<span id="logo-dark-blue"> שי מרון אלדר </span>
</h3>
<br>
<h6> פתרונות כירורגיים להשמנת יתר וניתוחים זעיר פולשניים</h6>
</li>
And Id attributes should be unique to the element, you are repeating the circle as an Id all over the place.
<div id="circle"></div></li>
It this doesn't solve it, try explaining the question better since even in the demo you have put result is all over the place. Are we missing some CSS or a style lib?
EDIT: I think I know what you wanna, is it this? Have a look at fiddle:
fiddle here
Do you need circle removed from other elements once you click your element?
If you need the circle to be only on 1 element, it needs to be removed from others.
Here is a fiddle showing that:
fiddle with only 1 circle
Difference is in:
var NavLinks = document.querySelectorAll('.nav-link');
for (var i = 0; i < NavLinks.length; i++) {
var navLink = NavLinks[i];
navLink.addEventListener('click', function (event) {
var allNavs = document.querySelectorAll('.nav-link div');
for (var it = 0; it < allNavs.length; it++){
console.log(allNavs[it]);
allNavs[it].classList.add('invisible');
allNavs[it].classList.remove('circleVisible');
}
console.log(allNavs);
var targetElement = event.target || event.srcElement;
var circleDiv = targetElement.parentNode.querySelectorAll('div');
console.log(circleDiv[0]);
circleDiv[0].classList.add('circleVisible');
circleDiv[0].classList.remove('invisible');
console.log(circleDiv[0]);
}
);
}
I have left console.logs, so you see how it works, remove them when running the code for real :)

The first big problem I see is you have nested for loops but are using the same iterator variable of i. If you are going to next the loops, you need the inner loop to have a different variable. In situations like this, I will often use ii just because it's easy.
Furthermore, you seem to be doing this in a roundabout way. I'm not entirely sure what you need, but if it is as it appears, then this solution is simpler.
CSS
.circle {
display: none;
... other attributes
}
.active-menu-item > .circle {
display: block;
}
JavaScript
var NavLinks = document.querySelectorAll('.nav-link');
for (var i = 0; i < NavLinks.length; i++) {
var navLink = NavLinks[i];
navLink.addEventListener('click', function () {
for (var ii = 0; ii < NavLinks.length; ii++) {
NavLinks[ii].classList.remove("active-menu-item");
}
navLink.classList.add("active-menu-item");
});
}

Onclick or href not working on Dropdown menu on hover effect

I have a menu with drop down on hover and when clicked it should open a new page.
Here is the HTML;
<ul class=“Mainmenu” id=“Mainmenu”>
<li class=“dropdown”><a onclick=“window.location.reload()”>Home</a></li>
<li class=“dropdown”><a href=“Page1.html” onclick=“Loadpage(); return false;”>About us</a>
<ul class=“dropdown-menu” id=“menu1”>
<li class=“dropdownlink” id=“link1”><a href=“#”>Domestic</a></li>
<li class=“dropdownlink” id=“link2”><a href=“#”>International</a></li>
</ul>
</li>
<li class=“dropdown”><a onclick=“Loadteampage(); return false;”>Team</a></li>
</ul>
Here is the JavaScript:
function Loadpage(){
window.location.href=“Page1.html”;
}
function Loadteampage(){
window.location.href=“Team.html”;
}
Here is the CSS
.Mainmenu{
height: 15px;
font-family: Calibri;
font-size 12. 5px;
display: inline;
position: absolute;
width: 100%;
line-height: 15px;
text-align: center;
list-style: none;
top 18px;
}
.Mainmenu a{
float: left;
font-size: 14px;
color: #FAF6AF;
text-align: center;
padding: 5px 10px;
text-decoration: none;
height: 15px;
line -height: 15px;
transition: all 0.7s ease;
}
ul.Mainmenu > li{
float: left;
position: relative;
}
ul.Mainmenu li > a{
height: 15px;
line-height: 15px;
text-align: Center;
display: block;
background: #000000;
color: #FAF6AF;
white-space: nowrap;
}
ul.Mainmenu li:hover > a{
background-color: #FAF6AF;
color #000000;
cursor: pointer;}
ul.Mainmenu > li ul {
display: none;
position: absolute;
}
ul.Mainmenu > li:hover ul{
display: block;
cursor: pointer;
}
ul.Mainmenu > li ul li{
display: block;
position: relative;
top: 25px;
left: -40px;
}
.dropdownlink a{
text-align: center;
line-height: 15px;
font-size: 12.5px;
padding: 0px 0px 0px 0px;
margin: 0;
width: 100%;
}
The “About us” should act as dropdown when hovered on and act as link when clicked. But the onclick and href on “About us” is not working. Even I tried alert(); in onclick but it’s not working.
Please find the JSFIDDLE Link below:
JSFIDDLE
Can someone help me fix this issue?

Edited to include my favorite expand a list javascript
/*
CollapsibleLists.js
An object allowing lists to dynamically expand and collapse
Created by Stephen Morley - http://code.stephenmorley.org/ - and released under
the terms of the CC0 1.0 Universal legal code:
http://creativecommons.org/publicdomain/zero/1.0/legalcode
*/
// create the CollapsibleLists object
var CollapsibleLists =
new function(){
/* Makes all lists with the class 'collapsibleList' collapsible. The
* parameter is:
*
* doNotRecurse - true if sub-lists should not be made collapsible
*/
this.apply = function(doNotRecurse){
// loop over the unordered lists
var uls = document.getElementsByTagName('ul');
for (var index = 0; index < uls.length; index ++){
// check whether this list should be made collapsible
if (uls[index].className.match(/(^| )collapsibleList( |$)/)){
// make this list collapsible
this.applyTo(uls[index], true);
// check whether sub-lists should also be made collapsible
if (!doNotRecurse){
// add the collapsibleList class to the sub-lists
var subUls = uls[index].getElementsByTagName('ul');
for (var subIndex = 0; subIndex < subUls.length; subIndex ++){
subUls[subIndex].className += ' collapsibleList';
}
}
}
}
};
/* Makes the specified list collapsible. The parameters are:
*
* node - the list element
* doNotRecurse - true if sub-lists should not be made collapsible
*/
this.applyTo = function(node, doNotRecurse){
// loop over the list items within this node
var lis = node.getElementsByTagName('li');
for (var index = 0; index < lis.length; index ++){
// check whether this list item should be collapsible
if (!doNotRecurse || node == lis[index].parentNode){
// prevent text from being selected unintentionally
if (lis[index].addEventListener){
lis[index].addEventListener(
'mousedown', function (e){ e.preventDefault(); }, false);
}else{
lis[index].attachEvent(
'onselectstart', function(){ event.returnValue = false; });
}
// add the click listener
if (lis[index].addEventListener){
lis[index].addEventListener(
'click', createClickListener(lis[index]), false);
}else{
lis[index].attachEvent(
'onclick', createClickListener(lis[index]));
}
// close the unordered lists within this list item
toggle(lis[index]);
}
}
};
/* Returns a function that toggles the display status of any unordered
* list elements within the specified node. The parameter is:
*
* node - the node containing the unordered list elements
*/
function createClickListener(node){
// return the function
return function(e){
// ensure the event object is defined
if (!e) e = window.event;
// find the list item containing the target of the event
var li = (e.target ? e.target : e.srcElement);
while (li.nodeName != 'LI') li = li.parentNode;
// toggle the state of the node if it was the target of the event
if (li == node) toggle(node);
};
}
/* Opens or closes the unordered list elements directly within the
* specified node. The parameter is:
*
* node - the node containing the unordered list elements
*/
function toggle(node){
// determine whether to open or close the unordered lists
var open = node.className.match(/(^| )collapsibleListClosed( |$)/);
// loop over the unordered list elements with the node
var uls = node.getElementsByTagName('ul');
for (var index = 0; index < uls.length; index ++){
// find the parent list item of this unordered list
var li = uls[index];
while (li.nodeName != 'LI') li = li.parentNode;
// style the unordered list if it is directly within this node
if (li == node) uls[index].style.display = (open ? 'block' : 'none');
}
// remove the current class from the node
node.className =
node.className.replace(
/(^| )collapsibleList(Open|Closed)( |$)/, '');
// if the node contains unordered lists, set its class
if (uls.length > 0){
node.className += ' collapsibleList' + (open ? 'Open' : 'Closed');
}
}
}();
the Html recommended is
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vakram Mohan Help</title>
<link rel="stylesheet" href="reset.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en">
<script type="text/javascript" src="CollapsibleLists.js"></script>
</head>
<body>
<div>
<UL id="Mainmenu">
<li>
<h2><span>Menu</span></h2>
<ul>
<li> <span><a onclick=“window.location.reload()”>Home</a></span></li>
<li><span>About us</span>
<ul>
<li><span><a href=“#”>Domestic</a></span></li>
<li><span><a href=“#”>International</a></span></li>
</ul>
</li>
</ul>
</li><!--Menu end -->
</UL> <!-- Main Menu end -->
</body>
<script language="javascript" type="text/javascript">
function btntest_onclick()
{
window.location.href = "http://www.google.com";
}
</script>
<script>
CollapsibleLists.applyTo(document.getElementById('Mainmenu'));
</script>
</head>
</html>
Notice i am not using your CSS file.
it was a mess
#para1 {
text-align: center;
color: red;
}
that is a ID selector
.center {
text-align: center;
color: red;
}
that is a Class selector.
Reset.css is here
html, body, header, footer, hgroup, nav, main, article, section, figure, figcaption, h1, h2, h3, ul, li, body, div, p, img
{
margin: 0;
padding: 0;
font-size: 100%;
vertical-align: baseline;
border: 0;
}

hover in css have does no effect when element is hoverd

So I made a bunch of divs stacked on each other, and I want each div to change its background color whenever its hover, but that's not what happens
When I hover an item its background color should change to green,
but it doesn't work even that I wrote div.oldiv:hover{background-color: #48FF0D;}
The problem is probably in CSS code.
Here is a snippet :
body{
background-color: #48FF0D;
}
#bigdiv {
height: 90%;
width: 100%;
}
.oldiv {
height: 0.390625%;
width: 100%;}
div.oldiv:hover{
background-color: #48FF0D;
}
#bigdiv2 {
height: 0;
width: 100%;
}
.btn {
border: none;
color: white;
padding: 14px 28px;
cursor: pointer;
}
.uptodown {
background-color: #e7e7e7;
color: black;
}
.uptodown:hover {
background: #ddd;
}
.l{
float: right;
}
<body>
<script>
var b = "",k = "",a,q,d;
for(a = 0;a<=256;a++){
d =" <div id=\"du\" class=\"oldiv\" style=\"background-color: rgb("+a+","+a+","+a+");\"></div>";
q =" <div id=\"du\" class=\"oldiv\" style=\"background-color:rgb("+(256-a)+","+(256-a)+","+(256-a)+");\"></div>";
b = b+"\n"+d;
k = k+"\n"+q;
}
window.onload = function (){
document.getElementById("bigdiv").innerHTML = b;
document.getElementById("bigdiv2").innerHTML = k;
}
function utd(a){
var bigdiv = document.getElementById("bigdiv");
var bigdiv2 = document.getElementById("bigdiv2");
if(a == 0){
bigdiv.style.height = "0";
bigdiv2.style.height= "90%";
}else{
bigdiv.style.height = "90%";
bigdiv2.style.height= "0";
}
}
</script>
<div id="bigdiv">
</div>
<div id="bigdiv2">
</div>
<div>
<button class="btn uptodown" onclick="utd(0)">white to black</button>
<button class="btn uptodown l" onclick="utd(1)">black to white</button>
</div>
</body>
Don't word about all the Javascript, its just to generate elements and adding them to HTML

I have no idea what the purpose of this code is, but I think I have fixed it..... Whatever it is :P
Your #bigdiv and #bigdiv2 percentage height were not working because the height of the document wasn't 100%. So I just added html, body {height:100%;} to fix that.
/* code added START */
html, body {
height:100%;
}
div.oldiv:hover {
background-color: #48FF0D!important;
}
/* code added END */
body{
background-color: #48FF0D;
}
#bigdiv {
height: 90%;
width: 100%;
}
.oldiv {
height: 0.390625%;
width: 100%;
}
/* div.oldiv:hover{background-color: #48FF0D;} */
#bigdiv2 {
height: 0;
width: 100%;
}
.btn {
border: none;
color: white;
padding: 14px 28px;
cursor: pointer;
}
.uptodown {
background-color: #e7e7e7;
color: black;
}
.uptodown:hover {
background: #ddd;
}
.l {
float: right;
}
<script>
var b = "",k = "",a,q,d;
for(a = 0;a<=256;a++){
d =" <div id=\"du\" class=\"oldiv\" style=\"background-color: rgb("+a+","+a+","+a+");\"></div>";
q =" <div id=\"du\" class=\"oldiv\" style=\"background-color:rgb("+(256-a)+","+(256-a)+","+(256-a)+");\"></div>";
b = b+"\n"+d;
k = k+"\n"+q;
}
function utd(a) {
var bigdiv = document.getElementById("bigdiv");
var bigdiv2 = document.getElementById("bigdiv2");
if(a == 0) {
bigdiv.style.height = "0";
bigdiv2.style.height= "90%";
} else {
bigdiv.style.height = "90%";
bigdiv2.style.height= "0";
}
}
</script>
<div id="bigdiv">
<script>document.write(b);</script>
</div>
<div id="bigdiv2">
<script>document.write(k);</script>
</div>
<div>
<button class="btn uptodown" onclick="utd(0)">white to black</button>
<button class="btn uptodown l" onclick="utd(1)">black to white</button>
</div>

Well, there is no use of Javascript here. I'm not able to understand what problem you're facing but refer here : https://www.w3schools.com/cssref/sel_hover.asp
CSS already has property of hover and can be used like element:hover {your properties inside like whatever event has to be happened on hover}. There is no need to use JS here. Hope this helps.
UPDATE:
I would also suggest you to follow good practice of writing JS code and CSS code in a separate file not in a HTML file.

scroll on overflow if the children count is more than a number

I would like to add scroll on the <ul> element if the number if <li>s is more than a particular number.
Let's say we have 12 children. I would like to show 7 of them and scroll the remain.
This is what I try:
$(document).ready(function(){
$("ul.ul-scrollable, ol.ul-scrollable").each(function (key, val) {
max_num = $(this).attr('data-maxVisible') || 8;
//console.log(max_num);
var lis = $(this).children('li');
if(lis.length > max_num) {
maxHeight = 0;
for(i = 0; i < max_num; i++) {
maxHeight += +$(lis[i]).outerHeight(true);
//console.log(maxHeight);
}
$(this).css({'max-height' : maxHeight + 'px', 'overflow-y' : 'auto'});
}
});
});
ul {
background: white;
width: 70px;
}
ul li {
padding: 3px;
margin: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="ul-scrollable" data-maxVisible="7">
<li>li1</li>
<li>li2</li>
<li>li3</li>
<li>li4</li>
<li>li5</li>
<li>li6 li6 li6</li>
<li>li7</li>
<li>li8</li>
<li>li9</li>
<li>li10</li>
<li>li11</li>
<li>li12</li>
<li>li13</li>
</ul>
But, the calculation for Height is not applicable correctly.
JS FIDDLE

An easier way of accomplishing the same effect is to grab the 7th index's distance from the top and then setting the max-height to that.
$(document).ready(function(){
$("ul.ul-scrollable, ol.ul-scrollable").each(function (key, val) {
var distance = $(this).children('li').eq(7).offset().top;
$(this).css({'max-height' : distance + 'px', 'overflow-y' : 'auto'});
});
});
ul {
background: white;
width: 70px;
}
ul li {
padding: 3px;
margin: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="ul-scrollable" data-maxVisible="7">
<li>li1</li>
<li>li2</li>
<li>li3</li>
<li>li4</li>
<li>li5</li>
<li>li6 li6 li6</li>
<li>li7</li>
<li>li8</li>
<li>li9</li>
<li>li10</li>
<li>li11</li>
<li>li12</li>
<li>li13</li>
</ul>