We Keep Coding

Hide an item when I click on the menu

I would like to hide an element when I click on the burger button. (The element to hide see CaptureElementNoDisplay.PNG)
I would like to redisplay the item when I click again on the burger button to close the menu.
I managed to make the intro element with the logo hidden when I display the menu. (see CaptureElementNoDisplay.PNG)
But I can't manage to display again the div containing the intro with the logo in the middle. (cf. CaptureElementNoMoreDisplay.PNG)
Link to the website: https://adding.hm-dev.com/1/
Here is the source code.
Source Code HTML :
<nav class="navbar navbar-dark justify-content-end" style="background-color: #0145FF;">
<button id="home" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation"> <span class=" navbar-toggler-icon "></span>
</button></nav>
<section id="intro1" style="height: 652px;background-color: #0145FF; ">
<div class="center logo-intro-1">
<img src="./assets/images/logo_adding.png " alt=" " width="450 ">
</div>
<ul class="nav flex-column text-right pr-5">
<li class="nav-item">
<a class="nav-link2 text-white" href="">Black</a></li>
<li class="nav-item"><a class="nav-link2 text-white" href="#">Red</a></li>
<li class="nav-item"><a class="nav-link2 text-white" href="#">Violet</a></li>
<li class="nav-item"><a class="nav-link2 text-white" href="#">Blue</a></li>
<li class="nav-item"><a class="nav-link2 text-white" href="#">Green</a></li></ul>
</section>
Source Code JavaScript :
$('.navbar-toggler').click(function() {
var booleanNoDisplay = true;
var intro1 = document.getElementById("intro1");
intro1.classList.add("NoDisplay");
if (booleanNoDisplay) {
console.log('ok TRUE');
$('#intro1').show(); // This line is not useful because the element is already displayed by default
booleanNoDisplay = false; //I don't know when to set the value to false...
}
if (!booleanNoDisplay) {
console.log('ok false');
$('#intro1').hide();
intro1.classList.add("display-block");
booleanNoDisplay = true;
}
});
Do you know where the problem could come from?
I thank you in advance for your help.

You need to move var booleanNoDisplay out of your click statement, and then you also need to convert if (!booleanNoDisplay) { into an else if statement, like else if (!booleanNoDisplay) {
Demo
var booleanNoDisplay = true;
$('.navbar-toggler').click(function() {
var intro1 = document.getElementById("intro1");
intro1.classList.add("NoDisplay");
if (booleanNoDisplay) {
console.log('ok TRUE');
$('#intro1').show(); // This line is not useful because the element is already displayed by default
booleanNoDisplay = false; //I don't know when to set the value to false...
} else if (!booleanNoDisplay) {
console.log('ok false');
$('#intro1').hide();
intro1.classList.add("display-block");
booleanNoDisplay = true;
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar navbar-dark justify-content-end" style="background-color: #0145FF;">
<button id="home" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation"> <span class=" navbar-toggler-icon "></span>
</button></nav>
<section id="intro1" style="height: 652px;background-color: #0145FF; ">
<div class="center logo-intro-1">
<img src="./assets/images/logo_adding.png " alt=" " width="450 ">
</div>
<ul class="nav flex-column text-right pr-5">
<li class="nav-item">
<a class="nav-link2 text-white" href="">Black</a></li>
<li class="nav-item"><a class="nav-link2 text-white" href="#">Red</a></li>
<li class="nav-item"><a class="nav-link2 text-white" href="#">Violet</a></li>
<li class="nav-item"><a class="nav-link2 text-white" href="#">Blue</a></li>
<li class="nav-item"><a class="nav-link2 text-white" href="#">Green</a></li>
</ul>
</section>

Key points
If the boolean is inside the click event handler, every time the user clicks on the button, the variable will be true, because is always initialized.
You where adding a class: intro1.classList.add("NoDisplay"); every time the method is executed and that is just complicating things. Is completely unnecessary.
The Boolean variable name is confusing, I changed it to IsDisplayed
Else if is not necessary because there are only two scenarious.
Try the following code
var IsDisplayed = true;
$('.navbar-toggler').click(function() {
var intro1 = document.getElementById("intro1");
if(IsDisplayed){
$('#intro1').hide();
IsDisplayed = false;
} else {
$('#intro1').show();
IsDisplayed = true;
}
});

I reproduce the logic of your code by adapting a little my code. From now on I use the .toggle(). I see that it's the same. I just had to declare some properties in my style.css file.
Here is my JavaScript code:
var isDisplayed = true;
$('.navbar-toggler').click(function() {
var intro1 = document.getElementById("intro1");
if (isDisplayed) {
console.log('ok TRUE');
//$('#intro1').hide();
intro1.classList.toggle("noDisplayElement");
isDisplayed = false;
} else if (!isDisplayed) {
console.log('ok false');
//$('#intro1').hide();
intro1.classList.toggle("displayElement");
isDisplayed = true;
}
});
Here is my CSS code :
.noDisplayElement {
display: none!important;
}
.displayElement {
display: block!important;
}
Now it does almost what I want.
That is, when I click 3 times on the navigation menu on the top left, it displays the menu and the div containing the intro1. I think the problem comes from the condition. What would you recommend to do?
You can see the result on the link of the site: https://adding.hm-dev.com/1/

IE 11 does not show Listbox Items

I would like display combobox on IE 11 by referring this article https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.0pattern/combobox-autocomplete-none.html
but for some reason i can not display the listbox items on IE but for other browsers it works fine. Any idea?
If I try to remove this line
this.domNode = domNode;
it shows me the list but not clickable.
javascript class
/*
* This content is licensed according to the W3C Software License at
* https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
*/
var Option = function (domNode, listboxObj) {
this.domNode = domNode;
this.listbox = listboxObj;
this.textContent = domNode.textContent;
this.textComparison = domNode.textContent.toLowerCase();
};
Option.prototype.init = function () {
if (!this.domNode.getAttribute('role')) {
this.domNode.setAttribute('role', 'option');
}
this.domNode.addEventListener('click', this.handleClick.bind(this));
this.domNode.addEventListener('mouseover', this.handleMouseover.bind(this));
this.domNode.addEventListener('mouseout', this.handleMouseout.bind(this));
};
/* EVENT HANDLERS */
Option.prototype.handleClick = function (event) {
this.listbox.setOption(this);
this.listbox.close(true);
};
Option.prototype.handleMouseover = function (event) {
this.listbox.hasHover = true;
this.listbox.open();
};
Option.prototype.handleMouseout = function (event) {
this.listbox.hasHover = false;
setTimeout(this.listbox.close.bind(this.listbox, false), 300);
};
HTML
<section>
<h2 id="ex_label">Example</h2>
<div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
<div id="ex1">
<div class="combobox-list">
<label for="cb1-input">Search</label>
<div class="group">
<input id="cb1-input" class="cb_edit" type="text"
role="combobox"
aria-autocomplete="none"
aria-expanded="false"
aria-haspopup="true"
aria-owns="cb1-listbox"
readonly
/>
<button id="cb1-button" tabindex="-1" aria-label="Open">
▽
</button>
</div>
<ul id="cb1-listbox" role="listbox" aria-label="Previous Searches">
<li id="lb1-01" role="option">weather</li>
<li id="lb1-02" role="option">salsa recipes</li>
<li id="lb1-03" role="option">cheap flights to NY</li>
<li id="lb1-04" role="option">dictionary</li>
<li id="lb1-05" role="option">baseball scores</li>
<li id="lb1-06" role="option">hotels in NY</li>
<li id="lb1-07" role="option">mortgage calculator</li>
<li id="lb1-08" role="option">restaurants near me</li>
<li id="lb1-09" role="option">free games</li>
<li id="lb1-10" role="option">gas prices</li>
<li id="lb1-11" role="option">classical music</li>
</ul>
</div>
</div>
<div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
</section>

Javascript Get div / Insert Div

I am trying to fetch the div with the id removeNav and paste it back in again.
but my div is undefined.
function init() {
var insertMenu = $("#removeNav").html();
console.log(insertMenu);
window.addEventListener('scroll', function (e) {
var distanceY = window.pageYOffset || document.documentElement.scrollTop,
shrinkOn = 300,
header = document.querySelector(".navbar-collapse"),
removeNav = document.getElementById('removeNav'),
insertNav = document.getElementById('insertNav'),
body = document.querySelector("body");
//var insertMenu = '<div id="removeNav" class="navbar-collapse collapse header"><img class="navbar-left" src="img/MRS_Logo_WEB_Interlaced.png" width="120" height="96"> <ul class="nav navbar-nav navbar-right"> <li class="divider-vertical"></li> <li><a data-toggle="modal" data-target="#myModal" href="#about">Login</a></li> <li class="divider-vertical"></li> <li>Download</li> <li class="divider-vertical"></li> <li class="divider-vertical"></li> <li>Karriere</li> <li>Sitemap</li> <li class="divider-vertical"></li> <li>Impressum</li> <li class="divider-vertical"></li> <form class="navbar-form navbar-right"> <div class="form-group"> <input class="form-control" placeholder="Suchen" type="text"> </div> <button type="submit" class="btn btn-default glyphicon glyphicon-search"></button> </form> </ul></div>';
if(distanceY > shrinkOn){
classie.add(header, "smaller");
removeNav.parentNode.removeChild(removeNav);
} else {
if (classie.has(header, "smaller")) {
classie.remove(header, "smaller");
insertNav.innerHTML = insertMenu;
}
}
});
}
window.onload = init();
My Code:
https://jsfiddle.net/t23nn1pp/

jsFiddle: https://jsfiddle.net/t23nn1pp/6/
I know my fix is a little off your original code, however have you tried just hiding and showing the nav bar?
jQuery
function init() {
var $insertMenu = $("#removeNav");
window.addEventListener('scroll', function (e) {
var distanceY = window.pageYOffset;
var shrinkOn = 100;
if(distanceY > shrinkOn){
$insertMenu.hide();
} else {
$insertMenu.show();
}
});
}
window.onload = init();
CSS for example
body{
min-height: 2000px;
}
#insertNav{
width: 100%;
max-height: 200px;
background-color: #F0F;
}
Html is the same as you provided.

You are mixing jQuery with vanilla JS, change this line:
var insertMenu = $("#removeNav").html();
for
var insertMenu = document.querySelector("#removeNav").innerHTML;
Snippet below (changed console.log for alert just for demo)
function init() {
var insertMenu = document.querySelector("#removeNav").innerHTML;
alert(insertMenu);
window.addEventListener('scroll', function(e) {
var distanceY = window.pageYOffset || document.documentElement.scrollTop,
shrinkOn = 300,
header = document.querySelector(".navbar-collapse"),
removeNav = document.getElementById('removeNav'),
insertNav = document.getElementById('insertNav'),
body = document.querySelector("body");
if (distanceY > shrinkOn) {
classie.add(header, "smaller");
removeNav.parentNode.removeChild(removeNav);
} else {
if (classie.has(header, "smaller")) {
classie.remove(header, "smaller");
insertNav.innerHTML = insertMenu;
}
}
});
}
window.onload = init();
<script src="https://cdnjs.cloudflare.com/ajax/libs/classie/1.0.1/classie.min.js"></script>
<div id="insertNav">
<div id="removeNav" class="navbar-collapse collapse header">
<img class="navbar-left img-responsive logo-margin" src="img/MRS_Logo_WEB_Interlaced.png" height="96" width="120" />
<ul class="nav navbar-nav navbar-right">
<li class="divider-vertical"></li>
<li><a data-toggle="modal" data-target="#myModal" href="#about">Login</a></li>
<li class="divider-vertical"></li>
<li>Download</li>
<li class="divider-vertical"></li>
<li class="divider-vertical"></li>
<li>Karriere</li>
<li>Sitemap</li>
<li class="divider-vertical"></li>
<li>Impressum</li>
<li class="divider-vertical"></li>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="Suchen">
</div>
<button type="submit" class="btn btn-default glyphicon glyphicon-search"></button>
</form>
</ul>
</div>
</div>

Updated
Running your code with the link provided, there are a few things missing.
- jQuery
- Classie
As for jQuery, you can try adding:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
If you fix (or remove, as suggested by others), it'll work.

Error with Javascript on Partial Page Update

I have some scripts which needs to be run when partial page changes. On 1st page Load it seems to be working fine but after partial page is updated javascript stopped working
1st Try:
I tried to put javascript in partial page itself but its not working
2nd Try:
I tried to put javascript on the parent page from which partial page is upadted
Code To Load Partial Page:
#Html.DropDownList("UserType", DirectCast(ViewBag.UserType, SelectList), New With {.onchange = "ChangeUserType(this.value)"})
<div id="renderTreeView">
#Html.Partial("_TreeView")
</div>
<script>
function ChangeUserType(UserType) {
$('#renderTreeView').load("/UserMaster/ChangePermission?iUserTypeID=" + UserType);
}
//And Somme of my other javascript function to create tree view
</script>
This script doesnot work on partial page update
<script>
$(document).ready(function () {
$('#check-all').click(function () {
$("input:checkbox").attr('checked', true);
});
$('#uncheck-all').click(function () {
$("input:checkbox").attr('checked', false);
});
});
$(document).ready(function () {
$('.tree li').each(function () {
if ($(this).children('ul').length > 0) {
$(this).addClass('parent');
}
});
$('.tree li.parent > a').click(function () {
$(this).parent().toggleClass('active');
$(this).parent().children('ul').slideToggle('fast');
});
$('#all').click(function () {
$('.tree li').each(function () {
$(this).toggleClass('active');
$(this).children('ul').slideToggle('fast');
});
});
$('#Add').change(function () {
AddPermission();
});
$('#Change').change(function () {
AddPermission();
});
$('#Delete').change(function () {
AddPermission();
});
$('#View').change(function () {
AddPermission();
});
$('#Print').change(function () {
AddPermission();
});
});
function SetPageNumber(pageID) {
var PageID = document.getElementById("pageID");
PageID.value = pageID
var PermissionsofPage = document.getElementById(pageID).value
var AddCheck = PermissionsofPage.charAt(0);
var ChangeCheck = PermissionsofPage.charAt(1);
var DeleteCheck = PermissionsofPage.charAt(2);
var ViewCheck = PermissionsofPage.charAt(3);
var PrintCheck = PermissionsofPage.charAt(4);
checkUncheckCheckBoxes(AddCheck, ChangeCheck, DeleteCheck, ViewCheck, PrintCheck)
}
function checkUncheckCheckBoxes(AddCheck,
ChangeCheck,
DeleteCheck,
ViewCheck,
PrintCheck) {
//$('#Permission input:checked').removeAttr('checked');
if (AddCheck == 1) {
$('#Add').attr('checked', true);
}
else {
$('#Add').removeAttr('checked');
//$('#Add').attr('checked', false);
}
if (ChangeCheck == 1) {
$("#Change").attr("checked", true);
}
else {
$("#Change").attr("checked", false);
}
if (DeleteCheck == 1) {
$("#Delete").attr("checked", true);
}
else {
$("#Delete").attr("checked", false);
}
if (ViewCheck == 1) {
$("#View").attr("checked", true);
}
else {
$("#View").attr("checked", false);
}
if (PrintCheck == 1) {
$("#Print").attr("checked", true);
}
else {
$("#Print").attr("checked", false);
}
}
function AddPermission() {
var PageIDPermission = document.getElementById("pageID").value;
var Permissions
if ($("#Add").is(":checked")) {
Permissions = "1"
}
else {
Permissions = "0"
}
if ($("#Change").is(":checked")) {
Permissions = Permissions += 1
}
else {
Permissions = Permissions += 0
}
if ($("#Delete").is(":checked")) {
Permissions = Permissions += 1
}
else {
Permissions = Permissions += 0
}
if ($("#View").is(":checked")) {
Permissions = Permissions += 1
}
else {
Permissions = Permissions += 0
}
if ($("#Print").is(":checked")) {
Permissions = Permissions += 1
}
else {
Permissions = Permissions += 0
}
var toSet = document.getElementById(PageIDPermission)
toSet.value = Permissions
}
</script>
This is my Partial Page
<link href="~/assets/css/treeview.css" rel="stylesheet" />
<div class="span6">
<div class="portlet box grey">
<div class="portlet-title">
<div class="caption"><i class="icon-sitemap"></i>Page Permission (#ViewBag.PageNo)</div>
<div class="actions">
Toggle All
</div>
</div>
<div class="portlet-body fuelux">
<div class="tree">
<ul>
<li>
<a >First Level</a>
<ul>
<li>Second Level<input type="text" id="page_2" #*style="display:none"*# value="00000" /></li>
<li><a onclick ="SetPageNumber('page_1')">Second Level</a><input type="text" id="page_1" #*style="display:none"*# value="00000" /></li>
<li><a>Second Level</a></li>
</ul>
</li>
<li>
<a>First Level</a>
<ul>
<li>
<a>Second Level</a>
<ul>
<li><a>Third Level</a></li>
<li><a>Third Level</a></li>
<li>
<a>Third Level</a>
<ul>
<li><a>Fourth Level</a></li>
<li><a>Fourth Level</a></li>
<li>
<a>Fourth Level</a>
<ul>
<li><a>Fifth Level</a></li>
<li><a>Fifth Level</a></li>
<li><a>Fifth Level</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a>Second Level</a></li>
</ul>
</li>
<li>
<a>First Level</a>
<ul>
<li><a>Second Level</a></li>
<li><a>Second Level</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="span2" id="Permission">
<div class="portlet box grey">
<div class="portlet-title">
<div class="caption"><i class="icon-key"></i> Rights</div>
</div>
<div class="portlet-body fuelux">
<div>
<input type="checkbox" id="Add" /> Add
</div>
<div>
<input type="checkbox" id="Change" /> Change
</div>
<div>
<input type="checkbox" id="Delete" /> Delete
</div>
<div>
<input type="checkbox" id="View" /> View
</div>
<div>
<input type="checkbox" id="Print"/> Print
</div>
<div>
<input type="text" id="pageID" #*style="display:none"*# value="0" />
#* <button onclick="ChangeCheckBox()">Toggle</button>*#
</div>
</div>
</div>
</div>

How to get current value of a bootstrap dropdown

What I want to do is:
Select drop-down-list drp0 first and then select drp1.
When you select drp1, if drp0 has no value selected, alert("Please select Leave Type Dropdown first").
Then set drp1 to default value and set focus on drp0.
These are my two dropdowns:
<div class="col-sm-6">
<label>Select Leave Type</label>
<div class="dropdown">
<i class="dropdown-arrow dropdown-arrow-inverse"></i>
<button class="btn btn0 btn-default dropdown-toggle" type="button" id="menu0" data-toggle="dropdown">
--Select--
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-inverse0" role="menu" aria-labelledby="menu0" id="drp0">
<li role="presentation"><a data-myAttribute0="casual" class="list0" href="#">Casual Leave</a></li>
<li role="presentation"><a data-myAttribute0="annual" class="list0" href="#">Annual Leave</a></li>
<li role="presentation"><a data-myAttribute0="medical" class="list0" href="#">Medical Leave</a></li>
</ul>
</div>
</div>
<div class="col-sm-6">
<label>Select Employee Name</label>
<div class="dropdown">
<i class="dropdown-arrow dropdown-arrow-inverse"></i>
<button class="btn btn1 btn-default dropdown-toggle hide-button" type="button" id="menu1" data-toggle="dropdown">
--Select--
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-inverse1" role="menu" aria-labelledby="menu1" id="drp1">
<c:forEach items="${personList}" var="person">
<li role="presentation"><a data-myAttribute1="${person.getId()}" class="list1" href="#">${person.getName()}</a></li>
</c:forEach>
</ul>
</div>
</div>
The second dropdown is populating pretty well. No problem in that.
Actually I found a way to check is dropdown1 is selected or not, While selecting dropdown2? But the problem is when dropdown1 has selected value I get this undefined error alert?
Looks like its not taking the current value of dropdown1.
Here is my code.
<script>
$(document).ready(function () {
$('.dropdown-inverse1 li > a').click(function () {
var $person_id = $(this).attr("data-myAttribute1");
var $leave_type = $(this).attr("data-myAttribute0");
if (typeof $leave_type === 'undefined') {
alert("Empty");
} else {
alert("Not Empty");
}
});
});
</script>
My problem is I get "Empty" alert whether dropdown1 has a value or not. How to fix this? Thank you.

Here is the DEMO and most simplified and better version for your solution:
$('.dropdown-inverse1 li > a').click(function () {
$(".btn1").html($(this).text() + ' <span class="caret"></span>');
});
$('.dropdown-inverse2 li > a').click(function (e) {
var s = $(".btn1").text().trim();
if(s=="Button1"){
alert("Empty");
$(".btn2").html('Button2 <span class="caret"></span>');
setTimeout(function(){
$(".btn1").trigger('click');
},100); //set a timeout of 100ms to trigger the click so as to open the required dropdown
return;
}
$(".btn2").html($(this).text() + ' <span class="caret"></span>');
});
You had some problems in your solution like once you select dropdown the caret i.e. arrow used to get replaced since you were replacing text of .btn1. Now it will replace with caret and content as html. Hope it helps.

$(document).ready(function () {
var $leave_type = "";
$('.dropdown-inverse0 li > a').click(function () {
$leave_type = $(this).attr("data-myAttribute0");
if (typeof $leave_type === 'undefined') {
alert("Empty");
} else {
alert("Not Empty");
}
});
$('.dropdown-inverse1 li > a').click(function () {
var $person_id = $(this).attr("data-myAttribute1");
if (typeof $leave_type === 'undefined') {
if (typeof $person_id === 'undefined') {
alert($leave_type);
} else {
alert("Not Empty");
}
}else{
$('#menu0').trigger('click');
alert("Please select Leave Type");
}
});
});
Heeeyyyy try thiss......

Hi Lots of kind people tried to help me. Thank you for that. As they say best thing is to use bootstrap select but I wanted to use ul li bootstrap dropdown. So if any one interested in that. I found this.
$('document').ready(function () {
$('.dropdown-inverse1 li > a').click(function () {
$(".btn1").text($(this).text());
});
$('.dropdown-inverse2 li > a').click(function () {
$(".btn2").text($(this).text());
var s = $(".btn1").text();
if(!(s=='HTML' || s=='CSS' || s=='JavaScript') ){
alert("Empty");
}
});
});
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="dropdown">
<button class="btn btn1 btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Button1
<span class="caret"></span></button>
<ul class="dropdown-menu dropdown-inverse1">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
<br/>
<div class="dropdown">
<button class="btn btn2 btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Button2
<span class="caret"></span></button>
<ul class="dropdown-menu dropdown-inverse2">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</div>
</div>
</body>