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".

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".

• javascript
• screen

• Why don't you create the element with jQuery and get rid of the inline event handler? $('<div />', {'class': "leftButton", text: 'Menu', click: toggleMenu}).appendTo('#usernav'); – Felix Kling Commented Sep 23, 2011 at 0:27

3 Answers 3

Javascript can end lines with semicolons OR newlines. When you put in a new line, you ended your statement early. Put the statement on one whole line.

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>');

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

I guess you forgot to close the function append() with the bracket and the semicolon. :)