I have a website which uses a scrolling div, whose height I wish to switch on load of the page based on the user's browser width. I have a javascript which works in a simple HTML page, but I want to do this style switch within the masterpage...what I am currently using causes a Javascript error when used with a masterpage. Im not sure how this should be done, do I need to register this script or something? Please help.

Here's the code for the masterpage:
Code:
<%@ Master Language="VB" CodeFile="Website1.master.vb" Inherits="Website1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
   <link id="Link2" href="App_Themes/V_Blues/V_Blues.css" rel="stylesheet" type="text/css" />
    <asp:ContentPlaceHolder id="head" runat="server">
   <link rel="stylesheet" id="styleSwitch" href="" />

<script src="" type="text/javascript">
function pageWidth() 
{
return window.innerWidth != null? window.innerWidth : document.documentElement && document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body != null ? document.body.clientWidth : null;
} 
function styleSwitcher()
{
	var theStyleLink = document.getElementById('styleSwitch');

	if (pageWidth() > 800)
	{
	theStyleLink.setAttribute("href",  "V_Blues.css");
	}

	else
 	{
	theStyleLink.setAttribute("href", "VS_Style.css");
	}
}  
</script>
    </asp:ContentPlaceHolder>
    

   


</head>
  
 

<body onload="styleSwitcher();">
    
<form id="form1" runat="server" >
    <div id="PageWrapper">
        <div id="Header">
            <table class="headerbg" width="100%">
            <tr>
            <td>
           <%-- <img src="App_Themes/V_Blues/Images/Vitus_ Logo.png" alt="" />--%>
            <img src="App_Themes/V_Blues/Images/Vitus Logo b office.png"  height="125px" alt="" />
            </td>
            </tr>
            </table>
        </div>
        <div id="MenuWrapper">
            <asp:Menu ID="mnMenu" runat="server" DataSourceID="SiteMapDataSource1" 
            Orientation="Horizontal" StaticEnableDefaultPopOutImage="true" 
            DynamicPopOutImageTextFormatString="">
                <StaticSelectedStyle CssClass="StaticSelectedStyle" />
                <StaticMenuItemStyle CssClass="StaticMenuItemStyle" HorizontalPadding="20px" />
                <DynamicHoverStyle CssClass="DynamicHoverStyle" />
                <DynamicMenuItemStyle CssClass="DynamicMenuItemStyle" />
                <StaticHoverStyle CssClass="StaticHoverStyle" />
            </asp:Menu>
            <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" 
            ShowStartingNode="False" />
         </div>        
          
             <table width="100%" >  
                 
             <tr>
                 <td width="98px" valign="top" >
                  <div id="Sidebar" height="448" >    
                 </div>  
                 </td>
                  <td valign="top">
                    <asp:ContentPlaceHolder id="cpMainContent" runat="server" >
                    </asp:ContentPlaceHolder>
                                       
                  </td>
             </tr>                   
             </table>
            
             <table width="100%">
             <tr>
             <td>
               <div id="Footer" >
                 <a href="Terms.aspx">Terms of Use | </a>
                 <a href="Privacy.aspx">Privacy Policy</a>
             </div>
             </td>
             </tr>
             </table>
       <%-- <div id="MainContent">--%>
            
       <%--  <div id="Footer" >
             <a href="Terms.aspx">Terms of Use | </a>
             <a href="Privacy.aspx">Privacy Policy</a>
        </div>--%>
       <%-- </div>--%>       
    </div>     
    </form>
</body>
</html>
And my and excerpt from the StyleSheets

Code:
/*V_Blues.css*/
html{overflow:hidden;}
body
{
	/* 
		Clears white space around the body except for the top which gets 10 pixels.
	*/
	margin: 10px 0 0 0;
	 overflow:hidden;
	 
}

.ScrollingDiv
{
height:436px;
overflow:scroll;
}
/*VS_Style.css */
 
html{overflow:hidden;}
body
{
	/* 
		Clears white space around the body except for the top which gets 10 pixels.
	*/
	margin: 10px 0 0 0;
	 overflow:hidden;
	 
}

.ScrollingDiv
{
height:436px;
overflow:scroll;
}