I'm using pure JS and flexbox to create grid for my project.
Parts of the project are hidden with display: none at page load, but after clicking the button it should toggle between display none and block.
Sadly this completely either ruins display: flex or does not toggle. Is there any way to make these 2 properties work together?
Here is JSfiddle i put together
https://jsfiddle.net/c3dw0woa/
<div class="container">
<div>Text hello I was hidden</div>
</div>
<button class="dis_legend">Click to display</button>
CSS
.container{
display: flex;
}
JS
var container = document.querySelector('.container');
container.style.display = "none";
var legend_button = document.querySelector('.dis_legend');
var container_displayed = false;
container.style.display = "none";
legend_button.onmousedown = function(){
if(legend_displayed == false){
container.style.display = "block";
container_displayed = true;
} else {
container_displayed.display = "none";
container_displayed = false;
}
}
You an always use display= flex in js, to avoid the problem
I changed a few things in your javascript code
See result:
var container = document.querySelector('.container');
var legend_button = document.querySelector('.dis_legend');
var container_displayed = false;
container.style.display = "none";
legend_button.onmousedown = function() {
if (container_displayed == false) {
container.style.display = "flex";
container_displayed = true;
} else {
container.style.display = "none";
container_displayed = false;
}
}
.container {
display: flex;
}
<div class="container">
<div>Text hello I was hidden</div>
</div>
<button class="dis_legend">Click to display</button>
Chiller's solution should work, but here's another option in case you want to do it with an event listener:
var container = document.querySelector('.container');
container.style.display = "none";
var legend_button = document.querySelector('.dis_legend');
var container_displayed = false;
container.style.display = "none";
legend_button.addEventListener('click', function(){
if (container.style.display == "none"){
container.style.display = "block";
} else {
container.style.display = "none";
}
})
Related
I'm making a small website and I'm trying to make two elements repeatedly hide and show so it'll look like it's switching between the two. I have a draft code that would do that but I'm not sure how to make it loop.
function MyDraft(){
var x = document.getElementById("one");
var y = document.getElementById("two");
if (y.style.display === "none"){
x.style.display = "none";
y.style.display = "block";
}
else {
x.style.display = "block";
y.style.display = "none";
}
}
If you use classes you can toggle an element having an hidden class (which sets visibility: hidden). Then just add the code that does the toggling for the elements inside setInterval.
// Cache the elements
const boxes = document.querySelectorAll('.box');
// Iterate over the elements toggling their
// `hidden` class
setInterval(() => {
boxes.forEach(box => box.classList.toggle('hidden'));
}, 1000);
.box { width: 30px; height: 30px; background-color: lightgreen; }
.hidden { visibility: hidden; }
<div class="box"></div>
<div class="box hidden"></div>
Just use setInterval
function MyDraft(){
var x = document.getElementById("one");
var y = document.getElementById("two");
if (y.style.display === "none"){
x.style.display = "none";
y.style.display = "block";
}
else {
x.style.display = "block";
y.style.display = "none";
}
}
var interval = setInterval(myDraft, [timeInMilliseconds]);
Save the interval variable somewhere so you can later call clearInterval if you want
My goal is to make a script click continuously on this two button without need to call it manually, my script have the ability to click on the button, but I don't know
how to automate the action, what I'm trying to do is keeping clicking with no number limit of clicks.
The script I used to click on the button
let buttonTags = document.getElementsByTagName("button");
let followButton = "Follow";
let unFollowButton = "Unfollow";
let found;
for (let i = 0; i < buttonTags.length; i++) {
if (buttonTags[i].textContent == followButton || unFollowButton) {
found = buttonTags[i];
break;
}
}
found.click()
This is the test, I used two divs intentionally.
HTML
<div id="hidde">
<button onclick="myFunction()">Follow</button>
</div>
<div id="hidden">
<button onclick="myFunction()">Unfollow</button>
</div>
CSS
body{
display: flex;
}
div{
border: #000 solid 1px;
padding: 20px;
}
#hidden {
display: none;
}
Javascript
function myFunction() {
let y = document.getElementById("hidde");
let x = document.getElementById("hidden");
if (x.style.display === "none") {
x.style.display = "block";
y.style.display = "none";
} else {
x.style.display = "none";
y.style.display = "block";
}
}
You can programatically trigger a click with .click()
https://www.w3schools.com/jsref/met_html_click.asp
But also your use case perfectly suits a Do/While loop :)
The problem is that get the error:
TypeError: div1.style is undefined
Which leads to the problem that the function isn't called and nothing happens.
JS
<script type="text/javascript">
function siteChange() {
var div1 = board1;
var div2 = board2;
if (div1.style.visibility == "collapse") {
div2.style.visibility = "collapse";
div1.style.visibility = "visible";
} else {
div1.style.visibility = "collapse";
div2.style.visibility = "visible";
}
}
</script>
CSS
.FullDiv {
height: 100%;
width: 100%;
}
ASP
<div id="board1" class="FullDiv">
<dx:ASPxDashboardViewer ID="ASPxDashboardViewer1" runat="server" ClientInstanceName="board1" DashboardSource="~/PP_Dashboard_all.xml" Height="100%" Width="100%"></dx:ASPxDashboardViewer>
</div>
<div id="board2" class="FullDiv" style="visibility: collapse">
<dx:ASPxDashboardViewer ID="ASPxDashboardViewer2" runat="server" ClientInstanceName="board2" DashboardSource="~/PP_Dashboard2.xml" Height="100%" Width="100%"></dx:ASPxDashboardViewer>
</div>
ASP function call
1
2
It can not be able to map your board1 and board2 that's why it is give an error:
function siteChange() {
var div1 = document.getElementById("board1");//change this
var div2 = document.getElementById("board2");//change this
if (div1.style.visibility == "collapse") {
div2.style.visibility = "collapse";
div1.style.visibility = "visible";
} else {
div1.style.visibility = "collapse";
div2.style.visibility = "visible";
}
}
Now its work for you.
I guess it should be: var div1 = document.getElementById("board1") instead of var div1 = board1
why does this not work? I want to click a button to show the "nav", and then if the "nav" is blocked the "move" will be text-aligned to center.
I know I could just textAlign it the "move" with the same button, but that is not what I'm looking for.
const btn = document.getElementById('btn');
const nav = document.getElementById('nav');
const move = document.getElementById('move');
btn.addEventListener('click', () => {
if (nav.style.display === "none") {
nav.style.display = "block";
} else {
nav.style.display = "none";
}
});
if (nav.style.display === "block") {
move.style.textAlign = "center";
}
#nav {
background-color: lightblue;
display: none;
}
li {
display: inline;
}
<div id="nav">
<li>one</li>
<li>two</li>
<li>three</li>
</div>
<div id="move">
<h4>Hello</h4>
</div>
<button id="btn">change</button>
const btn = document.getElementById('btn');
const nav = document.getElementById('nav');
const move = document.getElementById('move');
const btn = document.getElementById('btn');
const nav = document.getElementById('nav');
const move = document.getElementById('move');
btn.addEventListener('click', () => {
if (nav.style.display === "none") {
nav.style.display = "block";
move.style.textAlign = "center";
} else {
nav.style.display = "none";
}
});
Try to use, in this way you force the text inside #nav to be aligned in the center.
#nav {
background-color: lightblue;
display: none;
text-align: center;
}
If you need to change the inline style dynamically based on some condition in javascript you could consider looking at the inline style of your dom node using style property ex: nav.style.display
A simple example:
if (nav.style.display === "none") {
nav.style.display = "block";
move.style.textAlign = "center";
} else {
nav.style.display = "none";
}
More info on style property can be found here.
I'm a total beginner in Javascript, and I came across this script for a show/hide toggle:
<script language="javascript">
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "show";
}
else {
ele.style.display = "block";
text.innerHTML = "hide";
}
}
</script>
I would like to change the font size of the "show" and "hide" in this code. Seems like a really easy task, but I've looked everywhere and can't find an answer.
Also another question, how could I modify the code so that I don't have to copy and paste the whole code and changing toggle() to toggle2(), toggle3() for each separate show/hide toggle on the same page?
Thank you very much!
You can use element.style.fontSize to dynamically set the font size of an element.
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.style.fontSize = "50px";
text.innerHTML = "show";
} else {
ele.style.display = "block";
text.style.fontSize = "30px";
text.innerHTML = "hide";
}
}
document.getElementById("displayText").addEventListener('click', function(){
toggle();
});
#toggleText{
display:none;
}
#displayText{
color: #00af00;
background: #d9d9d9;
padding: 4px 20px;
display: inline-block;
text-decoration:none;
}
<p id="displayText">show</p>
<div id="toggleText">
Hidden or naw?
</div>
You don't have to create toggle2, toggle3, This will make your code redundant. Instead, add a parameter on your toggle to pass the toggleText.
<script language="javascript">
function toggle(toggleText) {
var ele = document.getElementById(toggleText);
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "show";
}
else {
ele.style.display = "block";
text.innerHTML = "hide";
}
}
</script>
For the font, you can have this on your css.
<style>
#displayText {
font: bold 12px Georgia, serif;
}
</style>