Why does my jquery var work when I place it at the end of the code and not at the beginning?
<p>I'm incredibly new to jQuery and am wondering if my code will work when deployed to the world and not tested locally. </p>

<p>I have a pretty substantial block of code that populates some form elements among (several) other things. When I place this code into the top of my script just after the document ready portion, it doesn't work. If I place it at the bottom of the script it does work. This makes me a little concerned that the info won't load properly when the page is on the server.</p>

<pre><code>var headBkg = $('#header').css('background-image'); //gets the background image url
$('#header_imgURL').attr( 'value', headBkg ); //populates a form field with the url for later use
</code></pre>

<p>What do I need to know about this to be sure I'm not going to implement something that doesn't work on a production server? How can I time this type of thing to work?</p>

<pre><code>$(document).ready(function() {
            // Begin Modal Window //
            // get the height and width of the page
            var window_width = $(window).width();
            var window_height = $(window).height();
            //vertical and horizontal centering of modal window(s)
            /*we will use each function so if we have more then 1
            modal window we center them all*/
            $('.modal_window').each(function(){

                //get the height and width of the modal
                var modal_height = $(this).outerHeight();
                var modal_width = $(this).outerWidth();
                //calculate top and left offset needed for centering
                var top = (window_height-modal_height)/2;
                var left = (window_width-modal_width)/2;
                //apply new top and left css values
                $(this).css({'top' : top , 'left' : left });

            });


            $('.activate_modal').click(function(){                                  
                //get the id of the modal window stored in the name of the activating element

                var modal_id = [$(this).attr('name'), $(this).attr('id')];
                //var 


                // This is the original working code // var modal_id = $(this).attr('name');

                //alert($(this).attr('id'));

                //var theform = $(this).attr('id');
                //use the function to show it
                show_modal(modal_id);
            });

            $('#cancel').click(function(){
                //use the function to close it
                close_modal();
            });

            $('.close_modal').click(function(){
                //use the function to close it
                close_modal();
            });
        //});

        //THE FUNCTIONS
            function close_modal(){
                //hide the mask
                $('#mask').fadeOut(500);

                //hide modal window(s)
                $('.modal_window').fadeOut(500);
            }
            function show_modal(modal_id){
                //set display to block and opacity to 0 so we can use fadeTo
                $('#mask').css({ 'display' : 'block', opacity : 0});

                //fade in the mask to opacity 0.8
                $('#mask').fadeTo(500,0.7);

                //show the modal window
                $('#'+modal_id[0]).fadeIn(500);


                // Use this if statement to dertermine whether to serve up the upload or the other script

                if ( modal_id[1] == "backer")
                {   

                var jForm = $( "#uploadform" );    
                jForm.submit(function( objEvent ){
                    var jThis = $( this );
                    var strName = ("uploader" + (new Date()).getTime());
                    var jFrame = $( "&lt;iframe name=\"" + strName + "\" src=\"about:blank\" /&gt;" );
                    jFrame.css( "display", "none" );
                    jFrame.load(function( objEvent ){
                            var objUploadBody = window.frames[ strName ].document.getElementsByTagName( "body" )[ 0 ];
                            var jBody = $( objUploadBody );
                            var objData = eval( "(" + jBody.html() + ")" )
                            var thumb = ('thumbnails/' + eval(jBody.html()));
                            var title = $("#image_title").val(); 
                            //Populates the title hidden field and
                            //will serve as a string for the naming convention
                            var alt = $("#image_alt").val();
                            // alt text could be the same as the title possibly...

                            // ----------- //
                            //Put an if statement to set the elments that need the preview image

                            $("#header").css("background", "url(" + thumb + ") no-repeat center");
                            $("#preview").attr("src", thumb);
                            $("#thebackgroundimage").attr("value", thumb);
                            $("#theimagetitle").attr("value", title );

                            // ----------- //
                    setTimeout(function(){
                            jFrame.remove();
                            },100);
                    });
                $( "body:first" ).append( jFrame );
                jThis
                    .attr( "action", "upload_act_single.cfm" )
                    .attr( "method", "post" )
                    .attr( "enctype", "multipart/form-data" )
                    .attr( "encoding", "multipart/form-data" )
                    .attr( "target", strName );
                });

            // End Image Upload //
                    // In the future this is poulated with the data from the ColdFusion query
                    $('#preview').attr("src", "images/cfr_footwear_header_bkg.jpg");


                }
            }

            // END of the Modal Window script //                   

            // Replace the background image on the header //
            // write this code when the cf query is ready to go //
            //&lt;!---$("#header").css("background-image", "url(&lt;cfoutput&gt;#headerbg#&lt;/cfoutput&gt;) no-repeat center"); ---&gt;//
            $("#header").css("background", "url(images/cfr_footwear_header_bkg.jpg) no-repeat center");


            //jQuery scroller for the FarmNews on the index page //                    
            $(function() {  
                $(".farmnews").jCarouselLite({  
                        vertical: true,  
                        visible: 4,  
                        auto:2500,  
                        speed:400,
                        hoverPause:true
                    });  
            });

            // jQuery scroller for the mid-page specials // 
            $(function() {  
                $(".slideshow").jCarouselLite({  
                        vertical: false,  
                        visible: 1,  
                        auto:4500,  
                        speed:1000,
                        easing:"easeinout",
                        hoverPause:true
                    });  
            });

            // This is to replace text in the input fields //
            $('.textbox').click(function() {
                if (this.value == this.defaultValue) {
                this.value = '';}
            });
            $('.textbox').blur(function() {
                if (this.value == '') {
                this.value = this.defaultValue;}
            });


            var headBkg = $('#header').css('background-image');
            var win1_img = [$('#window_one img').attr('src'), $('#window_one img').attr('title'), $('#window_one img').attr('alt') ]


            $('#header_imgURL').attr( 'value', headBkg );
            $('#win1_imgURL').attr('value', win1_img[0] );
            $('#win1_imgTitle').attr('value', win1_img[1]);
            $('#win1_imgAlt').attr('value', win1_img[2]);



        });
</code></pre>

<p>There's the whole shebang! It's still under development so please ignore my seeminly meaningless comments in places.</p>
