Inline If in Javascript to manipulate CSS code

Question

Im trying to hide the calendar button if the page width is smaller than X pixels. There seems to be an incorrect syntax issue but I cant find out what I am doing wrong. Here is the code;

'calendars' : {
                    label : Dictionary.Calendar.AddCalendars,
                    icon : 'fa-calendar',
                    showText : false,
                    css : (($('.ak-page').width() < 500px ) ? 'col-xs-hide' : ''),

there are more properties below css, Im not going to include them here because I know the problem is at the line where I define 'css' property.

Answer 1

500px is invalid JavaScript syntax.

Since jQuery's width() method returns the number of pixels as an integer, I think you mean:

css : (($('.ak-page').width() < 500 ) ? 'col-xs-hide' : '')

Or, if you can support window.matchMedia , you can achieve this more reliably by checking the width of the screen, not the width of an arbitary element in your DOM:

css : (window.matchMedia('(max-width: 499px)').matches ? 'col-xs-hide' : '')