ASP.NET，CSS和jQuery

我有这个aspx页面：ASP.NET，CSS和jQuery

<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title>Some Title</title> 
    <link href="css/home.css" rel="stylesheet" /> 
    <script src="js/jQuery.js"></script> 
    <script src="js/dragBar.js"></script> 
</head> 
<body> 
<div id="content"> 
    <div id="map"> 
     <iframe frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.za/maps/ms?msa=0&amp;msid=208869092274662645717.0004dd2a2065f7b179e5b&amp;hl=en&amp;ie=UTF8&amp;ll=-25.401819,28.721652&amp;spn=0,0&amp;t=m&amp;output=embed"> 
     </iframe> 
     <div id="dragbar"></div> 
    </div> 
    <div id="main"> 
     <asp:Label ID="lblError" runat="server" Text="Label"></asp:Label> 
    </div> 
</div>

这是我的CSS：

#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; 
}

，这是我的jQuery：

$('#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'); 
});

我的问题是这样的，当我键入代码时，jsFiddle可以工作，但这不适用于Visual Studio 2012.有什么我失踪了吗？

对不起，忘了问题。我的问题是，当我拖动拖动div时，它应该调整其中的地图div和iframe的大小。

我JFiddle位置：http://jsfiddle.net/Bebbie7/QGK5N/

来源

2013-05-21 Frederik Moller

您期望发生什么？ –

你错过了一个更好的解释你的问题！ – Pete

这是否正是您在asp.net页面中所拥有的内容，因为如果您通过ID引用的任何项目都是asp.net runat = server controls，则其浏览器中的客户端ID将与asp.net页面中的ID不同你的jQuery选择器不会找到它们。在浏览器的asp.net页面查看源代码并检查！ –

的jsfiddle和VisualStudio中之间的主要区别是如何被包含的脚本。首先，通过运行脚本调试器或添加警报，确保jquery正确加载（路径正确等）。其次，尝试将脚本包装在OnReady处理程序中，以确保在执行之前所有内容都已完成加载：

$(document).ready(function() { 
    alert("jQuery is working"); 

    $('#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'); 
    }); 
});

来源

2013-05-21 12:41:54 LouD

哇，没有意识到...所有我加的是：$（document）.ready（function（）{。现在它的工作。谢谢我的男人！ –

ASP.NET，CSS和jQuery

回答

相关问题