見出しや画像を順繰りに見ていける Bookmarklet
高速にスクロールすることができない iPhone 用に作ったのだが、ブックマークレットを実行するのが面倒で使えないなぁ、とお蔵入りになっていた。
Make Page Navigation
ソースはこんな感じ。
(function(){
var M = {
getElements: function() {
var results = [];
var elements = ['h1','h2', 'h3'];
for (var j = 0; j < elements.length; j++) {
var h = document.getElementsByTagName(elements[j]);
var len = h.length;
for (var i = 0; i < len; i++) {
h[i].id = (h[i].id && h[i].id != '' ? h[i].id : 'makenavi-' + elements[j] + '-' + i);
results.push(h[i].id);
}
}
var img = document.getElementsByTagName('img');
var imgLen = img.length;
for (var i = 0; i < imgLen; i++) {
if (img[i].width < 100 || img[i].height < 100) {
continue;
}
img[i].id = (img[i].id && img[i].id != '' ? img[i].id : 'makenavi-img-' + i);
results.push(img[i].id);
}
return results;
},
show: function(results) {
var len = results.length;
if (len == 0) {
alert('No headings and images.');
return;
}
var old = document.getElementById('makenavi-box');
if (old) {
return;
}
var element = document.createElement("div");
var str = "<div id='makenavi-box' style='filter: alpha(opacity=25); opacity:0.25; z-index: 999; position: absolute; top: " + (window.pageYOffset+30) + "px; left: " + (window.innerWidth-150) + "px; width: 100px; background-color: white; text-align: center; border: 15px solid #393;'>";
var strResults = '';
for (var i = 0; i < len; i++) {
strResults += '"' + results[i] + '",';
}
strResults += '"' + results[0] + '"';
var code = '(function(){var r=[' + strResults + '];var e=document.getElementById("makenavi-next");var n=r[0],c=location.hash.substr(location.hash.indexOf("#")+1);for(i=0;i<r.length;i++){if(c==r[i]){n=r[i+1];break;}}e.href="#"+n;var o=document.getElementById(n);var t=0;while(o){t+=o.offsetTop;o=o.offsetParent;}document.getElementById("makenavi-box").style.top=t+"px";'
+ '})();';
str += "<a style='color:black;font-size:40px;text-decoration:none;' id='makenavi-next' href='#" + results[0] + "' onClick='" + code + "'>Next</a>";
str += "</div>";
element.innerHTML = str;
document.body.insertBefore(element, document.body.firstChild);
window.addEventListener('scroll', function(){
document.getElementById('makenavi-box').style.top=(window.pageYOffset+30)+'px';
},false);
window.addEventListener('resize', function(){
document.getElementById('makenavi-box').style.left=(window.innerWidth-150)+'px';
},false);
},
run: function() {
this.show(this.getElements());
},
};
M.run();
})();