メニューボタン
  • Twitterボタン
  • Facebookボタン

タイトルアイコン 要素がウィンドウ領域に入ったかを検知

縦長のページではアニメーションが伴っているものがよくありますが、スクロールによって要素がウィンドウ内に入ったかを検知して処理を実行する、といったものをjQueryでプラグインを使用せず作成します。

レスポンシブデザインで組んでいて要素の座標がウィンドウ幅によって変わるって場合でも大丈夫です。

続きを読む続きを読む

タイトルアイコン モーダルウィンドウを開いた時に背景のスクロールを固定する2

以前の記事でも同じ趣旨の内容を書いたのですが、今回は別のやり方でモーダルウィンドウを表示したときの背景を固定します。

正確に言えば前回はモーダルウィンドウを含めたページ全体を固定するイメージでした。
この場合、スクロールバーが表示されるブラウザの場合スクロールバーが消えてしまうんですよね。

今回は固定というよりをスクロールさせない方法で、スクロールバーは消えません。ただし、より固定というイメージから遠いかもしれません。

続きを読む続きを読む

タイトルアイコン display: table-cell;

ちょっと悩んで使ったのですが…

リストを縦に並べて、中のテキストが改行したりしなかったりする場合。
一括で縦位置を中央に揃えたかった。
個々のリストの中に要素を要素をつくってそこにテキストを入れる。
親要素のリストにタイトルの display: table-cell;と vertical-align: middle; を指定。

ちょっと抵抗あったのは、あまり見ないからか使った事なかったからか。

1 / 41234

Twitter Twitter