Question

i saw a stack question posted already:

[question]: < Text in div – automated scrolling with jQuery – jsFiddle inside >

My question adding to this is, is it possible to have the text in each paragraph or separated divs highlighted (boldness, background color, etc.) once they are in main view, whilst the p’s or div’s leaving/entering the slider box are faded?

So like the jsfiddle referenced, you have a div container with say 4,5,6,… div’s or p’s inside of it and one div or p is visible whilst the div or p above and below it, only half would be visible (faded), whilst the remaining overflow is hidden.

thanks.

Answer 1

If I understand you correctly, you’re looking for an effect like this:

http://jsfiddle.net/2RRWS/

My code assumes an html structure like:

<div id="scrollContainer">
   <p>Some text</p>
   <p>More text</p>
   ...
</div>

And some CSS to set the width/height of the containing div as appropriate. Also it assumes some classes for “dimmed” and “highlighted” paragraphs.

There’s probably a cleaner way to do this, but this is just what I cobbled together and it seems to work, so…

var $container = $("#scrollContainer"),
    $ps = $container.find("p"),
    containerHeight = $container.height(),
    contentHeight = 0,
    scrollTop = 0;

// figure out the height of the content
$ps.each(function() {
    contentHeight += $(this).outerHeight();
});

// add some blank space at the beginning and end of the content so that it can
// scroll in from the bottom
$("<div></div>").css("height", 400).appendTo($container).clone().prependTo($container);

setInterval(function() {
    if (paused)
        return;
    // if we've gone off the end start again
    if (scrollTop > contentHeight + containerHeight)
        scrollTop = 0;
    // scroll up slightly
    $container.scrollTop(scrollTop++);

    $ps.removeClass("highlighted")   // for each paragraph...
       .addClass("dimmed")           // dim it
       .each(function() {            // unless it is in view
           var $this = $(this),
               top = $this.position().top,
               height = $this.height();
           if (top > 0 && top + height < containerHeight)
                    $(this).addClass("highlighted").removeClass("dimmed");
    });
}, 20);

$container.hover(function() {
    paused = true;
}, function() {
    paused = false;
});

EDIT: Updated to implement “pause” feature as per comment. http://jsfiddle.net/2RRWS/8/