Defaulting css values: How to cater for no element headache!

Defaulting css values: How to cater for no element headache!

Hi all
I could really do with a little help with dealing with an element that does not always exist please.

This is my first dip into jQuery and Javascript but I'm not a developer newbie

I have 5 forms that share the same HTML (A Rails partial if it helps!)
The shared HTML is a website preview and in one form I am allowing users to choose the height and width of the border around their website.

On the forms that do not have the input fields available Internet Explorer throws a javascript error (Firefox handles the issue with no problems)

The idea is that as the values in the uinput fields change the website preview to reflect those changes as you type.

The good news is that the code I have works! WooHoo!

But it causes problems for other forms that do not have the input fields for the width and height available that also use the website preview HTML

The id's of the input fields are #website_layout_website_width and #website_layout_website_height

//This code changes the height and width of the border as you type.

jQuery(document).ready(function($){
    $(function(){
        $("#website_layout_website_width").keyup(function (e) {
            $('#theme_layout').css({ width: $(this).val() + '%'});
        });
    });
});

jQuery(document).ready(function($){
    $(function(){
        $("#website_layout_website_height").keyup(function (e) {
           $('#theme_fixed').css( "padding-top", $(this).val() + '%');
           $('#theme_fixed').css( "padding-bottom", $(this).val() + '%');
        });
    });
});

// This code initialises the website preview borders to the values of the input fields when the form loads up
jQuery(document).ready(function($){
    $(function(){
            $('#theme_layout').css({ width: $("#website_layout_website_width").val() + '%'});
            $('#theme_fixed').css("padding-top", $("#website_layout_website_height").val() + '%');
            $('#theme_fixed').css("padding-bottom", $("#website_layout_website_height").val() + '%');
    });
});


Maybe there is a better way of dealing with the key up events that mean that I don't need the initialisation code or I need to change the initialisation code to handle the fact that the #website_layout_website_width input field and the
website_layout_website_height input field are not always available

I am open to suggestions and any help would be appreciated

Thank you for reading

James