Loading stylesheet dependant on User Agent
<p>I have to load a different Stylesheet depending on whether the User Agent is an iPad or other.  I know that generally, detecting browsers isn't the most fantastic idea and will probably cripple our maintainability sometime in the future..not my decision.</p>

<p>So here we have some JavaScript to detect the user agent.  It isn't working.  I may have mis-escaped something.   The error I am getting is a red herring (object reference), but only shows up when I execute the JavaScript.</p>

<pre><code>    $(document).ready(function () {
        alert('ready fired');
        if (navigator.userAgent.indexOf("iPad") != -1) {
            //alert('bleep bloop blop...iPad detected');
            var stringToWrite = '&lt;script src=\'\&lt;\%\= ResolveUrl("~/Scripts/iscroll.js") \%\&gt;\' type="text/javascript"&gt;&lt;\/script&gt;';
            stringToWrite += '&lt;link href=\'\&lt;\%\= ResolveUrl("~/Stylesheets/scrollbar.css") \%\&gt;\' rel="stylesheet" type="text/css" \/&gt;';
            stringToWrite += '&lt;link href=\'\&lt;\%\= ResolveUrl("~/Stylesheets/iPadCommon.css") \%\&gt;\' rel="stylesheet" type="text/css" \/&gt;';
            alert(stringToWrite);
            document.write(stringToWrite);
        }
        //else
        //alert('bleep bloop blop...who cares browser');
    });
</code></pre>
