Displaying content in the right div when the web page is loaded

I'm clicking on list item links in my 'left' div and开发者_Python百科 then displaying an html page in my 'right' div on my web page. I'd like one of the html pages to be loaded when the web page is first loaded (i.e. as a default). How can I do this?

Also, how can I get the background color to extend to the bottom of the 'right' div? I've been creating divs with auto specifications and if my 'left' div is longer than the content in my 'right' div, I'll have a white bar at the bottom.

jQuery CODE:

<script type="text/javascript" id="initialLoad">
    $("#contactDetailsPane").load('listOfServices.htm');
</script>

<script type="text/javascript" id="jQueryCode">

    $(document).ready(
        function(){
            $('a.names').click(
                function(){
                    var thisId = $(this).attr('id');
                    $('#contactDetailsPane').fadeOut(400,
                    function(){
                        //$(this).load('tempPage.html #'+thisId+'Details');
                        $(this).load(thisId + '.htm');
                        var thisWidth = $(this).parents('dd').width();
                    }).fadeIn(600);

                    return false;
                }
            );
            $('.close').live('click',function(){
                $(this).parents('div').fadeOut();
            });
        }
    );
</script>

The easiest ajax request I can think about .. include jquery for this.

$(function(){
    $.get('htmldoc.html', function(data) {
       $('#resultdiv').html(data);
    });
});

$(document).ready(function(){
   $("#idOfYourLink").click()
})

initial load : before document.ready section: $("#rightDiv").load('path/to/html/file.html');

background color etc is css related : google is your friend!

When you say that you have an "HTML page" in your right div, do you mean that you have a whole new page loaded into an iframe? Or is it just a plain ol' div?

To answer your second question, you can implement the layout described here.

Pay special attention to Step 6.

about the background color issue: look into creating a wrapper div around both of them and set the background color you want in that div's css properties. then set the backgrounds of the left and right div to be transparent.

ex in your html:

<div id="wrapper">
     <div id="left"></div>
     <div id="right></div>
</div>

and in your css:

#wrapper{
   background-color:#ff0000;
}

#left, #right{
background:transparent;
}