7cc@はてなブログ

JavaScriptとかとか

scrollTopMaxを取得する JavaScript

element.scrollTopMaxは現在Firefoxだけにあるプロパティで、要素の最大スクロール可能量を返す。読み取り専用。window.scrollMaxYのelement版。 これは他のブラウザなら element.scrollHeight - element.clientHeight で求められると思っていたが違った。 …

clearInterval(timer) のtimerは数字

var timer = setInterval(fn, 100)のtimerは何なのかと思ったら数字だった。この数字はsetInterval/setTimeoutが実行されるとインクリメントされ、スコープに関わらずwindowで共通。 以下のコードで確認できる。 (function(){ var timer = setTimeout(functi…

Firefox 開発者ツールバーのJavaScript整形機能

Firefoxには標準でjs-beautifyと同じ整形機能がついている。 F2で開発者ツールバーを開き、「jsb」と入力すればあとは案内に従うだけ。 特徴として、オンライン上のファイルでも、ローカルファイルでもURL/パスを指定すればで整形できることがある。 使い方 …

配列のすべてにアクセスする記述いろいろ JavaScript

document.getElementsByTagNameとか配列(風)のもの全てになにかしたい時にi

setTimeout(fn, 1000 / 60) の 1000/60 は16として処理される

requestAnimationFrameの代わりに書かれていることがありますが、単純に16と書いたら良いと思います。 JavaScriptでぴったりの時間で処理はできないのでこだわるポイントではありませんが(';') ちなみにscrollTo(0, 1.9)だと小数点切り下げでpageYOffsetは1…

スクロール位置が取れない htmlやbodyにoverflowを指定するときは注意

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

getElement, querySelectorがないときの戻り値

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

ページの表示に関するイベント : JavaScript

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

ブラウザの戻ると進むを無理やり判別する

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

hashの追加について location.hash history.pushState

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

JavaScript イージング easing

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

addEventの面白い書き方 element.addEventの順で書く

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

互換モードに対応したスクロール位置取得 pageYOffset, pageXOffsetが使えないとき

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

IE8ではwindowにkeypressやonclickが設定できない JS

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

はてなブログの記事にスタイルシート(スタイル要素)を追加する

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

はてなブログのシンタックスハイライト

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