0

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";
    };

closed as too broad by Carl Binalla, Ry- Jun 13 at 1:21

Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.

  • What happens when the screen size is less than 1440px? – Ry- Jun 7 at 9:57
  • developer.mozilla.org/en-US/docs/Web/API/Screen/width – ritaj Jun 7 at 9:59
  • Do you want the screen width or the browser viewport width? Seems like you'd want the browser viewport width – frobinsonj Jun 7 at 9:59
  • you either need to provide further detail, or your question is most probably a duplicate of either this or this. on the off-chance that you just want to utilize your css breakpoints in css, then this link should help. – Eugene Ghanizadeh Khoub Jun 7 at 10:01
  • 1
0

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);
1

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>

0

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.

Not the answer you're looking for? Browse other questions tagged or ask your own question.