Question

I’m getting a SyntaxError: Parse Error when my browser runs the following code for an iPhone:

if (window.innerWidth && window.innerWidth <= 480) {
    $(document).ready(function(){
        $('#usernav ul').addClass('hide');
        $('#usernav').append('<div class="leftButton"
        onclick="toggleMenu()">Menu</div>');
    });
    function toggleMenu() {
        $('#usernav ul').toggleClass('hide');
        $('#usernav' .leftButton').toggleClass('pressed');
    }
}

I’m new to all of this (programming, programming languages, etc.) but I’m wondering if this error is caused because I’m viewing my site in a browser.

I’ve noticed that when I drag my browser’s window so the viewing width decreases, my styles degrade as the width decreases. Most sites (including SO it seems) don’t allow this degradation in a browser, so I guess my questions are:

1. What’s the error in my JavaScript
2. What are the best ways to stop my browser from degrading?

Hopefully that makes sense. Maybe the degradation isn’t related to the JavaScript but since it’s relevant I figured I’d ask.

EDIT: I’ve updated the code to close off the append but I’m still getting errors at the $('#usernav').append('<div class="leftButton" line. My IDE says “unterminated string literal”.

Answer 1

The problem is here:

$('#usernav').append('<div class="leftButton"
    onclick="toggleMenu()">Menu</div>;

You’re not closing .append('. You want this:

$('#usernav').append('<div class="leftButton" onclick="toggleMenu()">Menu</div>');