Get jQuery Document Ready to work in a Custom Layout Page

Question

Hi
Working with a branding company I have placed my Bootstrap and JQuery files at the bottom of my custom Master page 
</footer>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js">//<![CDATA[
//]]>
</script>
<script type="text/javascript" src="/Style%20Library/Client/js/bootstrap.min.js">//<![CDATA[
//]]>
</script>
<script type="text/javascript" src="/Style%20Library/Client/js/bootstrap-datepicker.js">//<![CDATA[
//]]>
</script>
All good!  Now if I add a   $(document).ready(function()  below the above definitions  and say have a date picker widget marked up this
works.  
I have noticed that in my case I am unable to run document ready function at the custom page layout level- only the one in the custom master file is ever executed -  I have tried moving the above definition files into the header as per the sample in
Bootstrap2.html but SharePoint simply removes them  during the conversion. Moving the same document ready function out of the master into the layout page doesn't work
 I guess my question is am I am have a unique document ready function at the page layout level as this I would have thought this would be possible -  In my case I need my JQuery functon to perform some runtime branding that is unique per  page
Daniel
Freelance consultant

Answer 1

for a quick and dirty implementation, I coded this up which works.  I will see about the other implementation as suggested by Hugh as I am not entirely happy about loading the document ready as there is a slight delays as the body class is set and the
page is rendered 
var bodyCSS ;
function SetBodyCSS()
var ctx = new SP.ClientContext();
var site = ctx.get_site();
var web = ctx.get_web();
// construct a json object
ctx.load(web);
ctx.executeQueryAsync(function(s, a){
var siteBodyContainerCSS = {
"Sales": "Pink",
"IT": "burgundy"
// lookup the class to set from the title
bodyCSS = siteBodyContainerCSS[web.get_title()];
// only bother to set if not null , undefined or empty
if (bodyCSS)
$('#s4-bodyContainer').removeClass("default");
$('#s4-bodyContainer').addClass(bodyCSS);
else
alert( ' no body css class defined for ' + web.get_title()) ;
// now call this to get the body css class
//]]>
</script>
</a>
<script type="text/javascript">//<![CDATA[
$(document).ready(function() {
ExecuteOrDelayUntilScriptLoaded(function () {
/* your code here */
SetBodyCSS();
}, "sp.js");
$('#dp6').datepicker();