i want to toggle two menus offered by two buttons.the issue is when i click on button one, it shows the menu bound with button one but when i click the other, it shows both instead of hiding the first one and vice versa, on my login page. The menus are identified by the ids of; 'reqpwd' and 'signup' in html / JS. What is worng? also suggest improvement in code if possible. My JS code:
<script>
window.onload = function() {
document.getElementById('reqpwd').style.display = 'none';
document.getElementById('signup').style.display = 'none';
};
function chk(elm) {
var signup_ = signup.id;
var reqpwd_ = reqpwd.id;
elm_ = elm.id;
if (elm_ == reqpwd_){
hide(signup_);
show(reqpwd_);
}
if (elm_== signup_){
hide(reqpwd_);
show(signup_);
}
};
function show(abc) {
var menuBox = document.getElementById(abc);
if(menuBox.style.display == "none") { // if is menuBox displayed, hide it
menuBox.style.display = "block";
} };
function hide(abc){ // if is menuBox hidden, display it
var menuBox = document.getElementById(abc);
if(menuBox.style.display == "block"){
menuBox.style.display == "none";
}
};
</script>
Instead of menuBox.style.display == "none"; try using menuBox.style.visibility== "hidden";
Edit:
I have changed a few things in your code. Didn't make a whole lot of sense to me the way you're setting the styles on load (missing HTML), so I had to use IDs that made sense to me.
Edit:
Ok, my bad. I updated the code. I think the problem is on hide you're using double equals instead of single equals on menuBox.style.display == "none";. Thus the menu is never hiding.
https://codepen.io/juanferrer/pen/qmOmWa
Finally i have landed into something like this using the flag variable as a state indicator.. now the only requirement is to check toggle as well as disappear the relevant menu by the same button..i.e. if signup menu is already open, the signup or reset button should close it and vice versa.
window.onload = function() {
document.getElementById('regd').style.visibility = 'hidden'; //regisration msg
document.getElementById('rset').style.visibility = 'hidden'; //reset msg
document.getElementById('reqpwd').style.display = 'none';
document.getElementById('signup').style.display = 'none';
};
var flag = 0;
function chk(elm) {
var signup_ = signup.id;
var reqpwd_ = reqpwd.id;
elm_ = elm.id;
if (elm_ == reqpwd_ && flag === 0 || elm_ == reqpwd_ && flag == 2) {
flag = 1;
hide(signup_);
show(reqpwd_);
}
if (elm_ == signup_ && flag === 0 || elm_ == signup_ && flag == 1) {
flag = 2;
show(signup_);
hide(reqpwd_);
}
if (elm_ == reqpwd_ && flag == 1 || elm_ == signup_ && flag == 2) {
hide(elm_);
flag = 0;
}
};
function show(abc) {
var menuBox = document.getElementById(abc);
if (menuBox.style.display === "none") { // if is menuBox hidden, display it
menuBox.style.display = "block";
}
};
function hide(abc) { // if is menuBox
var menuBox = document.getElementById(abc);
if (menuBox.style.display === "block") { //if displayed, hide it
menuBox.style.display = "none";
}
};
Related
After the visibility of the selected element is changed to "visible" on the click of the button, I would like it to change back to "hidden" when the button is clicked again. So basically I would like to toggle the button.
But it seems not to be working. Can I get some direction as to what to do to solve this?
//Imported jumbotron element
var jumbo = document.getElementById("bill-board");
//project, skills and contact elements
var projects = document.getElementById("projects");
var skills = document.getElementById("skills");
var contact = document.getElementById("contact");
//Functionality that takes place when projects, skills and contact are clicked
//When the projects element is clicked
projects.addEventListener("click", () => {
if(document.getElementById("one").style.visibility = "hidden") {
one.style.visibility = "visible";
jumbo.textContent = "Projects";
console.log("It's visible and bill-board is changed to projects");
} else {
one.style.visibility = "hidden";
}
})
//When skills element is clicked
skills.addEventListener("click", () => {
if(document.getElementById("two").style.visibility = "hidden") {
two.style.visibility = "visible";
jumbo.textContent = "skills";
console.log("It's visible and bill-board is changed to skills");
} else {
one.style.visibility = "hidden";
}
})
//When contact element is clicked
contact.addEventListener("click", () => {
if(document.getElementById("three").style.visibility = "hidden") {
three.style.visibility = "visible";
jumbo.textContent = "Contacts";
console.log("It's visible and bill-board is changed to contacts");
} else {
one.style.visibility = "hidden";
}
})
Hi
Basically there are two problems
Problem 1
you are checking the status of visibility incorrectly.
if(document.getElementById("one").style.visibility = "hidden")
This should be as follows:
if(document.getElementById("one").style.visibility == "hidden")
The equality operator is ==.
Problem 2
inside this snippet
if(document.getElementById("one").style.visibility = "hidden") {
one.style.visibility = "visible";
jumbo.textContent = "Projects";
console.log("It's visible and bill-board is changed to projects");
} else {
one.style.visibility = "hidden";
}
you are not storing the element you got by calling document.getElementById("one")
into the variable "one" ..i.e the above snippet should be this.
let one = document.getElementById("one");
if(one.style.visibility == "hidden") {
one.style.visibility = "visible";
jumbo.textContent = "Projects";
console.log("It's visible and bill-board is changed to projects");
} else {
one.style.visibility = "hidden";
}
Similarly you should do for two and three.
I've been trying to create a mobile navigation menu with HTML and javascript.
So I created four links, a checkbox and a function that can hide the links when the checkbox is unchecked and unhide them when it is checked, it works fine, the only problem is I do not want the function to execute if the screen width is more than 516px.
Here's what I've got so far ("toggle" is the ID of the checkbox and "links" is the ID of the links):
function togglemenu() {
var toggle = document.getElementById("toggle");
var links = document.getElementById("links");
if (toggle.checked == true){
links.style.display = "block";
}
if (toggle.checked == false){
links.style.display = "none";
}
}
Here is my updated code:
function togglemenu() {
var toggle = document.getElementById("toggle");
var links = document.getElementById("links");
if (document.body.clientWidth <= 516) {
if (toggle.checked == true){
links.style.display = "block";
}
if (toggle.checked == false){
links.style.display = "none";
}
}
It still isn't working.
Here is the whole thing in jsfiddle...
You can use window.matchMedia(). See Receiving query notifications
if (window.matchMedia("(min-width: 516px)").matches) {
/* The viewport is at least 516 pixels wide */
} else {
/* The viewport is less than 516 pixels wide */
// do stuff
}
The if statement checks the document.body.clientWidth as recommended here: https://developer.mozilla.org/en-US/docs/Web/API/Document/width
document.querySelector('#test').addEventListener('click', test);
function test(event) {
let target = document.querySelector('#content');
target.innerHTML = `screen width ${document.body.clientWidth}px`;
if(document.body.clientWidth <= 516) {
target.innerHTML = Date.now().toString();
}
}
<button id="test">Test</button>
<div id="content"></div>
you can use below code to add a condition in your code.
if (window.screen.width > 516 ){
// do stuff
}
Here is link for more info.
use $(window).width() in if statement to get the width of the user window, then check if it is greater than 516px
JQUERY Code:
function togglemenu() {
var toggle = document.getElementById("toggle");
var links = document.getElementById("links");
if ($(window).width() > 516) {
//if width is greater than 516px
if (toggle.checked == true) {
links.style.display = "block";
}
if (toggle.checked == false) {
links.style.display = "none";
}
}
}
JS Code:
document.body.clientWidth use this instead for pure js, you're missing an end bracket } in function togglemenu()
function togglemenu() {
alert(document.body.clientWidth);//to check the current client width
if (document.body.clientWidth <= 516) {
alert("working");//just to check if it really works
var toggle = document.getElementById("toggle");
var links = document.getElementById("links");
if (toggle.checked == true) {
links.style.display = "block";
}
if (toggle.checked == false) {
links.style.display = "none";
}
}
}
This condition is not working. When I click, it should hide all li elements and when I click again it should show all the li elements that are hidden but its not working
hide.addEventListener("click", function() {
Array.from(list.children).forEach(function(k){
if(k.style.display === "block") {
k.style.display = "none";
hide.textContent = "Show";
list.style.backgroundColor = "rgba(0, 0, 0, 33%)";
list.style.borderRadius = "8px";
document.querySelector(".hidden").style.display = "block";
input.setAttribute("disabled", "disabled");
}
else if (k.style.display === "none") {
hide.textContent = "Hide";
k.style.display = "block";
list.style.backgroundColor == "transparent";
list.style.borderRadius = "";
document.querySelector(".hidden").style.display = "none";
input.removeAttribute("disabled");
}
else {
};
})
});
Array.from(list.children).forEach(function(k){
if(k.style.display == "block") {
k.style.display = "none";
hide.textContent = "Show";
list.style.backgroundColor = "rgba(0, 0, 0, 33%)";
list.style.borderRadius = "8px";
document.querySelector(".hidden").style.display = "block";
input.setAttribute("disabled", "disabled");
}
else if (k.style.display == "none") {
hide.textContent = "Hide";
k.style.display = "block";
list.style.backgroundColor == "transparent";
list.style.borderRadius = "";
document.querySelector(".hidden").style.display = "none";
input.removeAttribute("disabled");
}
else {
};
});
When you're trying to compare two values remember to use == or === instead of =. When you use = it means your DECLARING a value for something, whereas when you use == or === it means your COMPARING two values of something. Use === only when you want to be truly precise, for example 1 == '1' would be true, whereas 1 === '1' would be false as one is an integer and one is a string so they are not precisely the same.
Also the nice thing about JQuery is that you can use lots of its inbuilt functions to toggle certain things, in this case you could use .toggleClass() and have the same effect:
Array.from(list.children).forEach(function(k){
k.toggleClass('hidden');
});
And then in your CSS you could have:
.hidden {
display = 'block';
}
I have created a function that shows/hides different messages according to a combination of select dropdowns that works fine in chrome and FF using the window.onchange event. Can anyone tell me why this doesn't work in ie and if they have a solution please.
It had to be built in tables due to internal restriction.
;(function(){
document.onchange = function(){
// Initialise variables for drop down options
var homeMove = document.getElementById('homeMove'),
transferOrder = document.getElementById('transferOrder'),
orderComplete = document.getElementById('orderComplete'),
submitBtn = document.getElementById('submitBtn');
// Initialise variables for comments
var comment1 = document.getElementById('comment1'),
comment2 = document.getElementById('comment2'),
comment3 = document.getElementById('comment3');
if((homeMove.value == 'No') && (transferOrder.value == 'No')){
comment2.style.display = 'none';
comment3.style.display = 'none';
comment1.style.display = 'block';
submitBtn.disabled = true;
}
// if Home Move - No AND Transfer Order - Yes. Display nothing. Submit button abled
if((homeMove.value == 'No') && (transferOrder.value == 'Yes')){
comment1.style.display = 'none';
comment2.style.display = 'none';
comment3.style.display = 'none';
submitBtn.disabled = false;
}
// If Home Move - Yes AND Transfer Order - NO. Display comment1. Submit button disables
if((homeMove.value == 'Yes') && (transferOrder.value == 'No')){
comment1.style.display = 'block';
comment2.style.display = 'none';
comment3.style.display = 'none';
submitBtn.disabled = true;
}
// If Home Move - Yes AND Transfer Order - Yes AND Order Complete - Yes. Display comment2 Subhmit button abled
if((homeMove.value == 'Yes') && (transferOrder.value == 'Yes') && (orderComplete.value == 'Yes')){
comment1.style.display = 'none';
comment2.style.display = 'block';
comment3.style.display = 'none';
submitBtn.disabled = false;
}
// If Home Move - Yes AND Transfer Order - Yes and Order Complete - No. Display comment3. Submit button disabled
if((homeMove.value == 'Yes') && (transferOrder.value == 'Yes') && (orderComplete.value == 'No')){
comment1.style.display = 'none';
comment2.style.display = 'none';
comment3.style.display = 'block';
submitBtn.disabled = true;
}
}
})();
Any help with this would be great. Thanks
First, it would be better if instead of doing a document.change, add events to change of drop downs.
Sometimes onpropertychange is a more sure shot event to rely on for ie. but make sure for that event, you do a subsequent check that the event is for a change in value by adding the following filter:
yourselectboxelement.onpropertychange = function() {
if (window.event.propertyName == "value") {
// Do stuff here
}
};
IE only fires the onchange event when the element loses focus
Try to use onclick event.
I need to check onload if an anchor is within the URL to open a tab if required. The problem is that if a user opens a tab before the onload function gets fired, the tab gets closed and the user needs to open it again.
How to fix that?
HTML:
<body onload="checkurl()">
JS:
function checkurl(){
if (window.location.hash == '#about')
{
showhide('secabout');
}
else if (window.location.hash == '#contact')
{
showhide('seccontact');
}
}
JS function:
var divState = {};
function showhide(id) {
if (document.getElementById) {
var divid = document.getElementById(id);
divState[id] = (divState[id]) ? false : true;
for (var div in divState){
if (divState[div] && div != id){
document.getElementById(div).style.display = 'none';
divState[div] = false;
}
}
divid.style.display = (divid.style.display == 'block' ? 'none' : 'block');
}
}
Thanks.
Uli
I'm pretty sure that <script> tags inside of <head> execute right away before onload() so try that.
You can call the function with an extra parameter to make sure will show in your load function.
Then check on a global initialized variable to check if the function has already been executed by user when running from the checkurl function. This is required if the user clicks on a different tab than the one specified in the URL.
Also you need to check on divState[id] instead of divid.style.display == 'block' when updating divid.style.display at bottom.
function checkurl(){
if (window.location.hash == '#about')
{
showhide('secabout', true);
}
else if (window.location.hash == '#contact')
{
showhide('seccontact', true);
}
}
var divState = {};
var initialized = false;
function showhide(id, initialize) {
if(initialized && initialize) return;
initialized = true;
if (document.getElementById) {
var divid = document.getElementById(id);
divState[id] = (divState[id]) ? false : true;
for (var div in divState){
if (divState[div] && div != id){
document.getElementById(div).style.display = 'none';
divState[div] = false;
}
}
if(initialize){
divid.style.display = 'block';
} else {
divid.style.display = (divState[id] ? 'block' : 'none');
}
}
}