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

回答

相關問題