function based on screen size

Question

onClick on button pops up a registration form. the problem is that I need to do it only when the screen size is 1440px and more.

   <a href="#" class="button"onmousedown="viewForm()">start</a>

   function viewForm(){
        document.getElementById("form").style.display = "block";
    };

https://developer.mozilla.org/en-US/docs/Web/API/Screen/width — Roberto Zvjerković, Jun 07 '19 at 09:59
Do you want the screen width or the browser viewport width? Seems like you'd want the browser viewport width — frobinsonj, Jun 07 '19 at 09:59
you either need to provide further detail, or your question is most probably a duplicate of either [this](https://stackoverflow.com/questions/3437786/get-the-size-of-the-screen-current-web-page-and-browser-window) or [this](https://stackoverflow.com/questions/31511001/is-there-a-javascript-equivalent-to-using-media-query). on the off-chance that you just want to utilize your css breakpoints in css, then [this link](https://github.com/AllThingsSmitty/css-breakpoints-in-js) should help. — Eugene Ghanizadeh Khoub, Jun 07 '19 at 10:01
Possible duplicate of [Get the size of the screen, current web page and browser window](https://stackoverflow.com/questions/3437786/get-the-size-of-the-screen-current-web-page-and-browser-window) — Eugene Ghanizadeh Khoub, Jun 07 '19 at 10:02

Shubham Dixit · Answer 1 · 2019-06-07T10:13:15.193

You can use window.resize event.Try resizing your window you will see the other element visible.Hope it helps.

function reportWindowSize() {
  console.log(window.innerWidth)
  if (window.innerWidth >= 1440) {
    document.getElementById("a").style.display = "block"
    document.getElementById("form").style.display = "block";
  }
  // just for test my pc has small screen
  else if (window.innerWidth <= 500) {
    document.getElementById("b").style.display = "block"
  }
}

function viewForm() {
  document.getElementById("form").style.display = "block";
};

window.onresize = reportWindowSize;

<a href="#" id="a" class="button" onmousedown="viewForm()" style="display:none">start</a>

<a href="#" id="b" class="button" onmousedown="viewForm()" style="display:none">ENDIT</a>

<form id="form"><input type="text"></form>

score 0 · Answer 2 · answered Jun 07 '19 at 10:01

You can read window size in several ways (take a look here Device and Viewport Size In JavaScript

So something like this should work:

<a href="#" class="button"onmousedown="viewForm()">start</a>

function viewForm(){
    if (window.innerWidth >= 1440 ) {
        document.getElementById("form").style.display = "block";
    }
};

Maybe you don't need all that, you may simply hide the link with a CSS media query, all depends on what you are trying to do.

score 0 · Accepted Answer · answered Jun 07 '19 at 10:01

Without jQuery:

function viewForm(){
  if (window.innerWidth >= 1440) {
    document.getElementById("form").style.display = "block";
  }
};

Be aware that if a user decrease the size of the window you form will remain visible even below 1440. You might want to check for the resize event as well.

You can update the function above this way:

function viewForm(){
  if (window.innerWidth > 1440) {
    document.getElementById("form").style.display = "block";
  } else {
    document.getElementById("form").style.display = "none";
  }
};

window.addEventListener('resize', viewForm);

function based on screen size

3 Answers3