HTMLページの本文に直接追加される付箋があります。ホバーすると付箋が少し大きくなる CSS 部分もあります。
また、付箋は CSS を介して回転することになっています。さらに、ウィンドウがアンロードされる前に付箋の位置を保存し、付箋を取得して、ウィンドウがアンロードされる前と同じ位置に配置することになっているJavaScriptコードがあります。ただし、付箋を回転させると問題が発生するため、付箋を取得して本文に戻すと、ページを更新する前の位置からわずかに位置がずれます (付箋が回転されていない場合は発生しません)。
各付箋を回転しない独自の stickyContainer div に含めたことを修正するために、unload イベントの後に stickycontainer の正しい位置を取得できるようにしました。
html:
<div class="stickyContainer" style="left:20px;top:70px">
<div class="stickyNote">
<h1>Drag Me</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum..</p>
</div><!--stickynote-->
</div> <!--stickycontainer-->
CSS:
.stickyNote {
margin: auto;
width:auto;
height:auto;
background: yellow; /* Fallback */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EBEB00), to(#C5C500));
background: -moz-linear-gradient(100% 100% 90deg, #C5C500, #EBEB00);
padding: 20px 20px 20px 20px;
/*position:absolute;*/
"zIndex": 3000;
rotating the post it by 6 degrees to the left
-webkit-transform:rotate(-6deg);
-o-transform:rotate(-6deg);
-moz-transform:rotate(-6deg);
-webkit-box-shadow: 0px 10px 30px #000;
-moz-box-shadow: 0px 10px 30px #000;
}
.stickyContainer {
background-color: green;
background: green;
padding: 10px;
}
.delete {
cursor:pointer;
font-size:120%;
}
.stickyNote p {
font-family: "Reenie Beanie", Helvetica, sans-serif;
font-size: 30px;
line-height: 35px;
margin: 10px 0 10px 0;
width: 280px;
}
/* creating the effect when the cursor is over that item.*/
.stickyNote:hover,.stickyNote:focus{
-moz-box-shadow:10px 10px 7px rgba(0,0,0,.7);
-webkit-box-shadow: 10px 10px 7px rgba(0,0,0,.7);
box-shadow:10px 10px 7px rgba(0,0,0,.7);
-webkit-transform: scale(1.25);
-moz-transform: scale(1.25);
-o-transform: scale(1.25);
position:absolute;
z-index:5;
}
.toolbar {
text-align:right;
font-weight:bold;
}
ただし、付箋は奇妙な動作をします。
jsfiddle : 最初の jsfiddle でわかるように、(黄色の) 付箋は、ホバーされていない場合は (緑の) コンテナーのサイズに合わせて水平方向に拡張され、ホバーされている場合は、付箋はコンテナーに含まれなくなります。
jsfiddle2 : 付箋の周りに stickyContainer div がない 2 番目の jsfiddle では、ホバー関数が正しく実行されます。何らかの理由で、回転が js fiddle で機能しません (ただし、私のプロジェクトでは機能します)。上記のように、アンロードする前に付箋の位置を取得すると、わずかに異なる結果が得られます。
質問: 更新後にスティッキー コンテナの正しい位置を取得し、スティッキー ノート div を含めるために必要な分だけスティッキー コンテナを拡張するには、何を変更する必要がありますか。そして、スティッキーコンテナ内で付箋の回転を機能させるにはどうすればよいですか?