Not to be extended 100% with the button which text is dynamic

joon1 · December 17, 2020, 9:46am

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.

coothead · December 17, 2020, 10:28am

Hi there joon1,

remove…

box1.style.display="block";

coothead

joon1 · December 17, 2020, 11:20am

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.

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?

coothead · December 17, 2020, 1:13pm

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

PaulOB · December 17, 2020, 2:15pm

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

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.

I hope I get my target result above by your help.

PaulOB · December 18, 2020, 8:50am

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.

joon1 · December 18, 2020, 3:58pm

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.

coothead · December 18, 2020, 4:11pm

Hi there joon1,

you have a typing error here…

<style media="screen">
body {
.wrap {
  position: relative;
}

Either remove “body {” or add a closing “}.”.

coothead

joon1 · December 18, 2020, 4:17pm

Thank you very much, coothead and paulOB.

coothead · December 18, 2020, 4:39pm

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

joon1 · December 18, 2020, 5:03pm

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

Thanks I should have implemented that myself I’ve added it to my codepen now

coothead · December 18, 2020, 5:21pm

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 all of you visitors will be
guaranteed reliable content.

coothead

joon1 · December 18, 2020, 5:25pm

It’s very kind of you for all human including me.

coothead · December 18, 2020, 5:37pm

Here is a cautionary tale for those who create websites…

Supreme Court hands victory to blind man who sued Domino’s over site accessibility

coothead

joon1 · December 18, 2020, 8:58pm

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.

coothead · December 18, 2020, 11:21pm

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

joon1 · December 19, 2020, 5:04pm

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.

coothead · December 19, 2020, 8:47pm

Hi there joon1,

check out the attachment,
to see a few amendments…

joon1-swapping.zip (2.4 KB)

coothead