how to generate media queries with JQUERY

Question

I am trying to display a dialog box when users access a page with a device smaller than a desktop. I am not an expert in jQuery. I tried the following below but was not successful.

$(document).ready(function () {
  if (window.matchMedia('(max-width: 767px)').matches) {
    var dialog = $("#ScreenSize").dialog({
      modal: true,
      autoopen: true,
    }).show();
  } else {
    $("ScreenSize").dialog().hide();
  }
});

<div id="ScreenSize" style="display:none">
  <p>Go to Text Box</p>
</div>

You have a typo. The # is missing before ScreenSize for the hide() — Gerard
– Gerard, Commented May 24, 2017 at 10:36

quirimmo · Accepted Answer · 2017-05-24 10:46:08Z

1

This code is executed on Dom ready. Considering that you open that dialog only in the if branch, actually the else branch is useless because when you reload the page, it doesn't get opened at all. Or maybe there is some other logic that you are not providing.

Then .dialog() is a method of the jQuery UI library. You should add also that library in order to get the dialog working. If you open your console you see that the method dialog() is undefined.

answered May 24, 2017 at 10:46

quirimmo

10k3 gold badges33 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

szegheo Over a year ago

This is correct. I've just demonstrated it in my answer.

szegheo · Accepted Answer · 2017-05-24 12:06:39Z

1

Your javascript code is OK. On the html part, jQuery and jQuery UI (for the dialog widget) scripts must be loaded in the correct order: jQuery first, UI after. Try the following code snippet, it works as you wanted.

$(document).ready(function () {
  if (window.matchMedia('(max-width: 767px)').matches) {
    var dialog = $("#ScreenSize").dialog({
      modal: true,
      autoopen: true
    }).show();
  } else {
    // this part is useless...
    $("ScreenSize").dialog().hide();
  }
});

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>  
</head>
<body>
  <div id="ScreenSize" style="display:none">
    <p>Go to Text Box</p>
  </div>
</body>
</html>

answered May 24, 2017 at 12:06

szegheo

4,4456 gold badges34 silver badges35 bronze badges

2 Comments

szegheo Over a year ago

Although, a css based solution (something like @Jason answered) could be better, and then with jQuery you can test it like if $('#ScreenSize').is(':visible') is true then open your modal...

cedPound Over a year ago

thanks i have sorted it out myself but i also test your solution and it worked i appreciate it.

Jason · Accepted Answer · 2017-05-24 10:52:01Z

0

Why is jQuery needed? Why not just use css media query to display and hide your dialog box.

CSS:

#ScreenSize {
  display: none;
}

@media only screen and (max-width: 767px) {
    #ScreenSize {
        display: block;
    }
}

answered May 24, 2017 at 10:52

Jason

2685 silver badges14 bronze badges

Comments

cedPound · Accepted Answer · 2017-05-24 14:18:18Z

0

i have used these following below in order to find a solution to my problem

    $(function () {
    if (screen.width < 1023) {
        $("#ScreenSize").show();


        var dialog = $("#ScreenSize").dialog({

            modal: true,
            autoopen: true,
            resizable: false, draggable: false,



        })


    }
    else {
        $("#ScreenSize").hide();
    }


});

<span class="ui-state-default ui-corner-all" style="float: left; margin: 0 7px 0 0;"><span class="ui-icon ui-icon-info" style="float: left;"></span></span>

    <div style="margin-left: 23px;">


     <p>go to Text Box</p>
 </div>
                     <//div>

answered May 24, 2017 at 14:18

cedPound

3771 gold badge3 silver badges15 bronze badges

Collectives™ on Stack Overflow

how to generate media queries with JQUERY

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related