joon1
December 17, 2020, 9:46am
1
I have a webpage at http://form.kr/q/display.php
There are 2 DIVs at the page. i.e. a button div and target div.
If you click the button, the target will be disappear.
It works fine except a problem.
The problem is on the blue button.
When the target is disappeared, the blue button become very wide to 100%.
I don’t like the blue button becomes that wide.
I want the blue button not to be changed after a user clicks the blue button.
if I put the style code below to the blue button, it will be fixed.
However, since the text “title button” is a variable which is dynamic, I can’t fix it with the code above.
How can I make its width not to be extended to 100%?
Since I am not sure whether which forum is correct for this problem between html & css and javascript .
With posting here first, I am afraid and hope it is solved at this forum.
Hi there joon1,
remove…
box1.style.display="block";
coothead
joon1
December 17, 2020, 11:20am
3
Thank you, it works fine.
However, I am afraid my original code was something wrong because I made it too simplified.
Here is another page at http://form.kr/q/display02.php .
What I want is like the quote below.
(1) when the page is loading, button1 and target1 is shown.
(2) if you click the button1, the button2 and target2 is shown instead of button1 and target1.
(3) if you click the button2, the button1 and target1 is shown again instead of button2 and target2.
The page works fine except they become very wide to 100%.
Can I make them both button and target not to be extended to 100% in width with your help?
Hi there joon1,
here is a slightly different approach to your problem…
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>Untitled document</title>
<!--
The internal CSS should be transferred to an external file
<link rel="stylesheet" href="screen.css" media="screen">
-->
<style media="screen">
body {
background-color: #f0f0f0;
font: normal 1em / 1.62em sans-serif;
}
#display-button {
padding: 0.5em 1em;
margin-bottom: 1em;
border: 1px solid #000;
background-color: #00f;
font-size: 1em;
font-weight: bold;
color: #fff;
cursor: pointer;
}
#content1, #content2 {
max-width: 30em;
padding: 2em;
border: 1px solid #999;
border-radius: 0.5em;
background-color: #fff;
background-image: linear-gradient( to bottom, #ff0 , #aa0 );
}
.hide {
display: none;
}
</style>
</head>
<body>
<button id="display-button">show Cras aliquet</button>
<div id="content1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div id="content2" class="hide">
Cras aliquet sem neque, eget dignissim orci pharetra a.
</div>
<script>
(function( d ) {
'use strict';
var test = true,
but = d.getElementById('display-button'),
con1 = d.getElementById('content1'),
con2 = d.getElementById('content2');
but.addEventListener( 'click',
function() {
if ( test === true ) {
con2.classList.remove( 'hide');
con1.classList.add( 'hide');
but.textContent = 'show Lorem ipsum';
test = false;
}
else {
con2.classList.add( 'hide');
con1.classList.remove( 'hide');
but.textContent = 'show Cras aliquet';
test = true;
}
});
}( document ));
</script>
</body>
</html>
You may view a working example here…
https://codepen.io/coothead/full/JjRNwJx
coothead
3 Likes
PaulOB
December 17, 2020, 2:15pm
5
Isn’t this a continuation of your other thread ?
I made a demo for that thread but you never returned to it.
joon1
December 18, 2020, 1:50am
6
coothead:
Thank you for you page at https://codepen.io/coothead/full/JjRNwJx .
It works fine.
I change slightly your code for hiding both content1 and content2 when the page is loading at http://form.kr/q/2contents.php
It also works fine.
Adding to it. I like to make it with 3 contents.
The page at http://form.kr/q/3contents.php is one of my trials, but it doesn’t work correctly.
I think it is better to say about my actual target result at the moment.
My target result is the following.
(1) when the page is loading, 3 buttons are shown. (none of contents are shown)
(2) if I click button1, content1 is shown. (content2 and content3 are not shown)
(3) if I click button2, content2 is shown. (content1 and content3 are not shown)
(2) if I click button3, content3 is shown. (content1 and content2 are not shown)
I hope I get my target result above by your help.
PaulOB
December 18, 2020, 8:50am
7
Isn’t that more or less exactly what I gave you in my demo?
It just needed the hide class added to the first div to do exactly what you wanted.
It is a scalable example that can work with many divs without changing the JS.
2 Likes
joon1
December 18, 2020, 3:58pm
8
Since it looks very structured and not long, it’s, I think, fantastic.
It seems, I am afraid, not to work correctly at http://form.kr/q/3button3div.php
By the way, the black box above is not understandable at first.
But I feel it’s the new way of teaching.
It should be, I think, spread in the coding world.
I am impressed by your revolution.
Hi there joon1,
you have a typing error here…
<style media="screen">
body {
.wrap {
position: relative;
}
Either remove “body {
” or add a closing “}.
”.
coothead
1 Like
joon1
December 18, 2020, 4:17pm
10
Thank you very much, coothead and paulOB.
1 Like
Hi there joon1,
to make the page useful for those who happen
to have javascript disabled or unavailable, use
this slightly amended code…
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
<title>3button and 3 div</title>
<style media="screen">
body {}
.wrap {
position: relative;
}
.button {
border-radius: 20px;
background: red;
color: #fff;
padding: 5px 15px;
border: 1px solid #666;
}
.button:hover,
.button:focus {
outline: 0;
background: orange;
}
.content,
.content2 {
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top: 20px;
transition: transform 0.3s ease;
}
.content2 {
background-color: green;
}
.content3 {
background-color: cyan;
}
.content4 {
background-color: teal;
}
.hide {
transform: scale(0);
opacity: 0;
position: absolute;
z-index: -1;
top: 0;
}
.show {
transform: scale(1);
opacity: 1;
position: relative;
z-index: auto;
}</style>
</head>
<body>
<button data-destination="myDIV1" class="button hide">show myDIV1</button>
<button data-destination="myDIV2" class="button hide">show myDIV2</button>
<button data-destination="myDIV3" class="button hide">show myDIV3</button>
<div class="wrap">
<div class="content" id="myDIV1">
This is my DIV1 element.
</div>
<div class="content content2" id="myDIV2">
This is my DIV2 element.
</div>
<div class="content content3" id="myDIV3">
This is my DIV3 element.
</div>
</div>
<script>
(function (d) {
"use strict";
const buttons = d.querySelectorAll(".button");
const content = d.querySelectorAll(".content");
content.forEach((item) => {
item.classList.add("hide");
});
buttons.forEach((item) => {
item.classList.remove("hide");
item.addEventListener("click", (event) => {
hideAll();
showDiv(item.dataset.destination);
});
});
function hideAll() {
content.forEach((item) => {
item.classList.add("hide");
item.classList.remove("show");
});
}
function showDiv(targetDiv) {
d.querySelector("#" + targetDiv).classList.add("show");
}
})(document);
</script>
</body>
</html>
It will hide the buttons and display the content.
coothead
2 Likes
joon1
December 18, 2020, 5:03pm
12
Do you mean the following?
I see the only difference between your code and the paul’s is the following.
Did I correctly see your code?
PaulOB
December 18, 2020, 5:08pm
13
Thanks I should have implemented that myself I’ve added it to my codepen now
1 Like
Yes, you should always consider them.
No.
In the HTML I added the hide class to the
button elements and removed it from the
div elements and then in the javascript I
removed the hide class from the button
elements and added it to the div elements.
Obviously, you know how the page looks
with javascript enabled but if it is disabled
then the buttons need to be hidden and the
actual content needs to be displayed.
This means that [b all[/b] of you visitors will be
guaranteed reliable content.
coothead
1 Like
joon1
December 18, 2020, 5:25pm
15
It’s very kind of you for all human including me.
1 Like
joon1
December 18, 2020, 8:58pm
17
I changed some code of paulOB at http://form.kr/q/center05.php
On the page, I like to put the 3 buttons, i.e. show my DIV1, show my DIV2, show my DIV2, on the center horizontally.
And two more things what I want are in the quote below.
Hi there joon1,
I’m not going to mess around with your requirement (3), it
is not the sort of coding we want to see in the 21st century.
Let the content flow in a natural manner.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
<title>3button and 3 div</title>
<!--
The internal CSS should be transferred to an external file
<link rel="stylesheet" href="screen.css" media="screen">
-->
<style media="screen">
body {
background-color: #f0f0f0;
font: normal 1em / 1.62em sans-serif;
}
#button-container {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.button {
padding: 0.32em 0.94em;
margin: 0.25em 0.5em;
border: 1px solid #999;
border-radius: 1.25em;
background: #f00;
font-size: 1em;
color: #fff;
cursor: pointer;
}
.button:hover,
.button:focus {
outline: 0;
background: #ffa500;
}
.wrap {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin: 1em 0;
}
.content,
.content2 {
border: 1px solid #999;
border-radius: 0.5em;
box-sizing: border-box;
text-align: center;
background-color: #faebd7;
transition: transform 0.5s ease;
}
.content2 {
background-color: #c0c0c0;
}
.content3 {
background-color: #f0e68c;
}
.content4 {
background-color: #0ff;
}
.hide {
width: 0;
overflow: hidden;
transform: scale(0);
opacity: 0;
}
.show {
width: 100%;
max-width: 50em;
padding: 3em 1em;
margin: auto;
transform: scale(1);
opacity: 1;
}
#main {
max-width: 50em;
padding: 1em;
margin: auto;
border: 1px solid #999;
border-radius: 0.5em;
box-sizing: border-box;
background-color: #fff;
}
</style>
<noscript>
<style media="screen">
.button {
padding: 0;
margin: 0;
border: 0;
font-size: 0;
}
.wrap {
flex-direction: column;
}
.content {
width: 100%;
max-width: 50em;
padding: 3em 1em;
margin: 0.5em auto;
transform: scale(1);
opacity: 1;
}
</style>
</noscript>
</head>
<body>
<div id="button-container">
<button data-destination="myDIV1" class="button hide">show myDIV1</button>
<button data-destination="myDIV2" class="button hide">show myDIV2</button>
<button data-destination="myDIV3" class="button hide">show myDIV3</button>
<!-- #button-container --></div>
<div class="wrap">
<div class="content" id="myDIV1">
This is my DIV1 element.
</div>
<div class="content content2" id="myDIV2">
This is my DIV2 element.
</div>
<div class="content content3" id="myDIV3">
This is my DIV3 element.
</div>
<!-- .wrap --></div>
<div id="main">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</p>
<!-- #main --></div>
<script>
(function (d) {
"use strict";
const buttons = d.querySelectorAll(".button");
const content = d.querySelectorAll(".content");
content.forEach((item) => {
item.classList.add("hide");
});
buttons.forEach((item) => {
item.classList.remove("hide");
item.addEventListener("click", (event) => {
hideAll();
showDiv(item.dataset.destination);
});
});
function hideAll() {
content.forEach((item) => {
item.classList.add("hide");
item.classList.remove("show");
});
}
function showDiv(targetDiv) {
d.querySelector("#" + targetDiv).classList.add("show");
}
})(document);
</script>
</body>
</html>
coothead
2 Likes
joon1
December 19, 2020, 5:04pm
20
coothead:
I changed your code slightly at http://form.kr/q/center09.php for my own use.
Adding to the page, It’s better, I think, to get the requirements in the quote below.
(1) When the page is loading,
There are some vertical space between the button #container and #main
I like to remove vertical space.
Although I tried to put the code “display:none”, it doesn’t work for the removal.
(2) When DIV1 element is shown by clicking button1 “Show myDIV1”,
There are some padding at right.
I like to remove the padding.
Although I tried to remove the code “max-width”, it becomes very wide to 100% at http://form.kr/q/center10.php
(3) When DIV2 element is shown by clicking button2 “Show myDIV2”,
(3-1) There are some margin at top and bottom.
I like to remove the margin.
(3-2) There are some padding at right.
I like to remove the padding.
Hi there joon1,
check out the attachment,
to see a few amendments…
joon1-swapping.zip (2.4 KB)
coothead
1 Like