Shown and hidden

<!DOCTYPE HTML>

<html lang="ko">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
<title>brouser title</title>

<link rel="stylesheet" href="[script/css.css](http://dot.kr/qna/QnA001/script/css.css)" media="screen">
</head>

<body>

<div id="ogoWrap">

<div id="ogo">

<div id="logo">
<span data-destination="alarm" class="button active " style="border-style:solid"><span></span> <b></b>alarm Button</span>
</div>

<div id="rogo">

<div data-destination="menu" class="button" style="border-style:solid"><span></span> <b></b>menu button</div>
</div>
</div>
</div>

<div id="topCenter" style="text-align:center">
<a href=""><div style="background:black;display:inline-block;color:white">title</div></a>
<div style="height:10px"></div>
<div class="alarmMenu hide show" id="alarm">
alarm<br>
alarm
</div>
<div class="alarmMenu hide show" id="menu">
menu<br>
menu</div>
<script src="[script/js.js](http://dot.kr/qna/QnA001/script/js.js)"></script>
</div>
This is main contents. This is main contents. This is main contents.<br>
This is main contents. This is main contents. This is main contents.<br>
This is main contents. This is main contents. This is main contents.<hr>

<div id="footer" style="background:gray;border-style:solid;text-align:center"><div id="contentsOnly" style="background:white;display:inline-block">contents button</div></div>
</body>
</html>

I have the html code above at http://dot.kr/QnA/QnA001/
and the css code below.

.button {
pointer-events: initial; 
cursor: pointer;
} 
.button:hover,
.button:focus,
.button.active {
outline: 0;
background: red;
}  
.button b {
  display: none;
}  
.button span {
  font-weight: bold;
}  
.button.active span {
  display: none;
}  
.button.active b {
  display: inline-block;
} 
.alarmMenu {
background:white;
border:1px solid black;
border-radius:5px;
display:inline-block;
padding:5px;
text-align:center;
margin:auto;
transition:transform 0.3s ease;
box-shadow:0 0 10px 10px rgba(0, 0, 0, 0.5);
z-index:2;
} 
#ogoWrap{
position:fixed;
left:0;
right:0;
top:5px;
} 
#ogo > div:nth-child(1) {    
position:absolute;
left:15px;
top:5px;
text-align:center;} 
#ogo > div:nth-child(2) {    
position:absolute; 
right:10px;
top:10px;
text-align:center;} 

And the js code below.

(function (d) {
const content = d.querySelectorAll(".alarmMenu"); 
  content.forEach((item) => {
item.classList.add("hide"); 
  }); 
"use strict";  
const buttons = d.querySelectorAll(".button");
var toggleClass = "show";  
  buttons.forEach((item) => {
    item.addEventListener("click", (event) => {

      if (item.classList.contains("active")) {
toggleClass = "hide"; 
      } else {
toggleClass = "show"; 
      } 
hideAll(); 
toggleDiv(item, item.dataset.destination); 
    }); 
  }); 

  function hideAll() {
    content.forEach((item) => {
item.classList.add("hide"); 
item.classList.remove("show"); 
    }); 
    buttons.forEach((item) => {
item.classList.remove("active"); 
    }); 
  } 
  function toggleDiv(targetButton, targetDiv) {

if (toggleClass === "show") {
targetButton.classList.add("active"); 
} 
d.querySelector("#" + targetDiv).classList.add(toggleClass); 
} 
})(document); 
document.getElementById("contentsOnly").addEventListener("click", function () {
var sox1 = document.getElementById("ogo").classList.add("hide");
var sox2 = document.getElementById("topCenter").classList.add("hide");
var sox3 = document.getElementById("footer").classList.add("hide"); 
});

With the code above,
I have some problems like the below and I like to change like the targets below.

Thank you very much in advance.

Can you clarify that you never want the alarm and the menu shown at the same time!

Also when you say you want the main contents ‘under’ the top bar do you mean that the top bar covers the main contents? If so wouldn’t it be better as a sticky header where it gets fixed when the page scrolls?

I want that the alarm and the menu NEVER shown at the same time!

The title and the alarm, the title and the menu, or title only are not sticky.
So they are going up and hidden automatically when scollbar is going down.by the users.

I had a go anyway and this is what I came up with.

Sorry I had to change your html as it made me ill :slight_smile:

That seems to indicate that they are in the normal flow so the fixed and sticky positioning should just be removed. However that seems completely at odds with what you said here:

And completely at odds with the code you had for that element.

#ogoWrap{
position:fixed;
left:0;
right:0;
top:5px;
}

Which is it? Fixed or not fixed?

Just remove it if you don’t want it or explain in a bit more detail what was supposed to happen as I thought I followed the instructions carefully :slight_smile:

I am sorry because I made you ill.
It makes me ill, too.
Conversely, your code is fine and the result is also fine.

I want two more things on the result.

(1) if I click the Alarm Button after it is loaded, The alarm is hidden.
So far, it is good.
But the button itself is still in red.
I like to make it like the follow.
(taregt) When alarm is hidden, the backgound of the Alarm Button is “white” instead of “red”.
When alarm in the center is shown, the alarm button is in red.
When menu in the center is shown, the menu button is in red.
When both alarm and menu in the center are hidden, both the alarm button and the menu button are in white.

(2) Both the alarm button and the menu button are sticky.
So far, it is good.
But the title with alarm or menu in the center is NOT sticky.
So the title should be going up and disappear with alarm or menu in the center when I drag down the scroll bar on the right.

The “main contents”, title with alarm or menu in the center, and the scroll bar on the right are, all the 3s, moving up and down at the same time.

That’s caused by the css (which I copied from yours) as you set the :focus state to red which is the same as active. (If you had moved focus to another element the background of the button would indeed be white.)

i.e.

.button:hover,
.button:focus,
.button.active,
.button-footer:hover,
.button-footer:focus,
.button-footer.active {
  outline: 0;
  background: red;
}

The focus color is the same as the active color so you can either change that color and put it back to an outline or border as usual or we can remove the focus in js when clicked.

To do that this blur code would be added in this position.

   item.blur(); // remove focus
        // no need to do anything else
      } else {

However, remember that you also had the hover state as red so even when you click the button it will still be red until you hover away. If you don’t want a hover color then just remove the hover rule from the buttons.

I’m not quite sure if this is what you meant but I’ve made a new codepen with the changes above in place.

I wasn’t sure whether you wanted the main content obscured by the header or not?

If not just remove the position absolute from .top here.

.top {
  position:absolute;
  top:0;
  left:0;
  right:0;
etc...

It should be pretty close now :slight_smile:

I found that your code in #4 has some advantages compared to your code in #7 if the title is shown and hidden with alarm or menu at the same time.

my target is in the below.

I think it better that you have 2 titles instead of one and then each title can sit with the menu and the alarm and have different content if you wanted. The title will then automatically hide with the menu/alarm as it will be in the same block.

e.g.

Is that closer to what you wanted?

Yes, it is more than what I wanted.
Thank you very much.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.