Using Javascript to set the html properties of a form, the backgroundColor property does not work

advertisements

I am trying to set the html properties of a form in my javascript code. All properties seem to be passed through to the web page fine (ie width and height), apart from the backgroundColor property.

jQuery(function () {

jQuery("#dialog-form1").dialog({
autoOpen: false,
height: 250,
width: 400,
    backgroundColor: #e74c3c,
    modal: true,
    buttons: {},
    //close: function() {}

Any ideas why?

Thanks,

Mark


You've got two problems, one of which is that your color needs to be enclosed in quotes so it's a valid string value (as pointed out by freefaller).

The second problem is that backgroundColor is not a valid option for the jQueryUI Dialog so you cannot pass it in and have it work. Instead, set the backgroundColor by chaining a call to .css:

jQuery(function () {
    jQuery("#dialog-form1").css({
        "backgroundColor": "#e74c3c"
    }).dialog({
        "autoOpen": true,
            "height": 250,
            "width": 400,
            "modal ": true,
    });
});

or

jQuery(function () {
    jQuery("#dialog-form1").dialog({
        "autoOpen": true,
            "height": 250,
            "width": 400,
            "modal ": true,
    }).css({
        "backgroundColor": "#e74c3c"
    });
});

Here's a fiddle: http://jsfiddle.net/72bPM/