CODEWITHSUNDEEP
jqueryjquery-mobileresponsive-design
shan41700
shan41700

Reputation: 1

How to use jquery to hide elements on mobile?

In my script tag of my index page I have:

if ($(window).width() < 700px){
  $('container').hide();
}

In my console I am receiving an

Uncaught SyntaxError: Invalid or unexpected input

Upvotes: 0

Views: 381

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337560

There's two issues in your code. Firstly 700 px is not a valid expression. It would be if it was in quotes to make it a string, but that wouldn't work (as you expect it to) with the < operator. As the width() method returns an integer just compare it to 700.

Secondly, container is not a valid selector as there is no <container /> element in HTML. I presume that's supposed to be an id or class selector and you've missed the # or . prefix.

if ($(window).width() < 700) {
  $('#container').hide(); // or .container, maybe?
}

However, if you're trying to make the layout of your page responsive to the width of the display you should not be using JS. Use CSS Media Queries instead:

@media (max-width: 700px) { 
  #container {
    display: none;
  }
}

Upvotes: 1

Related Questions