html, bodyはページサイズ・ウィンドウサイズを決定する要素です。 これらにoverflow, height:100%などサイズに関わるスタイルを指定するとJavaScriptによる位置やサイズ取得に支障が出ることがあります。よほどの理由がない限りしてはいけません。 スタイル…

HTMLCollection, NodeListは該当する要素がなくても常に戻り値があるので注意がいる null (ID) document.getElementById("hoge") document.querySelector("#hoge") HTMLCollection (querySelectorAll以外の複数) document.links, forms, etc document.getEle…

ページを開いたとき document readystatechange (interractive) document DOMContentLoaded ここで構築完了 document readystatechange (complete) window load window pageshow ページを閉じたとき window beforeunload これ以降は閉じた後 window pagehide…

かなり無理やり pushStateが使えない環境での話 スムーズスクロールの戻る/進むを正常化するだけなら スムーズスクロールについて無駄に考えてみたメモ のTest4, Test5を参照してください。ここに書いてある方法は無理やりです。

popstateも起きるので追加しないと・・・ location.hashでハッシュを付与したとき onhashchange, onscroll片方のみ起きる、両方起きる、両方起きないの４パターン 現在のハッシュと代入するハッシュが 異なる … ハッシュが変わり(onhashchange)、履歴が追加…

スムーズスクロールにイージング処理をつけたかったので調べた。 ease outとかease inとか。 読み込むファイルが増えるのは面倒なのでライブラリは使用しない。位置の移動や戻す処理を入れるならライブラリを使ったほうがよさそうだけど。 コード // 1 イー…

なんだかいまいちに思えるので書き直した http://7cc.hatenadiary.jp/entry/addEvent2

かなり無駄があったので修正 2014/09/24 MDNに記載されているのは互換モードに対応していなかったので。 基本的に以下のようになるが、CSS次第で変わる。 詳しくは スクロール位置が取れない htmlやbodyにoverflowを指定するときは注意を参照 browser page-s…

keydownやclickはdocument以下のノード・要素に設定する。 追記： イベントのバブリングがわかる人向けの説明。 IE8まではイベントのバブリングがdocumentまでなので、windowに設定してもイベントがキャッチされません。 input.parentNode.parentNode...とpa…

そのまま記述すると削除されてしまうようだけど、 sectionを挟むと追加できます。ただしscoped属性は削除される(';') <section> <style> /* code */ </style> <p>なんとかかんとか </section>

概要 はてなでソースコードをシンタックスハイライトをするには、2つの方法がある。 はてなブログ独自のハイライトを利用する方法 (編集モードがはてな記法・Markdonwの時のみ利用可) SyntaxHighlighterなどスクリプトによる方法（他のブログと同じ方法） 編…