How to define overflow-y?

Question

I don't understand why it doesn't like my overflow-y syntax?

function show_modal(target){
    $(target).modal({
        backdrop: true,
        keyboard: true
    }).css({
        width: 'auto',
        overflow-y: 'hidden',
        'margin-left': function () {
            return -($(this).width() / 2);
        }
    });
    $(target).modal('show');
}

Answer 1

The DOM exposes CSS properties as camelcased versions of themselves. Try using overflowY instead.

As a general note, to put a hyphen in an object key name, you need to use quotes:

{
    "width": 'auto',
    "overflow-y": 'hidden',
    "margin-left": function () {
        return -($(this).width() / 2);
    }
}

I am not sure if jQuery automatically maps the CSS names to the corresponding DOM versions, so it is best to use overflowY instead.

As Chris Heald has pointed out, jQuery does in fact accept the hyphenated property name as well as the camel cased one, so either of overflow-y (provided you use quotes) or overflowY should work.

Answer 2

overflow-y is overflow minus y, which is a syntax error since the key part of an object literal must be either an identifier, a string literal, or a numeric literal, not an expression. To use the overflow-y property, you can quote the property name into a string literal like so: 'overflow-y': 'hidden',