title: ASP.NET, CSS and jQuery
body: <p>I have this aspx page:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head runat="server"&gt;
      &lt;title&gt;Some Title&lt;/title&gt;
      &lt;link href="css/home.css" rel="stylesheet" /&gt;
      &lt;script src="js/jQuery.js"&gt;&lt;/script&gt;
      &lt;script src="js/dragBar.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="content"&gt;
      &lt;div id="map"&gt;
          &lt;iframe frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.za/maps/ms?msa=0&amp;amp;msid=208869092274662645717.0004dd2a2065f7b179e5b&amp;amp;hl=en&amp;amp;ie=UTF8&amp;amp;ll=-25.401819,28.721652&amp;amp;spn=0,0&amp;amp;t=m&amp;amp;output=embed"&gt;
          &lt;/iframe&gt;
          &lt;div id="dragbar"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="main"&gt;
          &lt;asp:Label ID="lblError" runat="server" Text="Label"&gt;&lt;/asp:Label&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is my CSS:</p>
  
  <pre><code>#content {
      position: relative;
      height: auto;
      width: 1000px;
      margin: auto;
      padding-top: 150px;
      z-index: 2;
      background-color: white;
      border-left: 1px solid black;
      border-right: 1px solid black;
  }
  
  #content iframe {
      position: relative;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100px;
      min-height: 200px;
      border-bottom: 1px solid black;
      box-shadow: 0px 0px 10px black;
  }
  
  #content #main {
      background-color: BurlyWood;
      position: relative;
      width: 1000px;
      height: 200px;
      right: 0;
      left: 0px;
      z-index: 0;
  }
  
  #content #map {
      background-color: IndianRed;
      width: 1000px;
      height: auto;
      position: relative;
      top: 0px;
      bottom: 38px;
      overflow-y: hidden;
      z-index: 1;
  }
  
  #content #dragbar {
      background-color: black;
      position: absolute;
      bottom: 0px;
      width: 100%;
      height: 3px;
      cursor: row-resize;
      z-index: 1000;
  }
  </code></pre>
  
  <p>And this is my jQuery:</p>
  
  <pre><code>$('#dragbar').mousedown(function (e) {
      e.preventDefault();
      $(document).mousemove(function (e) {
          $('#main').css("top", e.pageY);
          $('#dragbar').css("bottom", 0);
          $('iframe').css("height", e.pageY - 10);
      });
  });
  
  $(document).mouseup(function (e) {
      $(document).unbind('mousemove');
  });
  </code></pre>
  
  <p>My problem is that this works on jsFiddle when I type the code, but this is not working in Visual Studio 2012. Is there something I am missing?</p>
  
  <p>Sorry, Forgot about the problem.
  My problem is that it should resize the map div and the iframe inside it when I drag the dragbar div.</p>
  
  <p>My JFiddle location: <a href="http://jsfiddle.net/Bebbie7/QGK5N/" rel="nofollow">http://jsfiddle.net/Bebbie7/QGK5N/</a></p>