Question

I just started on my first JavaScript project which is a small script to detect the browser window size, and if it is below 1100px then the div quick will not be shown.

Here is my code:

<Script language="Javascript">
  function toggle(id) {
    var browserwidth =  window.screen.width;
    if (browserwidth <= 1100) {
      document.getElementByID(quick).style.display = 'none';
    } else {
      document.getElementById(quick).style.display = 'block';
    }
  }
</script>

but I cannot figure out for the life of me my it does not work. I am fully aware that css @media could do what I am trying to do but it would not work for the current project I am working on.

Answer 1

You have no variable called quick. We assume that should be a quoted string 'quick':

if (browserwidth <= 1100) {
  document.getElementByID('quick').style.display = 'none';
} else {
  document.getElementById('quick').style.display = 'block';
}

For debugging JavaScript, the Firefox extension Firebug is recommended, or Chrome & Safari’s Developer Tools console. When you run the script, errors will be printed to the console and although they won’t usually tell you the exact problem, they’ll usually identify where the problem occurs.

Update

After seeing the implementation on pastebin, your code is not executing because, well, you aren’t executing it. Your function has been correctly defined but is not being triggered by any event. Bind it to a button onclick or window.onresize to test its functionality:

<button onclick="toggle('quick');">Click to toggle</button>

I have also used the input parameter of your function (id) to dynamically choose the div, rather than hard-coding 'quick':

function toggle(id) {
  var browserwidth =  window.screen.width;
  if (browserwidth <= 1100) {
    // Use id here...
    document.getElementByID(id).style.display = 'none';
  } else {
    document.getElementById(id).style.display = 'block';
  }
}
// For completeness, additional info ported in from comments:

// Function to call toggle()
function init() {
  toggle("quick");
} 
// Attach it to the window.onload event so it fires when the page load completes
window.onload = init;