Question

I have the following code in my page:

<div id="data_body_container" style="overflow: auto; width: 880px; height: 500px;">
...
</div>

and then below in the site:

<script type="text/javascript">
        $(window).resize(function() {
                    var windowWidth = $(window).width() - 50;
                    var windowHeight = $(window).height() - 50;

            $('#data_body_container').css({'width': windowWidth+'px', 'height': windowHeight+'px','overflow:auto'});

       alert('Resize to '+ windowWidth + 'x'+windowHeight );
        })

    </script>

But my Firefox error console says “invalid object initializer” and points to this line if click the entry. Where is the error? It seems right to me

Answer 1

It’s this bit on the end:

'overflow:auto'

That should be:

overflow: 'auto'
//or, to match your styling...
'overflow': 'auto'

Overall it should look like this:

$(window).resize(function() {
  var windowWidth = $(window).width() - 50,  
      windowHeight = $(window).height() - 50;

  $('#data_body_container').css({'width': windowWidth+'px', 'height': windowHeight+'px', 'overflow': 'auto'});
  alert('Resize to ' + windowWidth + 'x' + windowHeight);
});

Even if it’s a constant value, the format still has to be { name: 'value' }, a single string just isn’t valid syntax 🙂