I am running a script to show a notification within a menu with scroll, but I do not know how to detect if the device has orientation landscape to validate the script.

The call onClick="VerHayMas();" works perfectly, but if the user open the menu once, clicking on #boton-menu and with your device in portrait, after changing the orientation to landscape the script no longer meet the objective.

The script has its logic ONLY if the device is in landscape, which is when the menu needs to show the notification.

So, is it possible that my script is only valid with (max-width:999px) and (orientation:landscape), ignoring the portrait...?

I am a beginner in JS, and I do not know how to do it, really.

Any idea?

Thanks in advance!

HTML & CSS

#mas-menu {display:none}

<div id="boton-menu" onClick="VerHayMas();">+</div>

Script:

var clicksVerHayMas = 0;

function VerHayMas() {
    clicksVerHayMas = clicksVerHayMas + 1;
    if (clicksVerHayMas == 1) {
        document.getElementById('mas-menu').style.display = 'block';

        window.setTimeout(function() {
            $('#mas-menu').fadeOut('slow');
        }, 4000);
    }
};

EDIT:

I have tried with the following script, but it does not work. If the user makes a call to onClick="VerHayMas();" in portrait mode, the script is no longer running in landscape mode.

What am I doing wrong here?

const matchesMediaQuery = window.matchMedia('(max-width:999px) and (orientation:landscape)').matches;

if (matchesMediaQuery) {

var clicksVerHayMas = 0;
  function VerHayMas() {
  clicksVerHayMas = clicksVerHayMas +1;
  if(clicksVerHayMas == 1){
  document.getElementById('mas-menu').style.display = 'block';

  window.setTimeout(function(){
  $('#mas-menu').fadeOut('slow');
  },4000);
  }};
}

I am running a script to show a notification within a menu with scroll, but I do not know how to detect if the device has orientation landscape to validate the script.

The call onClick="VerHayMas();" works perfectly, but if the user open the menu once, clicking on #boton-menu and with your device in portrait, after changing the orientation to landscape the script no longer meet the objective.

The script has its logic ONLY if the device is in landscape, which is when the menu needs to show the notification.

So, is it possible that my script is only valid with (max-width:999px) and (orientation:landscape), ignoring the portrait...?

I am a beginner in JS, and I do not know how to do it, really.

Any idea?

Thanks in advance!

HTML & CSS

#mas-menu {display:none}

<div id="boton-menu" onClick="VerHayMas();">+</div>

Script:

var clicksVerHayMas = 0;

function VerHayMas() {
    clicksVerHayMas = clicksVerHayMas + 1;
    if (clicksVerHayMas == 1) {
        document.getElementById('mas-menu').style.display = 'block';

        window.setTimeout(function() {
            $('#mas-menu').fadeOut('slow');
        }, 4000);
    }
};

EDIT:

I have tried with the following script, but it does not work. If the user makes a call to onClick="VerHayMas();" in portrait mode, the script is no longer running in landscape mode.

What am I doing wrong here?

const matchesMediaQuery = window.matchMedia('(max-width:999px) and (orientation:landscape)').matches;

if (matchesMediaQuery) {

var clicksVerHayMas = 0;
  function VerHayMas() {
  clicksVerHayMas = clicksVerHayMas +1;
  if(clicksVerHayMas == 1){
  document.getElementById('mas-menu').style.display = 'block';

  window.setTimeout(function(){
  $('#mas-menu').fadeOut('slow');
  },4000);
  }};
}

• javascript
• jquery

• 1 You can get the width and height of a window with window.innerHeight and window.innerWidth respectively. How about keep it simple, if height is less than width, the user is in landscape mode. – Alicia Sykes Commented May 4, 2019 at 0:21
• If you simply want to hide something on landscape orientation, why not use one line of CSS? – Salman Arshad Commented May 4, 2019 at 12:58
• Your attempt at putting the function declaration inside the if statement does not work because then it is no longer a global that can be called from the inline event handler attribute. – Bergi Commented May 4, 2019 at 13:07

2 Answers 2

I'd keep it simple, if screen height is less than width, then the user is in landscape mode. You can grab the height and width from the global window object.

if (window.innerWidth > window.innerHeight) {
    // The user is in landscape mode!
    userInLanscapeFunc();
} 

Reference: https://developer.mozilla/en-US/docs/Web/API/Window/innerHeight

You can solve this using matchMedia:

const matchesMediaQuery = window.matchMedia('(max-width:999px) and (orientation:landscape)').matches;

if (matchesMediaQuery) {
    // do something
}

Make sure to note the browser support in the MDN link.

EDIT TO PROVIDE CONTEXT:

Because the user may be moving around their screen, you will want to make this evaluation inside VerHayMas, each time it is run, to determine if the main body of the script should be executed:

var clicksVerHayMas = 0;

function VerHayMas() {
    var isLandscapeAndMeetsSizeRequirements = window.matchMedia('(max-width:999px) and (orientation:landscape)').matches;

    if (isLandscapeAndMeetsSizeRequirements) {
        clicksVerHayMas = clicksVerHayMas + 1;
        if (clicksVerHayMas == 1) {
            document.getElementById('mas-menu').style.display = 'block';

            window.setTimeout(function() {
                $('#mas-menu').fadeOut('slow');
            }, 4000);
        }
    }
};

So VerHayMas will be run on every click, but only if the screen meets the requirements as determined by the media query string will it execute the code inside the if block.