使用滾動調整插件大小

我在其上繪製有其他div的div上啓用了滾動功能。我想調整覆蓋div來標記底層div上的東西。我正在使用jqueryui可調整大小的功能。當底層div處於滾動0,0位置時，它工作正常，但是當div滾動，然後調整大小時，覆蓋div跳躍而沒有押韻和原因！請幫我這個。歡迎任何建議。使用滾動調整插件大小

這是測試條件的代碼。抱歉，無法爲其創建小提琴

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
    <TITLE> Resizable </TITLE> 
    <link rel="stylesheet" type="text/css" href="Styles/jquery.ui.resizable.css" /> 

    <script type="text/javascript" src="Scripts/jquery-1.5.1.min.js"></script> 
    <script type="text/javascript" src="Scripts/jquery.tools.min.js"></script> 
    <script type="text/javascript" src="Scripts/jquery-layout.js"></script> 
    <script type="text/javascript" src="Scripts/jquery-ui.js"></script> 

    <script type="text/javascript" src="Jquery/jquery.ui.core.js"></script> 
    <script type="text/javascript" src="Jquery/jquery.ui.widget.js"></script> 
    <script type="text/javascript" src="Jquery/jquery.ui.mouse.js"></script> 
    <script type="text/javascript" src="Jquery/jquery.ui.resizable.js"></script> 


    <style type="text/css"> 
    #insertfile { 
    overflow: auto; 
    position: absolute; 
    width:200px; height:100px; 
    border: 2px solid #000; 
} 
td { width: 50px; height: 50px; text-align: center; } 
    </style> 

    <script type="text/javascript"> 
    $(function() { 
    var currentTd = $('td#currentId'); 
    var scrtop = currentTd.position().top; 
    var scrleft = currentTd.position().left; 
    $('#insertfile').animate({ 
     scrollTop: scrtop, 
     scrollLeft: scrleft 
    }, 400); 

    var top = $(currentTd).position().top; 
    var left = $(currentTd).position().left; 
    var bottom = $(currentTd).position().top + $(currentTd).height() - $(currentTd).position().top; 

    var right = $(currentTd).position().left + $(currentTd).width() - $(currentTd).position().left; 


    $("<div id='frontLayer' class='front'></div>").insertAfter('.tableData'); 

// var frontDiv = document.getElementById('frontLayer'); 

    $('#frontLayer').css({ 
     'border': '3px solid #f00', 
     'position': 'absolute', 
     'z-index': 2, 
     'top': top + 'px', 
     'left': left + 'px', 
     'height': bottom + 'px', 
     'width': right + 'px' 
    }); 

    $('#frontLayer').resizable({ 
     handles: 'n,e,s,w', 
    }); 

}); 
    </script> 
</HEAD> 

<BODY> 
    <div id='insertfile'> 
<table border='1px' class='tableData'> 
    <tr><td>1</td> 
     <td>2</td> 
     <td>3</td> 
     <td>4</td> 
    </tr> 
     <tr><td>9</td> 
     <td>10</td> 
     <td>11</td> 
     <td>12</td> 
    </tr> 

     <tr><td>9</td> 
     <td>10</td> 
     <td>11</td> 
     <td>12</td> 
    </tr> 
     <tr><td>9</td> 
     <td>10</td> 
     <td>11</td> 
     <td>12</td> 
    </tr> 
     <tr><td>9</td> 
     <td>10</td> 
     <td>11</td> 
     <td>12</td> 
    </tr> 
     <tr><td>9</td> 
     <td>10</td> 
     <td>11</td> 
     <td>12</td> 
    </tr> 
     <tr><td>9</td> 
     <td>10</td> 
     <td>11</td> 
     <td>12</td> 
    </tr> 
     <tr><td>9</td> 
     <td>10</td> 
     <td>11</td> 
     <td>12</td> 
    </tr> 
     <tr><td>9</td> 
     <td>10</td> 
     <td>11</td> 
     <td>12</td> 
    </tr> 
     <tr><td>9</td> 
     <td>10</td> 
     <td>11</td> 
     <td>12</td> 
    </tr> 
     <tr><td>9</td> 
     <td>10</td> 
     <td>11</td> 
     <td>12</td> 
    </tr> 
     <tr><td>9</td> 
     <td>10</td> 
     <td>11</td> 
     <td>12</td> 
    </tr> 
     <tr><td>9</td> 
     <td>10</td> 
     <td>11</td> 
     <td>12</td> 
    </tr> 
     <tr><td>9</td> 
     <td>10</td> 
     <td>11</td> 
     <td>12</td> 
    </tr> 
     <tr><td>9</td> 
     <td>10</td> 
     <td>11</td> 
     <td>12</td> 
    </tr> 
     <tr><td>9</td> 
     <td>10</td> 
     <td>11</td> 
     <td>12</td> 
    </tr> 
     <tr><td>9</td> 
     <td>10</td> 
     <td>11</td> 
     <td>12</td> 
    </tr> 
     <tr><td>9</td> 
     <td>10</td> 
     <td>11</td> 
     <td>12</td> 
    </tr> 
     <tr><td>9</td> 
     <td>10</td> 
     <td>11</td> 
     <td>12</td> 
    </tr> 
     <tr><td>9</td> 
     <td>10</td> 
     <td>11</td> 
     <td>12</td> 
    </tr> 
     <tr><td>9</td> 
     <td>10</td> 
     <td id='currentId'>scroll to me</td> 
     <td>12</td> 
    </tr> 
     <tr><td>9</td> 
     <td>10</td> 
     <td>11</td> 
     <td>12</td> 
    </tr> 
    <tr><td>13</td> 
     <td>14</td> 
     <td>15</td> 
     <td>16</td> 
    </tr> 
    </table> 
</div> 
</BODY> 
</HTML>

請包括上述腳本並在mozilla上運行它。謝謝

來源

2011-10-31 kavita

我建議你爲此創建一個小提琴 –

會嘗試，但它需要一段時間才能從大文件中隔離調整大小的代碼 – kavita

我已經發布了代碼。歡迎任何建議。 – kavita

找到一種解決方法，但看起來並不高雅。我添加了resize處理程序代碼來檢查所有可能的調整大小，例如如果頂部已被修改，是否僅修改了高度，是否修改了左側等等。對於條件我將外部div的scrolltop添加到值。這給了我大部分正確的結果（很少有必須完成）。但總的來說，這似乎是我寫了太多的代碼來使用已經開發的插件。所以總體來說，我似乎在自己做所有的調整大小，只有增值纔是div的流暢運動！還發現了一個拖動調整twinhelix上的純JavaScript代碼，它不受容器滾動的影響。請讓我知道這個解決方案似乎是不可避免的或不必要的！歡迎任何其他解決方案/建議。

來源

2011-11-03 04:34:03 kavita

使用滾動調整插件大小

回答

相關問題