0
私は、表示された画面の右側に配置することを試みている浮動テーブルを、右からアニメーション化するアイコンをクリックするよりも持っています。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>
もっと重要な質問を作成した場合は、よりよいサービスになります。最高のSOの質問は、他の人が役に立つかもしれないものです。 PHPを使わずにこれを作り直してみてください。そうすれば他の人がそれを試すことができます。そしてあなたがそれをしている間、テーブルやインラインスタイルなしでこれを書き直すことを学んでください。 ;） – jmargolisvt
それは意味があります、私は必要最小限の最小限のコードを減らすことを試みました。もう少し整理して質問を分けて、私が見ている個々の問題に焦点を絞ったり、多分言い直したりします。私はフィードバックに感謝します！ –