Question

I have a CSS class and I wish to set it’s width attribute:

ul.month-wrapper li
{
    font-size: 13px;
}
ul.year-wrapper li
{
    font-size: 16px;
}

And the Jquery:

var MonthWidth = 30;
var YearWidth = MonthWidth * 12;

// Set CSS classes widths
$('ul.month-wrapper li').css('width', MonthWidth + 'px');
$('ul.year-wrapper li').css('width', YearWidth + 'px');

However this doesn’t seem to do anything, widths remain unchanged! Any ideas?

Answer 1

You can’t add anything to a CSS class. The CSS class is static.

What you are doing above is adding the width style attribute to any controls on the page which are li within a ul with the class .year-wrapper

My guess is your running this script too soon in the page script, before the List Items have loaded into the page. Try the following to ensure the page has finished loading:

$(document).ready(function(){
   var MonthWidth = 30;
   var YearWidth = MonthWidth * 12;

   // Set CSS classes widths
   $('ul.month-wrapper li').css('width', MonthWidth + 'px');
   $('ul.year-wrapper li').css('width', YearWidth + 'px');

});