Media Query with Javascript

Asked

Viewed 171 times

0

With the help of W3SCHOOL I was able to create this code that inserts an html through Javascript. I also need a specific code to be shown if <700 and other code is displayed if >701. The code below does not work 100% because when resizing the window it does not update. To work 100% you need to refresh the page. What is the correct way to use Media Query with Javascript?

<script>
function myFunction(x) {
  if (x.matches) { // If media query matches

/* === código html === */
var mb = document.createElement("div"); /* cria DIV */
mb.setAttribute("class", "conteiner"); /* seta a class="banner" para a DIV */

mb.innerHTML = /* ESTRUTURA html */
"<div class='secao-principal row-fluid sem-coluna'> " +
"<div class='row-fluid'> " +

"<div class='modulo span3'> <a href='' > <img src='https://picsum.photos/id/156/404/260?blur=5' alt=''/> </a> </div>" +
"<div class='modulo span3'> <a href='' > <img src='https://picsum.photos/id/156/404/260?blur=5' alt=''/> </a> </div>" +
"<div class='modulo span3'> <a href='' > <img src='https://picsum.photos/id/156/404/260?blur=5' alt=''/> </a> </div>" +
"<div class='modulo span3'> <a href='' > <img src='https://picsum.photos/id/156/404/260?blur=5' alt=''/> </a> </div>" +


"</div>" +
"</div>";       

var list = document.getElementById("corpo");
list.insertBefore(mb, list.firstChild);

} else {

/* === código html === */
var mb = document.createElement("div"); /* cria DIV */
mb.setAttribute("class", "conteiner"); /* seta a class="banner" para a DIV */

mb.innerHTML = /* ESTRUTURA html */
"<div class='secao-principal row-fluid sem-coluna'> " +
"<div class='row-fluid'> " +

"<div class='modulo span3'> <a href='' > <img src='https://picsum.photos/id/156/404/260?blur=5' alt=''/> </a> </div>" +


"</div>" +
"</div>";       

var list = document.getElementById("corpo");
list.insertBefore(mb, list.firstChild);


}
}
var x = window.matchMedia("(max-width: 700px)")
myFunction(x) // Call listener function at run time
x.addListener(myFunction) // Attach listener function on state changes



</script>
javascript
  • 1

    Wouldn’t it be simpler to use one media query directly by CSS? What is the need to do it using Javascript?

1 answer

0

Use the event onresize (https://www.w3schools.com/jsref/event_onresize.asp). https://www.w3schools.com/howto/howto_js_media_queries.asp

It is executed when the page is resized. You can make logic within that event.

document.getElementById("getWidthWindow").innerHTML = `Tamanho da página ${window.outerWidth}px.`;


window.onresize = function(ev) {

//Sua implementação do código vai aqui dentro

//Pega o tamanho original da página conforme for redimensionando
let widthPage = ev.currentTarget.outerWidth;

var x1 = window.matchMedia(`(max-width: ${widthPage}px)`);

var x2 = window.matchMedia("(max-width: 700px)")
myFunction(x2) // Call listener function at run time
x2.addListener(myFunction) // Attach listener function on state changes

}
<p>Redimensiona a página.</p>
<div id="getWidthWindow">matchMedia: </div>

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.