JQuery調整邊距 - 基於像素調整百分比寬度

我有一個浮動表，我試圖擺脫可見屏幕的右側，而不是當您點擊它從右側的動畫圖標時。JQuery調整邊距 - 基於像素調整百分比寬度

由於我的解決方案與其他人不同，我無法設置百分比餘量，因此無法正常工作。所以我想通過圖標的寬度來調整左側的邊距，並以某種負向偏移量進行調整。

我已經嘗試設置margin-left = 100％，然後' - = 56px'但這不起作用。

這裏就是我有JQuery的明智

//This does not work correctly so i have it set the margin-left inline at 88% that works just for me 
//$('#quick-notes-quick-menu-icon').css('margin-left', '100%'); 
//$('#quick-notes-quick-menu-icon').css('margin-left', '-=56px'); 


$('#quick-notes-quick-menu-icon').click(function(){ 
    if($('#quick-notes-quick-menu-toggle').is(":visible") == false) 
    { 
     $('#quick-notes-quick-menu-icon').fadeOut(200); 

     $('#quick-notes-quick-menu').animate({ 
      marginLeft: '60%' 
     }, 500); 

     $('#quick-notes-quick-menu-toggle').toggle('slow'); 
     $('#quick-notes-quick-menu-toggle-btn').toggle('slow'); 
    } 
}); 

$('#quick-notes-quick-menu-toggle-btn').click(function(){ 
    $('#quick-notes-quick-menu').animate({ 
      marginLeft: '100%' 
     }, 500); 

    $('#quick-notes-quick-menu-toggle').toggle('slow'); 
    $('#quick-notes-quick-menu-toggle-btn').toggle('slow'); 

    $('#quick-notes-quick-menu-icon').fadeIn(200); 
});

這是我的事業部請注意它是相對於定位並具有Z指數等漂浮它的頁面的其餘部分的頂部。

<div id='quick-notes-div'> 
      <img id='quick-notes-quick-menu-icon' src='../images/quick-notes-menu.png' style='position: fixed; z-index: 1000001;margin-left: 100%; margin-top: 20%;' /> 
// The margin is set inline here to work with my browser 
      <table id='quick-notes-quick-menu' style='position: fixed; z-index: 1000001; margin-left: 88%; background: rgba(112,168,210,0.6); height: 80%'> 
      <tr> 
       <td style='padding-left: 10px; display: none;' id='quick-notes-quick-menu-toggle'> 
       <button style='display: none;' id='quick-notes-quick-menu-toggle-btn' class='ui-state-focus'>x</button>"; 
// This just populates the rows n whatnot with info from a sql db 
       <? include("quick-notes-quick-menu.inc"); ?> 
       </td> 
      </tr> 
      </table> 
      </div>

來源

2017-01-27 Cody Savage

Imho，如果你創造了一個更有針對性的問題，你會得到更好的服務。最好的SO問題是其他人可能也會覺得有用的問題。嘗試在不使用PHP的情況下重新創建它，並將其放在小提琴中，以便其他人可以修補它。在學習時，學會不用表格和內聯樣式來重寫它。 ;） – jmargolisvt

這很有道理，我試圖將代碼降低到所需的最低限度。我會把它修剪一些，並將問題分開，以便更專注於我所看到的單個問題/可能是重新編寫的單詞。我很欣賞反饋！ –

晚上下的更新：

我能得到這個工作。我把它放在另一個div裏面，這是發生問題的地方。 Negative Offset是基於div的寬度/位置。我上升了幾個div級別來給它在整個頁面上的位置，而不是將其限制爲一個div，我使用z-index將它浮動到上面，並且能夠將它放在邊緣偏移處（因爲它們在頁面的利潤率而不是div）。

來源

2017-02-08 16:56:03

JQuery調整邊距 - 基於像素調整百分比寬度

回答

相關問題