見出しや画像を順繰りに見ていける 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();
})(); 
This entry was posted in つくる. Bookmark the permalink. Both comments and trackbacks are currently closed.

Page optimized by WP Minify WordPress Plugin