All geek questions in one place

Hide and show an item based on screen size

I am trying to make a button that will hide and show the menu when the web page is displayed on smaller screens. I want to save all the menus when the display is wider than 640 pixels. I am allowed to use only CSS and JavaScript.

Here is the JS function I wrote:

var b = document.getElementById ("menu-button"); b.addEventListener("click", showMenu, false); var i = 0; function showMenu () { i++; if(i % 2 == 1) document.getElementById("menu").style.display = "block"; else document.getElementById("menu").style.display = "none"; }

It works when displaying a page on a smaller screen.

When I press the button to hide the menu (which changes the "menu" to none ) and then increase the page size, my menu does not appear when the screen becomes larger than 640 pixels.

This media query does not complete the task:

 @media screen and (min-width:640px) { #menu { display: block; } }
+6
source share
5 answers

You need to add !important to the CSS property, for example:

  #menu { display:block!important; }

Your Javascript adds the style attribute to the element, which is higher priority than any internal or external CSS styles if they are not " !important .

What you can also do to avoid this is to switch some CSS class into your Javascript instead of setting the style attribute. This way you avoid using !important .

+6
source

I suggest not setting style elements like this, it is recommended to use a class in the element

Side note, I also changed from id to class , which is also recommended

Also, specificity is the reason already noted in the comments / answers why your code doesn't work, read more here: https://developer.mozilla.org/en/docs/Web/CSS/Specificity

 var b = document.querySelector(".menu-button"); b.addEventListener("click", function(e) { document.querySelector(".menu").classList.toggle("show"); }); 
 .menu { display: none; } .menu.show { display: block; } @media screen and (min-width:640px) { .menu { display: block; } } 
 <div class="menu show">Hi, I'm a menu element</div> <button class="menu-button">Show/Hide</button>
+3
source

Connexo pointed out the answer, but the extension may be useful to you and others who come here in the future.

The "style" of an HTML element can be set in at least 3 places. The browser will have to decide which one should win if a conflict arises. The rules used are called "specificity." There is a good article on this topic here https://css-tricks.com/specifics-on-css-specificity/ if you want a more complete explanation.

Just about any style defined in the attribute of the initial HTML style is the most powerful, so it wins the CSS file rule. It is important to note that setting the style, as you did in your use case, works with the HTML style attribute.

Therefore, your CSS will be overridden by setting the style attribute in your code.

For a clean JS solution, you can look at adding a listener to the window's onResize event. If you are exploring this approach, keep in mind that in some browsers an event fires for each resize pixel, so look for a solution that takes this into account like this , otherwise the function will run several times and may reduce the joy you bring to your users.

+1
source

Like other comments, you are trying to use different things in your code. I recommend the css solution, you can see what most grids use to create their media queries, to show / hide elements when resizing the browser, or monitoring becomes less.

A very cold, lightweight mesh is called simplegrid.

https://github.com/ThisIsDallas/Simple-Grid/blob/master/simplegrid.css

at line 177, a multimedia request for handheld devices is triggered. So, for example, adding this to your HTML document:

 <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://github.com/ThisIsDallas/Simple-Grid/blob/master/simplegrid.css"> </head> <body> <button class="hide-on-mobile">MyButton</button> </body>

The button will not be visible if the browser window is below 767px

0
source

You need to add! important for the css property. Because your JavaScript code sets an element style attribute that takes precedence over any css selector styles.

-one
source

Source: https://habr.com/ru/post/1012056/

More articles:


All Articles