I am having a difficult time finding out what's wrong with my mobile menu. I only want the menu items to show up when I press the button in mobile. Please view the URL on any mobile device.
URL: www.patrickmmangan.com/employment
Relevant JS:
function menuBar() {
var x = document.getElementById("links");
if (x.style.display === "inline-block") {
x.style.display = "none";
} else {
x.style.display = "inline-block";
}
}
Maybe you can try this,just initialize the display style first
<div id="links" style="display: none;">
Related
I wrote a function to show my span#note- element when span#note is clicked. I want to make span#note- hidden by default, but I can't.
My code:
<h1>Republic of Labrador<br>Sub-Presidential Elections <span onclick="showOnClick()" id="note" title="Not all candidates are listed, and the vote ratioes for the listed candidates are approximated.
Hover over a candidate's name to see their vote ratio.">ⓘ</span></h1>
<br>
<span id="note-">Not all candidates are listed, and the vote ratioes for the listed candidates
are approximated.<br>Hover over a candidate's name to see their vote ratio.</span>
<script>
function showOnClick() {
var x = document.getElementById("note-");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
My attempt at hiding span#note- by default:
<span id="note-" onload="hideOnLoad()">Not all candidates are listed, and the vote ratioes for the listed candidates
are approximated.<br>Hover over a candidate's name to see their vote ratio.</span>
<script>
function hideOnLoad() {
var y = document.getElementById("note-");
y.style.display = "none";
}
function showOnClick() {
var x = document.getElementById("note-");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
I expected span#note- to be hidden by default.
I think you forgot to call your hideOnLoad() function. Either way I think you should hide the element by using CSS by using style="display: none;".
onLoad only works on external resources such as images or the tag. If you want to keep your second example, you'll have to move the onLoad="hideOnLoad()" attribute all the way up to the body tag.
The simpler solution would be to just hide it as part of the initial style of the element style="display:none; in the html. Below is your first example with the element updated.
<h1>Republic of Labrador<br>Sub-Presidential Elections <span onclick="showOnClick()" id="note" title="Not all candidates are listed, and the vote ratioes for the listed candidates are approximated.
Hover over a candidate's name to see their vote ratio.">ⓘ</span></h1>
<br>
<span id="note-" style="display: none;">Not all candidates are listed, and the vote ratioes for the listed candidates
are approximated.<br>Hover over a candidate's name to see their vote ratio.</span>
<script>
function showOnClick() {
var x = document.getElementById("note-");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
The easiest way to hide an element by default is with the CSS display property
You can simply add a CSS rule inline inside the HTML tag. Or you can follow better practice and create a separate CSS file.
1. Inline Rule:
Simply add a style attribute to your tag.
<span id="note-" style="display:none;">any content here will not be displayed on initial load</span>
2. CSS File:
Create a separate file called styles.css. In that file create a rule:
span#note- {
display: none;
}
Back in your HTML file, in between the head tags atop the file, link your stylesheet:
<head>
<link rel="stylesheet" href="styles.css">
</head>
Read more at CSS display. In addition to display, you can also try the visibility property if you want the content to take up its space on the page but just not show the content.
In your case, once you have used one of these CSS methods to hide the element, it will be hidden on initial load of the page, and then your showOnClick() script should work to toggle the display on and off.
It looks like your code is correct you just need to call each function. I'm getting it to work correctly when I run the code like this.
function hideOnLoad() {
var y = document.getElementById("note-");
y.style.display = "none";
}
function showOnClick() {
var x = document.getElementById("note-");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
showOnClick(); // Call onclick
hideOnLoad(); // Hide Span on default
Your problem is the onload trigger, it won't work on a . You need to set your code like this, after your 2 functions:
document.addEventListener('load', () => {
hideOnLoad();
})
That said, it would probably be better to set it as display: none; via CSS or style, and simply showing it when needed.
I am having trouble with this javascript function - when I do the first paragraph by itself it functions normally, but when I create and run the second paragraph, the first show and hide function (ABOUT THE PROJECT) toggles the text to appear on the second paragraph (dialogueOne). Tried renaming id's and the show and hide function and it's not working. I'm running this through cargo collective, the images are hosted through CC and so are called image 4 and image 5.
A link to the page: https://alexabunnell.com/deathspins-spun
<script>
function ShowAndHide() {
var x = document.getElementById('didactic');
if (x.style.display == 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>
<div onclick="ShowAndHide()"><h2>ABOUT THE PROJECT ︎︎︎</h2></div>
<div id="didactic" style="display: block;">{image 4}
</div>
</div>
<div grid-col="1" grid-pad="5"> </div>
</div><div grid-row="" grid-pad="5" grid-gutter="10">
<div grid-col="1" grid-pad="5"></div>
<div grid-col="11" grid-pad="5" class="">
<script>
function ShowAndHide() {
var y = document.getElementById('dialogueOne');
if (y.style.display == 'none') {
y.style.display = 'block';
} else {
y.style.display = 'none';
}
}
</script>
<div onclick="ShowAndHide()">{image 5}</div>
<div id="dialogueOne" style="display: block;"><div style="text-align: center"><h2>Text to be shown and hidden</h2></div></div></div></div>
You have two functions both named ShowAndHide. The second declaration replaces the first one, so any time you invoke it you’ll get the behavior of the latter one.
One solution would be to pass the ID in as an argument to the function instead of hard coding it.
function ShowAndHide(id) {
const element = document.getElementById(id);
// …do whatever you need to do with element
}
<div onClick="ShowAndHide('someid')">…</div>
<div onClick="ShowAndHide('someotherid')">…</div>
I saw the answers from similar questions but they did not help me
I have a button that when clicked, will change the background color of the button and hide/show some content
HTML
<button class="pro-saved-team-btn" id="{{ teams[loop.index0] | replace(' ', '') + 'button' }}"
onclick="show_team('{{ team | replace(' ', '') }}', '{{ team | replace(' ', '') + 'button' }}')">
{{ team.title() }}
</button>
JS in HTML
<script>
function show_team(team, team_btn) {
x = document.getElementById(team);
btn = document.getElementById(team_btn);
if (x.style.display === "none") {
x.style.display = "block";
btn.style.backgroundColor = '#1DA1F2';
} else {
x.style.display = "none";
btn.style.backgroundColor = '#161616';
}
}
</script>
I know the function works but I need to click on the button twice for the background color to change.
Anyone know how to fix this so it works after only one click?
The problem is that when things start up noone has set the style of property display.
Hence the first time round the test x.style.display === "none" fails.
So then the code goes to set x.style.display to 'none'.
So the next time round the test wprks.
To avoid having to set every style display to none at the start change
x.style.display === "none"
to:
x.style.display != "block"
The problem does not reproduce with the code snippet you've given:
<html>
<html>
<head>
</head>
<body>
<div id="teamId"> hee hee hee </div>
<button id="buttonId" onclick="show_team('teamId','buttonId')">
click
</button>
<script>
function show_team(team, team_btn) {
x = document.getElementById(team);
btn = document.getElementById(team_btn);
if (x.style.display === "none") {
x.style.display = "block";
btn.style.backgroundColor = '#1DA1F2';
} else {
x.style.display = "none";
btn.style.backgroundColor = '#161616';
}
}
</script>
</body>
</html>
You can do the following:
add logs (console.log('clicked')) to your function so you are sure that every click you make is received by the button - and investigate the source of interceptions if some clicks never made it to button
find whether there are some other places in your code that do something with these button and team IDs
remove class pro-saved-team-btn from the button and check whether it changes button onclick behavior
I have multiple HTML elements on the same page and I only want to show a specified 3 elements at a time. Below, I have some code that I got to work. But I have 2 functions for each button and 9 buttons. So I have been trying to figure out what I can do to reduce the bulk. By my estimate it would be 1008 lines of code for this table of contents of 9 buttons.
function clickInfoCampfer() {
var x = document.getElementById("campferfullcard1");
if (x.style.display === "block") {
x.style.display = "block";
} else {
x.style.display = "block";
}
}
function clickInfoCampferClose() {
var x = document.getElementById("pinefullcard1");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "none";
}
}
This was my best attempt using forEach. It returns an error saying "opencard.forEach is not a function." The first part of the function is working and manages to close all the elements.
const squares = document.querySelectorAll('.table-of-contents-college-all label');
const allwoodcards = document.querySelectorAll('.all-wood-cards');
squares.forEach(square => {
square.addEventListener('click', clickOutcome)
})
function clickOutcome() {
const opencards = this.getAttribute("opencard");
//opencard=".full-card-campfer"//
allwoodcards.forEach(woodcard => {
woodcard.style.display = "none"
});
opencards.forEach(openup => {
openup.style.display = "block";
});
}
Thanks for your thoughts.
Edit
HTML was requested. This HTML is supporting the forEach Java I have above. It was altered slightly from supporting the first HTML I had. There are many more div elements, I just included Pine and Campfer as the examples.
<body>
<div class="tableofcontentscollege1 table-of-contents-college-all">
<label type="button"
id="campfer-table-button"
opencard=".full-card-campfer"
>
Campfer
</label>
<label type="button"
opencard=".full-card-pine"
>
Pine
</label>
</div>
<div class="full-card-campfer all-wood-cards"
id="campferfullcard1">
</div>
<div class="full-card-campfer all-wood-cards"
id="campferfullcard2">
</div>
<div class="full-card-campfer all-wood-cards"
id="campferfullcard3">
</div>
<div class="full-card-pine all-wood-cards"
id="pinefullcard1">
<div class="full-card-pine all-wood-cards"
id="pinefullcard2">
<div class="full-card-pine all-wood-cards"
id="pinefullcard3">
</div>
</body>
The goal here is to open the 3 div elements related (in name only) to the button, while closing any other div elements amongst the wood list.
Campfer button opens the 3 divs for the campfer information
Pine button opens the 3 divs for the pine information
Walnut button opens the 3 divs for the walnut information
and so on.
Hopefully that clears up any confusion.
I'm just guessing what you want. In the future, supply more context such as the effect you intend, your HTML, etc.
You just need to put the code you had repeated in the event listener:
const squares = document.querySelectorAll('.table-of-contents-college-all label');
squares.forEach(square => {
square.addEventListener('click', handleClick)
})
function handleClick() {
if (this.style.display === "block") {
this.style.display = "none";
} else {
this.style.display = "none";
}
}
So let's say I have text:
<div class="text">Here is some text.
In this text there are links here
and there are links there.
And there are probably many more!
They each open their own annotation on the side.</div>
And I have the following annotations which I want to open up:
<div class="annotation" id="an1">I'm the first annotation!</div>
<div class="annotation" id="an2">And I'm another one!</div>
And I use a script like the following:
function myAnnotation() {
var x = document.getElementById("an1");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
How can I write a script that will grab the ID of my individual links and then open the appropriate annotation?
try this one.
<div class="text">Here is some text.
In this text there are links here
and there are links there.
And there are probably many more!
They each open their own annotation on the side.</div>
<div class="annotation" id="an3" style="display:none">I'm the first annotation!</div>
<div class="annotation" id="an4" style="display:none">And I'm another one!</div>
<script>
$('.link').on('click',function(e){
var id = e.target.attributes.getNamedItem("data-target").value;
var x = document.getElementById(id);
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
});
</script>
Working Demo
https://jsfiddle.net/0rhnkzuj/1/
function myAnnotation(argument) {
var x = document.getElementById("an" + argument);
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
<div class="text">Here is some text. In this text there are links here and there are links there. And there are probably many more! They each open their own annotation on the side.</div>
<div class="annotation" onclick="myAnnotation(1)">I'm the first annotation!</div>
<div class="annotation" onclick="myAnnotation(2)">And I'm another one!</div>
Note:- You need to create a function and bind that function onClick and pass the parameter there. so you can get dynamic show hide of that function.
Hope this helps !
First: You can't use the same ID twice (or more)
If a understand your question, you want to show up a element on user action (like a click)
I recommend not toggle display.
function myAnnotation(id) {
var x = document.getElementById(id);
x.style.display = "block";
}
<div class="text">Here is some text.
In this text there are links
here
and there are links
there.
And there are probably many more!
They each open their own annotation on the side.</div>
<div class="annotation" style="display:none" id="an1">I'm the first annotation!</div>
<div class="annotation" style="display:none" id="an2">And I'm another one!</div>