グリッドレイアウトブックマークレットと一緒に使うと便利かもしれないブックマークレット作りました。

はてブで人気になっていたグリッドレイアウトブックマークレットを見て思いついたので作って見ました。

スクリーンショット

縦横のガイドラインを表示します。
Firefox用のは座標も表示します。IEは文字数制限(512文字)に引っかかるので割愛しました。

Firefox用

javascript:(function(){function S(e){e=b.appendChild(d.createElement("div"));with(e.style){margin=0;position="absolute";top=left=0;border="0px dotted red";}return e}var d=document,b=d.body,v=S(),h=S(),c=b.appendChild(d.createElement("span"));with(v.style){borderLeftWidth=1;height=b.scrollHeight}with(h.style){borderTopWidth=1;width=b.scrollWidth}c.style.position="absolute";b.addEventListener("mousemove",function(e){with(c.style){v.style.left=e.pageX+1;left=e.pageX+20;h.style.top=top=e.pageY+1;c.innerHTML=left+","+top}},true)})()

IE用

javascript:(function(){function S(e){e=b.appendChild(d.createElement("div"));with(e.style){margin=0;position="absolute";top=left=0;border="0px dotted blue";}return e}var d=document,b=d.body,v=S(),h=S();with(v.style){borderLeftWidth=1;height=b.scrollHeight}with(h.style){borderTopWidth=1;width=b.scrollWidth}b.attachEvent("onmousemove",function(){v.style.left=b.scrollLeft+event.clientX+1;h.style.top=b.scrollTop+event.clientY+1;})})()

えーと

ただの思い付きですので、使い道とかほぼないと思います。
これでもIEの512文字に収めるのは結構しんどいです。"+px"とか省くのが文字数減らすのに地味に有効だったり。外部スクリプトにしちゃえば関係ないんですけね。

追記

IE用がこのページとかでbody直下の要素以外でちゃんと動かないですね*1。
Firefox等の event.pageX は IE の場合、document.body.scrollLeft + event.x じゃなくて、 document.body.scrollLeft + event.clinetX でした。修正。

更に追記(3/10)

IEにもピクセル数表示をつけてみた。ぎりぎり510文字。

javascript:(function(){function S(e){e=b.appendChild(d.createElement("div"));with(e.style){margin=0;position="absolute";top=left=0;border="0px dotted blue";textAlign="left";}return e}var d=document,b=d.body,v=S(),h=S();with(v.style){borderLeftWidth=1;height="100%"}with(h.style){borderTopWidth=1;width="100%"}b.attachEvent("onmousemove",function(){v.style.top=b.scrollTop;h.style.left=b.scrollLeft;v.innerHTML=v.style.left=b.scrollLeft+event.clientX+1;h.innerHTML=h.style.top=b.scrollTop+event.clientY+1;})})()

オマケ

はてダ内ブックマークレット有効化Greasemonkey - sawatの日記

*1:Firefox用もページによってはだめですが