title: Responsive javascript using if/else
body: <p>I have wrote script to display a message at the top of the screen (hide automatically) with the following code:</p>
  
  <pre><code>    &lt;script type="text/javascript"&gt;
      $(document).ready(function(){
          setTimeout(function() {
          $('#dialog2').animate({
              marginTop: "40",
                  }, 700);
                  },1000);
          setTimeout(function() {
          $('#dialog2').animate({ 
              marginTop: "-80px",
                  }, 1500);
          },10000);
       });
      &lt;/script&gt;
  </code></pre>
  
  <p>It works well.
  Now I'm trying to adapt <code>marginTop</code> with different size of screens with
  <code>if</code>/<code>else</code> like this pseudo code:</p>
  
  <pre><code>if (window.matchMedia("(min-width: 240px)").matches) {
      marginTop: "20",
  } else {
      marginTop: "40", // pseudocode
  } 
  </code></pre>
  
  <p>I have tried</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function(){
          setTimeout(function() {
          if (window.matchMedia("(min-width: 400px)").matches) {
              $('#dialog2').animate({
                  marginTop: "40",
                      }, 700);
                      },1000);
          } else {
              $('#dialog2').animate({
                  marginTop: "40",
                      }, 700);
                      },1000);
          setTimeout(function() {
          $('#dialog2').animate({ 
              marginTop: "-80px",
                  }, 1500);
          },10000);
       });
      &lt;/script&gt;
  </code></pre>
  
  <p>But it seems not working. I'm new in javascript, and I think the <code>setTimeout</code> is too hard to integer for me.</p>
  
  <p>Any solution ?</p>