CODEWITHSUNDEEP
javascriptcssmobilemedia-queriesscreen
user5513378
user5513378

Reputation:

@media screen in JavaScript?

I coded this script. If the window size is smaller than 1000px, it is possible to unfold the menu points. But, if you collapse the menu points and increase the window size, the menu points still stay hidden. I don't get it to fade them in then again.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<nav>
<h2>S U P E R</h2>
<button class="button" onclick="fold()">FOLD</button>
<div id="folding">
<a>Under Construction 1</a><br>
<a>Under Construction 2</a><br>
<a>Under Construction 3</a><br>
<a>Under Construction 4</a><br>
</div>
</nav>
</body>
</html>

CSS:

#folding {
display: block;
}
.button {
display: none;
}
@media screen and (max-width: 1000px) {
.button {
display: block;
} 
#folding {
display: none;
}
body {
background-color: red;
}
}

JS:

function fold() {
  var x = document.getElementById("folding");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}

Upvotes: 1

Views: 476

Answers (1)

Mateus Stanki
Mateus Stanki

Reputation: 98

Your problem is with css specificity (See Specificity). A simple and quick(not great) solution to achieve your goal is to invert media logic and apply important for the property to override inline rule display:none;: 

.button {
  display: block;
}

#folding {
  display: none;
}

@media screen and (min-width: 1000px) {
 #folding { 
  display: block !important;
 }

 .button {
  display: none;
 }
}

When you do x.style.display = "none"; you are adding an inline-style that has priority against classes and id styles. The best way to you do what you want is to create different classes (.folding-visible, etc...) and control which class will be applied depending on the viewport.

Upvotes: 2

Related Questions