jQuery根据像素调整的百分比宽度调整边距左

Question

我有一个浮动表，试图将其放置在可见屏幕的右侧，而不是单击从右侧开始动画的图标。

我的分辨率与其他人不同，因此无法按百分比设置左页边距，因此无法正常工作。 因此，我尝试通过某种程度的负偏移来调整图标宽度从侧面向左边距。

我尝试将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);
});

这是我的Div， 请注意，它是相对放置的，并且具有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>

Answer 1

最新更新：

我能够使它工作。 我将其放在发生问题的另一个div内的一个div中。 负偏移基于div的宽度/位置。 我上了几个div级别，以使其在整个页面上都处于一个位置，而不是将其限制在一个div上，我使用z-index将其浮动到上方，并能够以页边距偏移量放置它（因为它们位于页面的页边距，而不是div）。