Using JavaScript to delete div in screen size below a certain pixel

Question

I'm a newbie in coding. I knew this can be done by css, but want to do it by using JavaScript. I have a div tag and would like to not show it under 630px screen size. I searched this site and find this JavaScript code in another question and I liked it:

if( window.innerWidth > 630 ) {
//Your Code
}

But as I'm newbie I'm not familiar on how to insert it in my PHP code and where to insert div so it only works for screen above 630px.

Possible duplicate of [Hiding DIV if using mobile browser](https://stackoverflow.com/questions/23841543/hiding-div-if-using-mobile-browser) — xmaster, Jun 14 '19 at 11:27
You cannot insert PHP code into JavaScript. PHP runs on the server. JavaScript runs on the web browser. They do not in any work work together. This is something that you SHOULD do with CSS. Doing it in JavaScript is simply wrong. That is not what JavaScript is for. That is exactly what a media query in CSS is for. — kainaw, Jun 14 '19 at 11:27
I don't want to insert PHP into JavaScript code. Just a div tag that has no PHP code inside. — Smith, Jun 14 '19 at 11:36
if your javascript is working ypu can do 2 things. change `>` to this `<` or make an else statement where it hides the div — xmaster, Jun 14 '19 at 11:38

score 0 · Accepted Answer · answered Jun 14 '19 at 11:50

Here is a way to hide a div when the width of the screen is smaller then 700px

function myFunction(x) {
  if (x.matches) { // If media query matches
    document.getElementById("divIWantedToHide").style.visibility = "hidden";
  } else {
    document.getElementById("divIWantedToHide").style.visibility = "visible";
  }
}

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

<div id="divIWantedToHide">
tset
</div>

Fiddle

Personally I would recommend you to use CSS for this to be more precise media querys.

@media only screen and (max-width: 700px) {
  #divIWantedToHide {
    display: none;
  }
}

<div id="divIWantedToHide">
tset
</div>

Fiddle

As you suggested I used the CSS method and it worked easier than what I thought before. — Smith, Jun 14 '19 at 12:01
I'm happy I could help you! Yes media querys are very easy to learn, Well you can always copy the first line and put the rest of your css in there for the mobile — xmaster, Jun 14 '19 at 12:03

score 0 · Answer 2 · answered Jun 14 '19 at 12:06

This is more of an event issue:

At the basic level, this is how you could toggle by resize event:

var el = document.getElementById("yes"); //get the element node

//target resize event
window.onresize = function(){

  //this will check everytime a resize happens
  if(window.innerWidth > 630)
    {
      //if width is still bigger than 630, keep the element visible
      el.style.display =  "block";
      
      //exit the funtion
      return;
    }
    
    //At this point, the width is less than or equals to 630, so hide the element
    el.style.display =  "none";
}

<div id="yes">
  Yey! I am visible
</div>

Using JavaScript to delete div in screen size below a certain pixel

2 Answers2