skillport p highlighting

this is a nice snippet that can be used as a bookmarklet on skillport to highlight the next paragraph

by Gerald Gillespie

HTML

<body>
    <div id="sect-1.2" class="section">
        
<h2 class="first-section-title" id="annotationlabel-first"><img height="16" border="0" width="16" style="vertical-align: middle; display: none;" src="images/i_bigbookmarked.gif" alt="Location is bookmarked" title="Location is bookmarked" id="isquickbookmark"><span class="b24-annotation-target" ids="-1,annotationlabel-first,annotationlabel-first" id="b24-first-annotationtarget" targetid="annotationlabel-first" labelid="annotationlabel-first"><img class="b24-expando" src="images/tool_annotate_sm.gif" width="12" height="12" border="0" style="display:inline;" alt="Add a note here" title="Add a note here"></span>
<a name="53" id="53"></a><a id="sect-1.2" name="sect-1.2"></a><span class="section-titlelabel">1.2 </span>What makes <font class="b24-hit" onclick="nextHit('forward');">Scala</font> scalable?</h2>

        <p id="53-1" class="first-para"><span class="b24-annotation-target" ids="53,53-1,annotationlabel-first" labelid="annotationlabel-first"><img class="b24-expando" src="images/tool_annotate_sm.gif" width="12" height="12" border="0" style="display:inline;" alt="Add a note here" title="Add a note here"></span>Scalability is influenced by many factors, ranging from syntax details to component abstraction constructs. If we were forced to name just one aspect of <font class="b24-hit" onclick="nextHit('forward');">Scala</font> that helps scalability, though, we'd pick its combination of object-oriented and functional programming (well, we cheated, that's really two aspects, but they are intertwined).</p>
        <p class="para" id="53-2"><span class="b24-annotation-target" ids="53,53-2,annotationlabel-first" labelid="annotationlabel-first"><img class="b24-expando" src="images/tool_annotate_sm.gif" width="12" height="12" border="0" style="display:inline;" alt="Add a note here" title="Add a note here"></span><font class="b24-hit" onclick="nextHit('forward');">Scala</font> goes further than all other well-known...

CSS

p {
    background-color : rgb(255, 255, 255)
}

JavaScript

(function ($) {
    var highclass = 'high',
        makehigh = function () {
            console.log('makehigh');
            var $obj = $(this),
                high = {
                    "background-color": "rgb(255,255,0)"
                },
                low = $obj.css('background-color'),
                $p = $('.section').find('p'),
                idx = $p.index($obj);
            console.log($obj, low)
            $obj.data({
                low: low,
                idx: idx
            });
            $obj.css(high)
                .addClass(highclass);
            this.scrollIntoView();
            return $obj;
        };

    alert('scroll down with "n/N" and scroll up with "b/B"');
    $('body').on('keydown', function (e) {
        e.preventDefault();
        if ($.inArray(e.which, [32, 78, 66]) > -1) {
            var $p = $('.section').find('p'),
                $high = $('.' + highclass + ':eq(0)'),
                next = e.which == 66 ? -1 : 1;
            console.log($high, $('.' + highclass));
            if ($high.length > 0) {
                var idx = $high.data('idx'),
                    $next = $p.filter(':eq(' + (idx + next) + ')');
                // unhighlight current $high and get next $high
                $high.css('background-color', $high.data('low'));
                $high.removeClass(highclass);
                if ($next.length != 0) {
                    $next.each(makehigh);
                } else {
                    $('input[name="ctl00$ContentPlaceHolder1$BottomProgressControl$NextSection"]').click()
                }
            } else {
                var nextSel = next == -1 ? ':last' : ':first';
                $p.filter(nextSel).each(makehigh);
            }
        }
        return true;
    });
})(jQuery)