electron: how to hide / show <br /> and <hr /> by button? - javascript

Using electron to develop a windows app to parse my json files. Click buttons to open, edit and save correspond json files. The related html codes are
<div class="rightfixed">
<div id="jsonName">Empty.</div>
<div id="TimeJson">
<div id="Time_StartUTCTimeT"><b>Start UTC Time</b><br />UTC Time when simulation start. [year-month-day
hour:minute:second.microsecond]</div>
<input id="Time_StartUTCTime"><br /></input>
<div id="Time_CelebodyTimeStepT"><b>Celebody Time Step (ms)</b><br />Calculation period for celebody simulation.</div>
<input id="Time_CelebodyTimeStep"><br /></input>
<div id="Time_DynamicsTimeStepT"><b>Dynamics Time Step (ms)</b><br />Calculation period for dynamic simulation.</div>
<input id="Time_DynamicsTimeStep"><br /></input>
<div id="Time_KinematicsTimeStepT"><b>Kinematics Time Step (ms)</b><br />Calculation period for kinematics simulation.</div>
<input id="Time_KinematicsTimeStep"><br /></input>
<div id="Time_OutputTimeStepT"><b>Output Time Step (ms)</b><br />Output archive period for simulation results.</div>
<input id="Time_OutputTimeStep"><br /></input>
<div id="Time_TotalSimulationTimeT"><b>Total Simulation Time (s)</b><br />Overall simulation duration.</div>
<input id="Time_TotalSimulationTime"><br /></input>
</div>
<div id="EnvironmentJson">
<div id="Env_EnvironmentModel" style="font-weight:bold;font-size:16px;">EnvironmentModel<br /></div>
<hr />
<div id="Env_iCSnT"><b>Gravity Mode Order</b><br />Harmonic order of gravity model (iCSn).</div>
<input id="Env_iCSn"><br /></input>
<div id="Env_iCSmT"><b>Gravity Mode Series</b><br />Harmonic series of gravity model (iCSm).</div>
<input id="Env_iCSm"><br /></input>
<div id="Env_iGHnT"><b>Magnetic Mode Order</b><br />Harmonic order of magnetic model (iGSn).</div>
<input id="Env_iGHn"><br /></input>
<div id="Env_iGHmT"><b>Magnetic Mode Series</b><br />Harmonic series of magnetic model (iGSm).</div>
<input id="Env_iGHm"><br /></input>
</div>
</div>
and the js codes are
function TimeJsonInfo_Show() {
Time_StartUTCTime.style.display = "block";
Time_CelebodyTimeStep.style.display = "block";
Time_DynamicsTimeStep.style.display = "block";
Time_KinematicsTimeStep.style.display = "block";
Time_OutputTimeStep.style.display = "block";
Time_TotalSimulationTime.style.display = "block";
Time_StartUTCTimeT.style.display = "block";
Time_CelebodyTimeStepT.style.display = "block";
Time_DynamicsTimeStepT.style.display = "block";
Time_KinematicsTimeStepT.style.display = "block";
Time_OutputTimeStepT.style.display = "block";
Time_TotalSimulationTimeT.style.display = "block";
}
function TimeJsonInfo_Hide() {
Time_StartUTCTime.style.display = "none";
Time_CelebodyTimeStep.style.display = "none";
Time_DynamicsTimeStep.style.display = "none";
Time_KinematicsTimeStep.style.display = "none";
Time_OutputTimeStep.style.display = "none";
Time_TotalSimulationTime.style.display = "none";
Time_StartUTCTimeT.style.display = "none";
Time_CelebodyTimeStepT.style.display = "none";
Time_DynamicsTimeStepT.style.display = "none";
Time_KinematicsTimeStepT.style.display = "none";
Time_OutputTimeStepT.style.display = "none";
Time_TotalSimulationTimeT.style.display = "none";
}
function EnvironmentJsonInfo_Show() {
Env_EnvironmentModel.style.display = "block";
Env_iCSn.style.display = "block";
Env_iCSm.style.display = "block";
Env_iGHn.style.display = "block";
Env_iGHm.style.display = "block";
Env_iCSnT.style.display = "block";
Env_iCSmT.style.display = "block";
Env_iGHnT.style.display = "block";
Env_iGHmT.style.display = "block";
}
function EnvironmentJsonInfo_Hide() {
Env_EnvironmentModel.style.display = "none";
Env_iCSn.style.display = "none";
Env_iCSm.style.display = "none";
Env_iGHn.style.display = "none";
Env_iGHm.style.display = "none";
Env_iCSnT.style.display = "none";
Env_iCSmT.style.display = "none";
Env_iGHnT.style.display = "none";
Env_iGHmT.style.display = "none";
}
btnTimeJson.onclick = function () {
var Path = jsonPath.innerHTML + "\\Time.json"
fs.exists(Path, (flag) => {
if(!flag)
jsonName.innerHTML = "Time.json does not exist."
else
jsonName.style.display = "none"
fs.readFile(Path,(_err,str) => {
jsonName.innerHTML = basename(Path)
jsonContent = JSON.parse(str)
Time_StartUTCTime.value = jsonContent.StartUTCTime
Time_CelebodyTimeStep.value = jsonContent['CelebodyTimeStep(ms)']
Time_DynamicsTimeStep.value = jsonContent['DynamicsTimeStep(ms)']
Time_KinematicsTimeStep.value = jsonContent['KinematicsTimeStep(ms)']
Time_OutputTimeStep.value = jsonContent['OutputTimeStep(ms)']
Time_TotalSimulationTime.value = jsonContent['TotalSimulationTime(s)']
EnvironmentJsonInfo_Hide()
TimeJsonInfo_Show()
})
})
}
When the window is initialized, it is like below with all <div> hided except jsonName.
window initialized
However the <br /> and <hr /> still exist.
When clicking for example the Time button, the window would like to show contents of my Time.json within <div id="TimeJson">. And the window appears to be ok.
window clicking Time button
But when I click Environment button, the <br /> within <div id="TimeJson"> makes multiple blank lines before the content within <div id="EnvironmentJson">.
enter image description here
Does anyone know how to fix this? Or is there any better solutions to create an app to edit multiple json files within one window? I know that the code is poor because I only learned html/electron for a couple of days :-)

br and hr are just like other elements which can be hidden by display: none
br,
hr {
display: none;
}
a
<br /> b
<hr /> c
you can put them inside the divs you show / hide so they will be shown only if their parents is visible.
I wouldn't use <hr /> and <br /> but border and margin to split the design (ass css) and the content (as html)
Another side note: I'd also get rid from all the style modifications (e.g. style.display = 'none') and use css based display (for example data- attributes).
For example:
const parent = document.querySelector('.parent');
document.querySelectorAll('button').forEach((button, index) => {
button.addEventListener('click', () => {
parent.setAttribute('data-item', index + 1);
});
});
.parent div {
display: none;
}
.parent[data-item="1"] .child1,
.parent[data-item="2"] .child2,
.parent[data-item="3"] .child3,
.parent[data-item="4"] .child4 {
display: block;
}
<div class="parent">
<div class="child1">child 1</div>
<div class="child2">child 2</div>
<div class="child3">child 3</div>
<div class="child4">child 4</div>
</div>
<button>Show element 1</button>
<button>Show element 2</button>
<button>Show element 3</button>
<button>Show element 4</button>

Related

How do I create show/hide elements for different buttons?

HTML Code...the buttons interfere with each other. How can I fix this?
<button onclick="myFunction()" style="margin-left:50px;"> Click Here For Help </button> <br> <br>
<div id="help1">
<p> Help </p>
</div>
<button onclick="myFunction()" style="margin-left:50px;"> Click Here For Help </button> <br> <br>
<div id="help2">
<p> Help </p>
</div>
Javascript shown with ids for the different buttons. Onload section to hide the content on page
load.
<script>
function myFunction() {
var x = document.getElementById("help1");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
window.onload = function() {
document.getElementById("help1").style.display = 'none';
};
</script>
<script>
function myFunction() {
var x = document.getElementById("help2");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
window.onload = function() {
document.getElementById("help2").style.display = 'none';
};
</script>
One was is to simply pass the id of the element as an input to myFunction so the corresponding element can be retrieved from the document and set to display:none. This will save you from needing duplicate functions. Press the blue Run code snippet button below to see the results.
Method 1:
function myFunction(ID) {
var x = document.getElementById(ID);
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
window.onload = function() {
document.getElementById("help1").style.display = 'none';
document.getElementById("help2").style.display = 'none';
};
<button onclick="myFunction('help1')" style="margin-left:50px;"> Click Here For Help </button> <br> <br>
<div id="help1">
<p> Help </p>
</div>
<button onclick="myFunction('help2')" style="margin-left:50px;"> Click Here For Help </button> <br> <br>
<div id="help2">
<p> Help </p>
</div>
Alternative Method:
This example reduces the amount of JavaScript but slightly increases the amount of HTML id tags and classes. It also incoporates some additional CSS. As suggested in the comment above this method uses:
• Event listeners
• Toggles a class using classList
function myFunction() {
document.getElementById("help" + String(this.id.split("_")[2])).classList.toggle("Display_It");
}
window.onload = function() {
document.getElementById("Toggle_Button_1").addEventListener("click", myFunction);
document.getElementById("Toggle_Button_2").addEventListener("click", myFunction);
};
#Toggle_Button_1,
#Toggle_Button_2 {
margin-left: 50px;
}
.Help_Panel {
display: none;
}
.Display_It {
display: block;
}
<button id="Toggle_Button_1"> Click Here For Help </button>
<br>
<br>
<div class="Help_Panel" id="help1">
<p>Help</p>
</div>
<button id="Toggle_Button_2"> Click Here For Help</button>
<br>
<br>
<div class="Help_Panel" id="help2">
<p>Help</p>
</div>

window.addEventListener function is not working at all times

Through this code i have to hide the dropdown-container when a user clicked outside of the button. And the code works fine initially. But later, it is not responding to the onclick event on button also. sometimes it closes the dropdown if i cliked a button. I have tried with many stackoverflow questions but i didnot get answer. Here is my code. Hope someone could solve this issue.
<div class="button-grp">
<button class="icon-button" type="button" onclick="menu(event, '1')"><img
src="../../Images/icons/local_library-white-24dp.svg" class="icon"><br>Learning
</button>
<button class="icon-button" type="button" onclick="menu(event, '2')"><img
src="../../Images/icons/gamepad-white-24dp.svg" class="icon"><br>Tools
</button>
</div>
<div class="sidebar-open">
<div class="main-options" id="0">
<button class="options-button" type="button">Academics</button>
<div class="dropdown-container">
Course Details
Assignments
</div>
<button class="options-button" type="button">Schedule</button>
<div class="dropdown-container">
Exams
Classes
</div>
</div>
</div>
<div id="mainmenu">
Lorem ipsum dolor sit,
</div>
And my Javascript code is as follows..
//function to toggle between clicked buttons and close when double clicked on it.
function menu(evt, id) {
document.querySelectorAll(".main-options").forEach(function(div) {
if (div.id === id) {
// Toggle specified DIV
if(div.style.display === "block"){
div.style.display = "none";
document.getElementById("mainmenu").style.marginLeft = "80px";
document.body.style.backgroundColor = "#fff";
}else{
div.style.display = "block";
document.getElementById("mainmenu").style.marginLeft = "230px";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
} else {
// Hide other DIVs
div.style.display = "none";
}
});
}
//function to hide the dropdown when clicked outside the button.
window.addEventListener('click', function(event){
if (!event.target.matches('.icon-button') ){
var dropdowns = document.getElementsByClassName("main-options");
var i;
for (i = 0; i < dropdowns.length; i++) {
if (dropdowns[i].style.display === "block") {
dropdowns[i].style.display ="none";
document.getElementById("mainmenu").style.marginLeft = "80px";
document.body.style.backgroundColor = "#fff";
}
}
}
});
Why don't you try this:
document.addEventListener("DOMContentLoaded", () => {
document.querySelector(".icon-button").forEach((button) => {
button.addEventListener('click', ()=>{
...
});
});
});

how to show content in div once a div is clicked on in Javascript?

I wanted to make a content of a div to get displayed once another div is clicked. But I have tried this :
function loadFishContent() {
if (div is clicked) {
document.getElementById('fish').style.display = "block";
document.getElementById('dogs').style.display = "none";
document.getElementById('cats').style.display = "none";
}
};
I have tried:
if (document.getElementByID('menu-fish') == true) {
//do action
}
But the action is applied in all the div I clicked.
My html is :
<div id="menu-fish" onclick="loadFishContent()"> Fish </div>
<div id="menu-dogs" onclick="loadDogsContent()"> Dogs </div>
<div id="menu-cats" onclick="loadCatsContent()"> Cats </div>
<div id="content">
<div id="fish">
<h2> Fish </h2>
<img src="fish.jpg"/>
<p> Information about fish in the store goes here.</p>
</div>
<div id="dogs">
<h2> Dogs </h2>
<img src="dog.jpg" />
<p> Information about dogs in the store go here.</p>
</div>
<div id="cats">
<h2> Cats </h2>
<img src="cat.jpg" />
<p> Information about cats in the store go here.</p>
</div>
</div>
Thing is, how do I target the div which is clicked in the if condition?
As you called 3 different methods in your html code, you have to write 3 javascript functions.
Then you can write code to show and hide div without check of which div clicked, because every div click have different methods to call.
If you wish to do that with a single js method as
function loadContent(id) {
if (id=='fish') {
document.getElementById('fish').style.display = "block";
document.getElementById('dogs').style.display = "none";
document.getElementById('cats').style.display = "none";
}
else if (id=='dogs') {
document.getElementById('fish').style.display = "none";
document.getElementById('dogs').style.display = "block";
document.getElementById('cats').style.display = "none";
}
else if (id=='cats') {
document.getElementById('fish').style.display = "none";
document.getElementById('dogs').style.display = "none";
document.getElementById('cats').style.display = "block";
}
};
And call that in html as
<div id="menu-fish" onclick="loadContent('fish')"> Fish </div>
<div id="menu-dogs" onclick="loadContent('dogs')"> Dogs </div>
<div id="menu-cats" onclick="loadContent('cats')"> Cats </div>
Just suggesting cleaner switch approach to an existing answer by crack_iT
function loadContent(id) {
document.getElementById('dogs').style.display = "none";
document.getElementById('cats').style.display = "none";
document.getElementById('fish').style.display = "none";
switch (id){
case 'fish': document.getElementById('fish').style.display = "block";
break;
case 'cats': document.getElementById('cats').style.display = "block";
break;
case 'dogs': document.getElementById('dogs').style.display = "block";
break;
}
};
Its a bit more smaller and looks cleaner and easier to understand;
Approach 1:
Update your HTML like below:
<div id="menu-fish" onclick="loadContent('fish')"> Fish </div>
<div id="menu-dogs" onclick="loadContent('dogs')"> Dogs </div>
<div id="menu-cats" onclick="loadContent('cats')"> Cats </div>
And Update your function as below:
function loadContent(divid) {
document.getElementById('fish').style.display = "none";
document.getElementById('dogs').style.display = "none";
document.getElementById('cats').style.display = "none";
document.getElementById(divid).style.display = "block"
}
Approach 2:
If you want id of the div in function then update your HTML like below:
<div id="menu-fish" onclick="loadContent(this)"> Fish </div>
<div id="menu-dogs" onclick="loadContent(this)"> Dogs </div>
<div id="menu-cats" onclick="loadContent(this)"> Cats </div>
And Update your function as below:
function loadContent(div) {
var divid = div.id;
document.getElementById('fish').style.display = divid == 'menu-fish' ? 'block' : "none";
document.getElementById('dogs').style.display = divid == 'menu-dogs' ? 'block' : "none";
document.getElementById('cats').style.display = divid == 'menu-cats' ? 'block' : "none";
}
You should avoid using if/else as it will be problematic code to manage with 100's of content types.
Use document.querySelectorAll
/* Create only 1 function for all the content types - pass id as parameter */
function loadContent(id) {
// Use querySelectorAll to all first level div's, to hide all
document.querySelectorAll("div#content > div").forEach(el => el.style.display = "none");
// Now, display the clicked content type
document.getElementById(id).style.display = "block";
}
div#content > div {
display: none;
}
<div id="menu-fish" onclick="loadContent('fish')"> Fish </div>
<div id="menu-dogs" onclick="loadContent('dogs')"> Dogs </div>
<div id="menu-cats" onclick="loadContent('cats')"> Cats </div>
<div id="content">
<div id="fish"><h2> Fish </h2><img src="fish.jpg"/><p> Information about fish in the store goes here.</p></div>
<div id="dogs"><h2> Dogs </h2><img src="dog.jpg" /><p> Information about dogs in the store go here.</p></div>
<div id="cats"><h2> Cats </h2><img src="cat.jpg" /><p> Information about cats in the store go here.</p></div>
</div>

Hidden Div takes space before Javascript switch with other

I have 2 Div's that when I press a button they swich between them using javascript .
The problem is that before I press the button the hidden div takes space and messes the layout .
I attached the snippet
function switchVisible() {
if (document.getElementById('1')) {
if (document.getElementById('1').style.display == 'none') {
document.getElementById('1').style.display = 'block';
document.getElementById('2').style.display = 'none';
}
else {
document.getElementById('1').style.display = 'none';
document.getElementById('1').style.display = 'none';
document.getElementById('2').style.display = 'block';
}
}
}
<button type="submit" value="Click" onclick="switchVisible();" </button>
<div id="1">
some content
</div>
<div id="2" class="inner border">
some content 2
</div>
You've just to hide it for the first time using :
document.getElementById('2').style.display = 'none';
Or also using inline style (NOT recommended):
<div id="2" class="inner border" style='display:none'>
Hope this helps.
document.getElementById('2').style.display = 'none';
function switchVisible() {
if (document.getElementById('1')) {
if (document.getElementById('1').style.display == 'none') {
document.getElementById('1').style.display = 'block';
document.getElementById('2').style.display = 'none';
}
else {
document.getElementById('1').style.display = 'none';
document.getElementById('1').style.display = 'none';
document.getElementById('2').style.display = 'block';
}
}
}
<button type="submit" value="Click" onclick="switchVisible();" </button>
<div id="1">
some content
</div>
<div id="2" class="inner border">
some content 2
</div>
<style>
div#2 {display: none;}
</style>

A script that only opens 1 division at a time on a web page

A html/css/js script that only opens 1 division at a time
This script works perfectly! I put it together after spending days looking for more professional code - it doesn't need any resource files its simple - but its ugly code. How can I shorten it with a single function without having to add jsQuery. Close all div and just identify the one clicked to open it. Surely it can be done with a single function.
<!DOCTYPE html>
<html>
<head>
<style> div { width:100%; height:100px; text-align: center; display: none; } </style>
</head>
<body>
<center>
<nobr>
<button onclick="hs1()"> Content div1
</button>
<button onclick="hs2()"> Content div2
</button>
<button onclick="hs3()"> Content div3
</button>
<button onclick="hs4()"> Content div4
</button>
<button onclick="hs5()"> Content div5
</button>
</nobr>
</center>
<hr>
<center>
<nobr>
Content div1 |
Content div2 |
Content div3 |
Content div4 |
Content div5
</nobr>
</center>
<hr>
<div id="div1" style="background-color:#ff00ff; display:block;">DIV element 1.
</div>
<div id="div2" style="background-color:#ff0000;">DIV element 2.
</div>
<div id="div3" style="background-color:#cccccc;">DIV element 3.
</div>
<div id="div4" style="background-color:#ffff00;">DIV element 4.
</div>
<div id="div5" style="background-color:#0000ff;">DIV element 5.
</div>
<script>
function hs1()
{
document.getElementById("div1").style.display = "block";
document.getElementById("div2").style.display = "none";
document.getElementById("div3").style.display = "none";
document.getElementById("div4").style.display = "none";
document.getElementById("div5").style.display = "none";
}
function hs2()
{
document.getElementById("div1").style.display = "none";
document.getElementById("div2").style.display = "block";
document.getElementById("div3").style.display = "none";
document.getElementById("div4").style.display = "none";
document.getElementById("div5").style.display = "none";
}
function hs3()
{
document.getElementById("div1").style.display = "none";
document.getElementById("div2").style.display = "none";
document.getElementById("div3").style.display = "block";
document.getElementById("div4").style.display = "none";
document.getElementById("div5").style.display = "none";
}
function hs4()
{
document.getElementById("div1").style.display = "none";
document.getElementById("div2").style.display = "none";
document.getElementById("div3").style.display = "none";
document.getElementById("div4").style.display = "block";
document.getElementById("div5").style.display = "none";
}
function hs5()
{
document.getElementById("div1").style.display = "none";
document.getElementById("div2").style.display = "none";
document.getElementById("div3").style.display = "none";
document.getElementById("div4").style.display = "none";
document.getElementById("div5").style.display = "block";
}
</script>
</body>
</html>
How about this
DEMO : http://jsfiddle.net/naokiota/frnDq/4/
HTML:
Content div1 |
Content div2 |
Content div3 |
Content div4 |
Content div5
JavaScript:
function hs(divno){
for(var i = 1 ; i <=5 ; i++){
var display = (i == divno) ? "block":"none";
document.getElementById("div"+i).style.display = display;
}
return false;
}
You could write the function this way:
function hs(openPanel)
{
for (var x = 1; x <= 5; ++x)
{
document.getElementById("div" + x).style.display = ((x == openPanel) ? "block" : "none");
}
}
This ought to do exactly the same thing as the code you've already written, just without all the repetition. It now takes an argument indicating the panel that you want to be displayed, so instead of calling hs2(), you would call hs(2).
Thanks to both #Naota & #JoeFarrell
Your answers helped a lot. I adapted from what you posted and opted for the following - simply because at my stage of understanding I can follow it myself, not because it's better.
I put the displaying of the visible div in separate brackets so it didn't run 5 times. If there's something glaringly wrong please let me know.
<script>
function hs(divno){
for(var i = 1 ; i <=5 ; i++){
document.getElementById("div"+i).style.display = "none";
}
{
document.getElementById("div"+divno).style.display = "block";
}
return false;
}
</script>
Links;
Content div1 |
Content div2 |
Content div3 |
Content div4 |
Content div5
Steve

Categories

Resources