Oct 14 2006

Scroll Up Headline Reader

read 95 comments
by Karl Swedberg

A couple weeks ago someone on the jQuery discussion list asked if someone could reproduce a rotating headline box in which the headlines, in succession, scroll up into the box, pause, and then scroll up out of the box. Since I already had some code for rotating images on a page, I decided to recycle it and take the challenge.

Here is the finished product. (Please note that if you are looking at this in a feed reader, you won't be able to see the effect. )

Get Started with the HTML and CSS

The first thing I did was throw a simple page together using a single container DIV with an id of "scrollup" and four or five DIVs with a class of "headline" to hold each headline.

PLAIN TEXT
HTML:
  1. <div id="scrollup">
  2.   <div class="headline"> ... </div>  
  3.   <div class="headline"> ... </div>  
  4.   <div class="headline"> ... </div>  
  5.   <div class="headline"> ... </div>    
  6. </div>

I then added this simple CSS to the scrollup ID and the headline class:

PLAIN TEXT
CSS:
  1. #scrollup {
  2.   position: relative;
  3.   overflow: hidden;
  4.   border: 1px solid #000;
  5.   height: 200px;
  6.   width: 200px
  7. }
  8. .headline {
  9.   position: absolute;
  10.   top: 210px;
  11.   left: 5px;
  12.   height: 195px;
  13.   width:190px;
  14. }

That made all of the headlines absolutely positioned in relation to their containing box, which got a height and width of 200px. Notice that the top of all of those headlines is 210px, and the overflow property of the container is set to hidden, so none of the headlines would be showing — until they were ready.

Set Up the jQuery

At the top of the jQuery file I defined variables for the total number of headlines, the interval between headlines, the current headline, and the "old" headline:

PLAIN TEXT
JavaScript:
  1. var headline_count;
  2. var headline_interval;
  3. var current_headline = 0;
  4. var old_headline = 0;

Then I set the headline_count variable to be the number of div elements that have a class of "headline." But that number can't be computed until the DOM is loaded, so I wrapped the variable in jQuery's $(document).ready() function. I also wanted to set the first headline's "top" property so that it would be immediately visible, while the others would remain hidden — at least initially — below the box (as set in the CSS):

PLAIN TEXT
JavaScript:
  1. $(document).ready(function(){
  2.   headline_count = $("div.headline").size();
  3.   $("div.headline:eq(" + current_headline + ")").css(top, '5px');
  4. });

The code examples for this entry used to include the .top() method, which, as of jQuery 1.1, no longer works. You will need to use .css('top', 'Npx') instead.

Before we move on, I'd like to point out a few things about the above code:

  1. jQuery has a .size() function that is similar to JavaScript's length property in that it returns the number of jQuery objects defined by the $() that comes before it.
  2. The second line is only fired once, when the DOM is first loaded. Instead of setting every headline's top to 5px, it uses a special jQuery DOM selector, :eq(), to set only the current headline's top. Typically, :eq() would take a number, like so: $("div.headline:eq(0)").
  3. I chose to pass in the "current_headline" variable instead of a number to allow for a little flexibility. If I later decide I want to start with the fourth headline, for example, I'd just have to change var current_headline = 0 up at the top of the script to var current_headline = 3. In order to get the variable in there, though, I had to concatenate it with the rest of the selector before and after it.

Everybody Rotate!

Now that everything was in place, I could write my headline_rotate() function. I first needed to increment each headline by one until I reached the last one and then start over, creating a loop. To do so, I used what my friend Jonathan Chaffer told me is called "clock arithmetic." Here is what that looks like (at least, the way I did it):

PLAIN TEXT
JavaScript:
  1. function headline_rotate() {
  2.   current_headline = (old_headline + 1) % headline_count;
  3. }

Line 2 sets a new value for current_headline by first adding 1 to old_headline and then using the modulus operator (%) to get the remainder of old_headline + 1 (our new headline) divided by headline_count (total number of headlines). Jonathan explained it this way: "the remainder will always equal old_headline + 1 until it reaches headline_count, at which point the remainder becomes zero." The only thing better than having a genius working next to me is having a genius who is great at explaining things to mere mortals like me. :)

Add the Animation

Next I added the animation into the headline_rotate() function — moving the old headline up and out of sight while moving the next headline (now called current_headline) into view.

The old headline movement actually has two parts: (a) scrolling up and out of sight and (b) moving instantly back down underneath the box so that it's ready to slide up into the box again the next time. This is where jQuery's "callbacks" come in very handy. I could queue the second effect by putting it in the callback of the first. Compare just the first effect...

PLAIN TEXT
JavaScript:
  1. $("div.headline:eq(" + old_headline + ")").animate({top: -205},"slow")

...to the first, plus the second in the callback...

PLAIN TEXT
JavaScript:
  1. $("div.headline:eq(" + old_headline + ")").animate({top: -205},"slow", function() {
  2.     $(this).css('top', '210px');
  3. });

By the way, the -205 in .animate({top: -205}) means that the top of the headline moves to 205 pixels above the top of its containing element (because the containing element had its position set to relative) so that we're sure the entire headline clears the box.

For the current headline, I simply moved its top up to 5 pixels below the top of the scrollup box so that it would be visible. And after that, I made old_headline equal current_headline:

PLAIN TEXT
JavaScript:
  1. $("div.headline:eq(" + current_headline + ")").animate({top: 5},"slow");  
  2.   old_headline = current_headline;
  3. }

To get the function to run when the page loaded, I simply dropped headline_rotate() inside my $(document).ready(). Unfortunately, that only made the animation fire once. I wanted it to repeat.

And Repeat

Remember that headline_interval variable I included way at the top? Here is how I used it:

Still inside $(document).ready(), I replaced headline_rotate() with headline_interval = setInterval(headline_rotate,5000);. That made JavaScript's setInterval() trigger my headline_rotate() function once every 5000 milliseconds (5 seconds).

Bonus – Pause on Hover!

I was fairly satisfied with the way the headline rotator worked, but I realized that for it to be really useful I'd want to make it pause when the mouse would hover over the box and start up again as soon as the mouse went back out. I'm not sure that I did it the best way, but it seems to have worked fairly well for me. I attached jQuery's hover() method to the "scrollup" div. The hover() takes two arguments, the first for mouseover and the second for mouseout. In the mouseover part, I stop the "interval," and in the mouseout part, I started it back up and called headline_rotate() again so the next headline would show up immediately:

PLAIN TEXT
JavaScript:
  1. $('#scrollup').hover(function() {
  2.   clearInterval(headline_interval);
  3. }, function() {
  4.   headline_interval = setInterval(headline_rotate,5000);
  5.   headline_rotate();
  6. });

That hover stuff also went inside $(document).ready(), and then I was done!

The Full Code

I set up a demo page with the full code and CSS embedded in the <head>, so if you want to take a look and copy it for your own use, go ahead. Or, take a look at the full jQuery code below:

PLAIN TEXT
JavaScript:
  1. var headline_count;
  2. var headline_interval;
  3. var old_headline = 0;
  4. var current_headline = 0;
  5. $(document).ready(function(){
  6.   headline_count = $("div.headline").size();
  7.   $("div.headline:eq("+current_headline+")").css('top', '5px');
  8.  
  9.   headline_interval = setInterval(headline_rotate,5000);
  10.   $('#scrollup').hover(function() {
  11.     clearInterval(headline_interval);
  12.   }, function() {
  13.     headline_interval = setInterval(headline_rotate,5000);
  14.     headline_rotate();
  15.   });
  16. });
  17. function headline_rotate() {
  18.   current_headline = (old_headline + 1) % headline_count;
  19.   $("div.headline:eq(" + old_headline + ")")
  20.     .animate({top: -205},"slow", function() {
  21.       $(this).css('top', '210px');
  22.     });
  23.   $("div.headline:eq(" + current_headline + ")")
  24.     .animate({top: 5},"slow");  
  25.   old_headline = current_headline;
  26. }

If you have any questions about the code or suggestions for improvement, please leave a comment.

UPDATE

Jonathan Chaffer and I wrote a much-improved version of this headline reader and discuss it in detail in the Learning jQuery book.You can see a demo of it on the companion site. Also, Mike Alsup has written the brilliant Cycle plugin that does the scroll-up effect and much, much more. Check it out!

comment feed

95 comments

  1. Erin
    October 16, 2006 at 4:00 pm

    I really like your tutorials! Wish there were more of them!

    One observation: It seems inefficient to continuously create new jQuery objects:$("div.headline:eq(" + current_headline + ")") Can't you just create one and then somehow access the different headlines within it?

    Here's a suggestion for future tutorials: I've been trying to understand the code behind some of the more popular plugins (at jquery.com) such as Accordion http://fmarcia.info/jquery/accordion.html and sometimes they are written at such a high level that there are parts I just don't understand. If you could take a pluggin and explain how it works (line by line) it would be great!

    Reply
  2. Karl
    October 16, 2006 at 5:15 pm

    Hi Erin, thanks for the comment and the suggestions! You may be right about the inefficiency of creating the jQuery objects; I'll have to look into that.

    I wish there were more of the tutorials, as well. :) And there will be, as time goes on. The blog is still in its infancy, so stay tuned. Good idea about looking "behind the scenes" of popular plugns. I'll try to add that to the list of upcoming entries.

    Reply
  3. Erin
    October 17, 2006 at 11:02 am

    How about this:

    var headline_count;
var headline_interval;
var old_headline = 0;
var current_headline=0;
var headlines = new Array(); // an array of jQuery objects

$(document).ready(function(){
  headline_count = $("div.headline").size();

  for (var i = 0; i < headline_count; i++) {
    headlines[i] = $("div.headline:eq("+i+")");
  }

  headlines[current_headline].top('5px');

  headline_interval = setInterval(headline_rotate,5000);
  $('#scrollup').hover(function() {
    clearInterval(headline_interval);
  }, function() {
    headline_interval = setInterval(headline_rotate,5000);
    headline_rotate();
  });
});

function headline_rotate() {
  current_headline = (old_headline + 1) % headline_count;
  headlines[old_headline].animate({top: -205},"slow", function() {
    $(this).top('210px');
    });
  headlines[current_headline].show().animate({top: 5},"slow");
  old_headline = current_headline;
}
    Reply
  4. Karl
    October 17, 2006 at 3:10 pm

    Erin, that looks good to me. Thanks again!

    By the way, I dressed up your comment's code a bit and deleted the first two failed attempts for you.

    Reply
  5. Erin
    October 17, 2006 at 6:05 pm

    Thanks Karl. The code was truncating at the "less than" in the for loop.

    Reply
  6. ShevKen
    January 24, 2007 at 5:53 am

    Can you whip out a version which allows display of multiple headlines instead of 1-by-1.

    such as

    http://javascript.internet.com/text-effects/ajscroller.html

    Reply
  7. Karl
    January 24, 2007 at 9:41 am

    Sure can, Kevin. It might take me a while to actually get to it, but look for a new entry sometime next week.

    Reply
  8. ShevKen
    January 25, 2007 at 12:22 am

    Thanks Karl. Looking forward to it!

    The ability to manipulate headlines directly in html instead of in the javscript really attracts. Gd job.

    Reply
  9. mikek
    February 9, 2007 at 11:53 am

    hi karl, your single line scroller is pretty neat (i've integrated it with a project in cakephp). i'd also be interested in a means to scroll multiple headlines. will look out for an update soon :D

    Reply
  10. Karl
    February 9, 2007 at 12:01 pm

    Thanks, Mike. Glad you like it. The multi-headline scroller is a bit trickier than I had thought at first, because of the headlines' varying heights. I will definitely post an entry on it, but it might be a while before I can get to it and give it some sustained thought.

    Reply
  11. Glen Lipka
    February 23, 2007 at 5:10 pm

    It was originally meant to be used on http://www.intuit.com. Unfortunately, I think they removed it after I left. I kept a copy here. Check the bottom right box.

    It is a great widget. Well done!

    Reply
  12. bergdog
    March 21, 2007 at 5:26 am

    Oh, it's wonderful! I'm a JavaScript beginner and also a jQuery beginner, but I could really understand what you say, even though my mother language is Chinese, thank U!!!

    Reply
  13. victor
    May 6, 2007 at 2:01 pm

    Hi Karl,

    Seems that your demo page example (http://test.learningjquery.com/scrollup.htm) doesn't work neither in Firefox nor in Opera (only in IE). At the same time an example at the beginning of this article works fine. Any explanation?

    Reply
  14. Karl
    May 6, 2007 at 5:58 pm

    Hi Victor, thanks for notifying me of the problem with the demo page. I wrote the script last fall before version 1.1 and its API change. Before 1.1, we could use a shorthand method such as .top() in place of .css('top'), but those shorthand methods have been removed.

    I updated the demo script on the test site, so it should be working just fine now. Thanks again for catching the problem.

    Reply
  15. tomasz
    May 14, 2007 at 10:35 am

    Nice script !
    But it would be nice with a 'previous' and a 'next' button to skip the news :)

    Reply
  16. Randy
    June 6, 2007 at 1:51 pm

    We did a website based off this script except that our news has a counter:

    1 of 10

    a "pause" and "next" buttons. You can see it in action here:

    http://www.crestwoodbaptist.org/

    source code available from the site using "view source" :)

    Reply
  17. Markus
    June 6, 2007 at 4:17 pm

    Hi,

    i look for a script like this, thx.
    But one question:

    When a User has JS off in the Browser nothing will display. Is there e way with JS off that all News will display with a vertical scrollbar?

    Sry for my poor english...

    greetings Markus

    Reply
  18. Karl
    June 7, 2007 at 12:26 am

    Markus, I'm really glad you asked that question. This script should definitely degrade better than it does. Here is one way you can make it look good without JavaScript:

    1. make these changes (in bold) to the stylesheet

    #scrollup {
  border:1px solid #000;
  height:200px;
  overflow:auto;
  position:relative;
  width:200px;
}
.headline {
  height: auto;
  left: 5px;
  position: relative;
  top: 5px;
}

    2. Then, to get it looking sharp again with JavaScript, replace this line:

    $("div.headline:eq("+current_headline+")").css('top','5px');

    with this:

    $('#scrollup').css({position: 'absolute', overflow: 'hidden'})
$('div.headline')
.css({position: 'absolute', height: '195px'})
  .not(current_headline)
  .css('top','210px');

    Let me know how that works for you.

    Reply
  19. Karl
    June 7, 2007 at 12:28 am

    Randy, Nice work on your variation of the script. I like your additions!

    Reply
  20. Markus
    June 7, 2007 at 12:45 pm

    Hi Karl,

    thx for help. I will try it later.

    Now i found a littel "Bug". Using IE7 and move the mouse over the scroller he didn´t stop. When moved the mouse in the scroller to any direction it looks crazy... ;)

    mfg Markus

    Reply
  21. Alex
    June 14, 2007 at 1:16 pm

    Is there a version of this that would use an unordered list instead of a stack of nested DIVs?

    Reply
  22. Karl
    June 14, 2007 at 1:37 pm

    Hi Alex. I haven't written a version that would use an unordered list instead, but I don't think it would be hard to modify this one. If you used <ul id="scrollup"> and <li class="headline">, then I think it would mostly be a matter of modifying the CSS a bit and changing references to "div.headline" in the code to "li.headline"

    If you'd like to give that a whirl, feel free to contact me if you get stuck along the way.

    Reply
  23. Emre
    July 28, 2007 at 5:56 pm

    Hi Karl, thanks alot for your tutorial...
    i ve modified your code a bit, i ve changed divs to unordered list and vertical scrolling to horizontal scrolling.
    here is the modified version:
    http://www.emrecamdere.com/news_scroller_jquery.html
    i hope it ll be useful for someone

    Reply
  24. Nixdama
    July 30, 2007 at 4:36 am

    it not works on IE7

    Reply
  25. Zoo
    September 5, 2007 at 9:18 pm

    I am looking for a code that scrolls up, pauses, then scrolls news to the left or right, then with the next news story it scrolls up, pauses, then scrolls news to the left or right again. Can the two codes mentioned be combined in someway to accomplish this action? Thanks for the tutorial!

    Reply
  26. Laurent
    September 13, 2007 at 6:34 am

    Hi!
    First of all, thanks for this very useful script.
    I've got a problem with Flash. Have you ever tried to include an swf object in one of the headlines? While it works in IE7, the flash animation gets stuck in the bottom of #scrollup in Firefox and doesn't scroll. I imagine that your script is not to blame but the way Firefox interpret the object tag but if by any chance, you've encountered the problem...
    Once again, thanks for your work and have a nice day ;-)

    Reply
  27. Karl
    September 13, 2007 at 10:23 am

    Hi Laurent,
    I'm sorry, but I have very little experience with Flash. You might have better luck with Mike Alsup's Cycle plugin. It's very solid with tons of features.

    Reply
  28. Mike
    September 21, 2007 at 4:38 pm

    thank you for your straightforward and functional tutorial

    Reply
  29. Bhaarat
    October 11, 2007 at 5:52 pm

    Hi Karl,

    Thanks a LOT for this. I never knew about jQuery! but this really is like magic!! Cant wait to go home and get my hands dirty with this. Also, do you know if the dzone scroll functionality where more headlines are loaded as the user is about to reach the end of the page is also done in jQuery?

    If you have some code that would kind of show how to achieve that it would be wonderfull!!

    Thanks for this!!

    Reply
  30. tracert
    November 5, 2007 at 10:25 am

    Hi Karl,

    Thank you for the script, it's very nice. But I have a problem.
    I use the toggle() function to display and hide the headline div. When I click on the link (which hides the headline div), and click again (displays the headline div again), it starts rolling again, but it looks like this: picture

    Reply
  31. miguelito
    November 20, 2007 at 2:13 pm

    Hi all. i´m Miguelito ( newbe in jQuery from Spain)

    I have to do a continuos scroll function to a div with html structure like this:
    div-class listaScroll) ul li li li li /ul /div
    each li has html inside ( news to scroll)

    it works, but surelly you can hep me with some 'bugs'

    1.- Rest-of-the-page-links does not work if i do not 'stop' the timer properly

    2.- multiple divs in same page scrolling: scrolls at same time, stops in same time :(

    any ideas ?

    URL: my site (i´m modifiyng it)

    Thanks for your time!.

    ( I´m using jquey.timer.js for timers, but maybe innecesary, or maybe it´s the problem. I´m new with jquery timer events :) )

    CODE:


    jQuery(document).ready(function(){
    initScroll();
    jQuery(".listaScroll ul li a").hover( stopScroll, initScroll);

    function initScroll(){
    jQuery(".listaScroll").everyTime(3000, 'miTimer', scrollUp);
    }
    function scrollUp() {
    var elemParent=jQuery(this).find("ul:eq(0)").get();
    jQuery(elemParent).find("li:eq(0)").hide(2000, function(){
    jQuery(this).appendTo(elemParent).show(); //mode element to the end
    });
    }

    function stopScroll(){
    jQuery(".listaScroll").stopTime("miTimer");
    }

    jQuery("a").click( function(){ // ehem... it stops the scroll, so the links work again...
    stopScroll();
    return true;
    });

    });

    Reply
  32. Catalin Oltean
    December 9, 2007 at 2:47 pm

    How I can make script to work with an external scrollup div inserted in document with Ajax?

    Reply
  33. Catalin Oltean
    December 9, 2007 at 2:57 pm

    How I can make script to work with a scrollup div that contain an external html file inserted in document (div) with Ajax?

    Reply
  34. Damith
    January 21, 2008 at 7:11 am

    if we put dynamic content...how we handle height thing...

    mean how height should be auto fitted to each loading....because in my case that viewing area should be changed with it loaded no of items...so..how can we handle that kind of thing...pls tell me thanks

    Reply
  35. Jauhari
    February 11, 2008 at 3:23 am

    This is what's I looking for, I have a question.
    How to integrated this code with this effect

    http://www.malsup.com/jquery/cycle/begin.html

    Please Help me and thanks

    Reply
  36. Naperville
    April 24, 2008 at 9:18 am

    very good tut, it really help me, thanks!

    Reply
  37. Josh
    August 14, 2008 at 10:56 am

    i have used the headline scroller on a couple of pages with good success. However, on 2 of my pages, when the page is visited, all of the headlines show up at first and after the first interval they scroll correctly. you can see what i mean here at
    http://www.axessnetwork.com and;
    http://www.buckstoparchery.com

    also, on the buckstop archery site, i have a flash element in the scroller. When opened with Mozilla Firefox, the flash element shows up constantly just below the div area. Can anyone advise? Thanks.

    Reply
  38. Karl Swedberg
    August 14, 2008 at 11:43 am

    Hi Josh,
    on the axessnetwork site, you can probably fix the problem by changing this:

    $("div.headlines:eq("+current_headline+")").css('top','5px');

    to this:

    $("div.headlines:eq("+current_headline+")").css('top','5px')
    .siblings().css('top','210px');

    I don't see the problem with the Flash element in FF3 Mac, but one thing you might want to try is to set the Flash object's "wmode" property/attribute to "transparent."

    Reply
  39. Josh Henry
    August 17, 2008 at 7:44 pm

    Thanks for the help. That made all the difference. I am not sure why it loaded all the info into the DIV at once. I have used this script on numerous sites and those are the only 2 that i had problems with. The .siblings rule cleared it up. Thanks.

    Josh

    Reply
  40. Ryan
    October 8, 2008 at 10:39 am

    Hi all, I'm pretty new to JQuery, and I've found the final demo, the "go ahead" link to not work. All I get is an empty box. Same thing happens when I put the above code into my test page. Can anyone help? Thanks in advance.

    Ryan

    Reply
  41. Karl Swedberg
    October 8, 2008 at 11:07 am

    Hi Ryan,
    Sorry about that. Apparently, some change in the way Feedburner is set up broke my php script to pull the xml file into my domain before parsing. I'm using an old, static, xml file now for the purpose of the demonstration. Thanks for calling this to my attention.

    Reply
  42. nick
    October 13, 2008 at 2:48 pm

    Is there a way to keep the text from pausing at the top for a smooth continuous scroll? thanks!

    Reply
  43. Josh
    October 20, 2008 at 4:31 pm

    Hello all,
    once again, i cut and pasted the code into my site, however, the scroller will not scroll. I have looked the code over many times but cannot figure out the reason. Can anyone assist? Thanks.

    Josh Henry

    Reply
  44. Karl Swedberg
    October 20, 2008 at 5:02 pm

    Hi Josh,
    Do you have a link to the page where you included the code? Are you getting a JavaScript error? Definitely use the Firebug extensions for Firefox. That will help you debug.

    Reply
  45. Josh Henry
    October 24, 2008 at 6:07 pm

    sorry, i thought the website would post from the input field. It is http://www.mebaptist.org

    Reply
  46. Karl Swedberg
    October 24, 2008 at 10:33 pm

    Hi Josh,
    You only have one <div class="headline"> in there. Add a couple more and you'll be able to see them scroll up.

    Reply
  47. Jim Kempster
    October 29, 2008 at 12:37 pm

    Can anyone give me somd idea of what I've done wrong here?

    http://vm2-wb1.uts.columbia.edu/scrollup_afund.html

    I am very new to jQuery.

    Reply
  48. Karl Swedberg
    October 29, 2008 at 12:46 pm

    Hi Jim,
    If you use Firebug with Firefox (which you should), you'll see that there is a "$ is not defined" error. It looks like you're pointing to a non-existent jquery.js file. Make sure you grab a copy of jquery.js and put it in the correct location on your server.

    Reply
  49. Josh Henry
    November 10, 2008 at 6:11 pm

    I am using php to pull from my MySQL DB into the scrollup div in a headline field. I am using a repeat region to pull the multiple items from the DB. I have this working on another site, http://www.pointeoasis.com/upcoming.php. I cut and pasted the code into my new site, http://www.mebaptist.org but the scrolling action does not work. I have looked over the code line by line to see what is wrong but cannot figure it out. Can you assist? Thanks in advance.

    Reply
  50. Karl Swedberg
    November 10, 2008 at 7:44 pm

    Hi Josh,

    The script at http://www.mebaptist.org/ isn't wrapped in a $(document).ready() function. That's probably why it isn't working.

    Reply
  51. Josh
    November 11, 2008 at 12:22 pm

    How would i change that to wrap it in the $(document).ready() function?

    Reply
  52. Karl Swedberg
    November 11, 2008 at 12:37 pm

    Ah, forget about that. I see that you already have document ready in there. It has been a long time since I looked at this script. Sorry.

    The one thing you didn't copy/paste, though, is the CSS. When I inspected the headline elements in Firebug, it looked like the JavaScript was working fine—the "top" property was being animated successfully. So, just grab the CSS from post, and you should be fine. In particular, you'll need the containing element to be position: relative and overflow: hidden, and the headline elements to be position: absolute.

    Reply
  53. josh
    November 11, 2008 at 6:40 pm

    Thanks for the response. I just edited the css to reflect your recomendations. It still is not scrolling as it should. Can you assist a bit further? Thanks.

    Reply
  54. Karl Swedberg
    November 11, 2008 at 8:25 pm

    You have position: abosolute;. Change that to position: absolute;. Also, you're going to have to set a height on the headlines as well to match the height of the containing element. It's all at the top of this entry in a nicely formatted code block, but here it is again:

    #scrollup {
  position: relative;
  overflow: hidden;
  border: 1px solid #000;
  height: 200px;
  width: 200px
}
.headline {
  position: absolute;
  top: 210px;
  left: 5px;
  height: 195px;
  width: 190px;
}
    Reply
  55. Josh
    November 13, 2008 at 11:07 am

    Kurt,

    thanks for your patience. I have written in the necessary CSS code but still cannot get the information to scroll. Its almost as if it is not recognizing the area to be scrolled.

    Reply
  56. Karl Swedberg
    November 13, 2008 at 11:16 am

    Hi Josh,

    It looks like you still haven't fixed the position: abosolute; typo. When you change that to position: absolute; it should work.

    p.s. I'm Karl, not Kurt. :)

    Reply
  57. josh
    November 13, 2008 at 12:27 pm

    Thanks so much Karl,

    my apologies, today has been a crazy day especially with them wanting this site to be working. I greatly appreciate your help.

    Reply
  58. Kelly
    November 14, 2008 at 7:59 pm

    Hi Guys. First sorry for my bad english. I am spanish.
    I reach here googling and i find this tutorial very interesting, but i have a litle question, can i define one specific category to show in the headline reader, i mean i just wanna show some posts in the headline reader not all the posts of my blog. kisses ;)

    Reply
  59. J
    November 17, 2008 at 6:16 pm

    Awesome script. Was there ever a solution to scroll multiple lines at once?

    Reply
  60. oMat
    December 15, 2008 at 9:36 am

    Thanks for the efforts.

    One problem is, the scrolling acts crazy when hovered in IE, as mentioned by other users in this thread. Any solution for that yet?

    Thanks.

    Reply
  61. Pepe
    December 26, 2008 at 12:15 pm

    Thanks! Great article.

    Reply
  62. Nick
    January 3, 2009 at 7:04 pm

    Hi,

    Another great script. However, I've modified the CSS so it only shows one line for a headline to fit in the site that I've built. The problem is that when you rollover the headline or the div and roll off, it quickly jumps to the next headline, is there anything that can prevent that from happening? So it scrolls only on the automatic timer thingymigig thats set? I presume its to do with the .hover function on line 11 in your example above?

    Thanks

    :)

    Reply
  63. Stu
    January 6, 2009 at 4:40 pm

    Hi,

    Great scroller, is it possible to have two instances of this scroller working on the same page?, i have built a test page but when there are two or more scrollers on the same page they work 1 @ a time,

    thanks

    Reply
  64. ivan
    January 20, 2009 at 3:04 am

    Would it be possible to add 'next' and 'previous' links to scroll faster around news? - if so, would anyone be to give me a clue on how to do this? THanks!

    Reply
  65. Elizabeth Hammon
    January 28, 2009 at 4:23 pm

    Hello! Great code. I am new to coding, but I was able to get the basic version to work with the hover function masked out. I cannot get it to work when I change the current_headline variable. When I plug three instead of zero as in your example above, the correct headline appears first, but then it does not go away. All successive headlines show up over it until its number comes up and then it flies off the page. Is the current_headline variable hidden somewhere else to fly up and off the page?

    Here is the code I'm using:

    var headline_count;
    var headline_interval;
    var old_headline = 0;
    var current_headline = 3;

    $(document).ready(function(){
    headline_count = $("div.headline").size();
    $("div.headline:eq("+current_headline+")").css('top', '5px');
    headline_interval = setInterval(headline_rotate,5000);

    //$('#scrollup').hover(function() {
    // clearInterval(headline_interval);
    //}, function() {
    // headline_interval = setInterval(headline_rotate,5000);
    // headline_rotate();
    //});
    });

    function headline_rotate() {
    current_headline = (old_headline + 1) % headline_count;
    $("div.headline:eq(" + old_headline + ")")
    .animate({top: -205},1000, function() {
    $(this).css('top', '210px');
    });
    $("div.headline:eq(" + current_headline + ")")
    .animate({top: 5},1000);
    old_headline = current_headline;
    }

    (Sorry if this isn't formatted the way you wanted, I'm not sure what those directions mean.)

    Reply
  67. Carter Fort
    March 19, 2009 at 5:54 pm

    I made a WordPress plugin based on this. It's my first one ever, and I absolutely could not have done it without this demonstration. I give credit where credit is due, Karl! The plugin description has a link to this page.

    Thanks again, and you can get the plugin here.

    Reply
  68. Ken
    March 23, 2009 at 11:12 am

    Very nice tutorial. I was trying to get continuous horizontal scrolling that shows more than one story, until the first stories just disappear into the top of box. Is there a way to show more then one story at a time and have them all just scroll up?

    Reply
  69. Umar
    March 24, 2009 at 1:43 pm

    hello,

    this is really cool, can any one help what i need is that the text inside should be paused
    and when you hover with mouse it should animate....

    Reply
  70. josefk
    March 25, 2009 at 2:53 pm

    Thanks Karl - these tutorials are marvelous - and gentle too! It's really nice that you keep the articles fresh by adding more comments too.

    Re: Alex's question on using unordered lists (comment 21): the added structure would make the code more usable for screenreader users too...

    Reply
  71. Shazwi
    March 25, 2009 at 10:13 pm

    Gosh I need help !!! This is so frustrating, nothing even appears in my output lol.

    jQuery Experiments

    var headline_count;
    var headline_interval;
    var old_headline = 0;
    var current_headline = 0;

    $(document).ready(function(){
    headline_count = $("div.headline").size();
    $("div.headline:eq("+current_headline+")").css('top','5px');

    headline_interval = setInterval(headline_rotate,5000);
    $('#scrollup').hover(function(){
    clearInterval(headline_interval);
    }, function(){
    headline_interval = setInterval(headline_rotate,5000);
    headline_rotate();

    });

    });
    function headline_rotate()
    {
    current_headline = (old_headline + 1) % headline_count;
    $("div.headline:eq("+old_headline+")")
    .animate({top: -205},"slow",function(){
    $(this).css('top','210px');

    });
    $("div.headline:eq("+current_headline+")")
    .animate({top: 5px},"slow");
    old_headline = current_headline;
    }

    #scrollup
    {
    position: relative;
    overflow: hidden;
    border: 1px solid black;
    height: 200px;
    width: 200px;
    }
    .headline
    {
    position: absolute;
    top: 210px;
    left: 5px;
    height: 195px;
    width: 190px
    }

    WHAT THE FUCK

    Breaking News 1!
    Breaking News 2!
    Breaking News 3!
    Breaking News 4!

    Reply
  72. Shazwi
    March 27, 2009 at 8:08 am

    Theres a big problem with this code... When I hover a lot of times, the thing just scrolls sooo fast... Shouldnt there be a stop() thing after animate() to prevent this...

    Reply
  73. jasmit
    April 20, 2009 at 12:33 pm

    hi

    at present, everytime i hover on it, it stops and starts when i move cursor out. like if in 5 seconds i hover on it 5 times, then it will stop 5 times and onmouse out the scroll moves up 5 times.

    means it should not animate everytime i hover-in and hover-out in 5seconds and also should not animate till the mouse is on it.

    It should animate only on set interval with the condition that mouse is not on it.

    jasmit

    Reply
  74. Rajesh
    April 27, 2009 at 7:41 am

    I followed the hint has given above, but i didnt get any output. Just it is showing a rectangular box only.The following is my code, pls review it and advise me.

    Note: anything else we have to install/add for Jquery.

    Untitled Document

    var headline_count;

    var headline_interval;

    var current_headline = 0;

    var old_headline = 0;

    $(document).ready(function(){

    headline_count = $("div.headline").size();

    $("div.headline:eq(" + current_headline + ")").css(top, '5px');

    });

    function headline_rotate() {

    current_headline = (old_headline + 1) % headline_count;

    }

    $("div.headline:eq(" + old_headline + ")").animate({top: -205},"slow");

    $("div.headline:eq(" + old_headline + ")").animate({top: -205},"slow", function() {

    $(this).css('top', '210px');

    });

    $("div.headline:eq(" + current_headline + ")").animate({top: 5},"slow");

    old_headline = current_headline;

    }

    $('#scrollup').hover(function() {

    clearInterval(headline_interval);

    }, function() {

    headline_interval = setInterval(headline_rotate,5000);

    headline_rotate();

    });

    headline1 ...

    headline2...

    headline3...

    headline4 ...

    Reply
  75. Rajesh
    April 27, 2009 at 7:44 am

    I followed the hint has given above, but i didnt get any output. Just it is showing a rectangular box only.The following is my code, pls review it and advise me.

    Note: anything else we have to install/add for Jquery.

    
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns="http://www.w3.org/1999/xhtml">
< head>
< meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
< title>Untitled Document< /title>
< script type="text/javascript" language="javascript">

      var headline_count;

      var headline_interval;

      var current_headline = 0;

      var old_headline = 0;

      $(document).ready(function(){

        headline_count = $("div.headline").size();

        $("div.headline:eq(" + current_headline + ")").css(top, '5px');

      });

      function headline_rotate() {

        current_headline = (old_headline + 1) % headline_count;

      }

$("div.headline:eq(" + old_headline + ")").animate({top: -205},"slow");

      $("div.headline:eq(" + old_headline + ")").animate({top: -205},"slow", function() {

          $(this).css('top', '210px');

      });

      $("div.headline:eq(" + current_headline + ")").animate({top: 5},"slow");  

        old_headline = current_headline;

      }

      $('#scrollup').hover(function() {

        clearInterval(headline_interval);

      }, function() {

        headline_interval = setInterval(headline_rotate,5000);

        headline_rotate();

      });

< /script>
< style type="text/css">
< !--

      #scrollup {

        position: relative;

        overflow: hidden;

        border: 1px solid #000;

        height: 200px;

        width: 200px

      }

      .headline {

        position: absolute;

        top: 210px;

        left: 5px;

        height: 195px;

        width:190px;

      }

-->
< /style>
< /head>

< body>
      < div id="scrollup">

        < div class="headline">headline1 ... < /div>  

        < div class="headline"> headline2... < /div>  

        < div class="headline"> headline3... < /div>  

        < div class="headline">headline4 ... < /div>    

      < /div>
< /body>
< /html>
    Reply
  76. Internetagentur
    May 8, 2009 at 4:17 am

    Thank you, this tutorial has me very helped.

    Reply
  77. Callan
    May 26, 2009 at 9:55 pm

    To fix the issue with the mouseovers (eg if you mouse over, then away, it kickstarts the scrolling again.. moving the mouse around a bit repeatedly makes it initiate the scroll function too much, overlapping itself).. just change:

    
  $('#scrollup').hover(function() {
 clearInterval(headline_interval);
  }, function() {
 headline_interval = setInterval(headline_rotate,5000);
  headline_rotate();
  });

    to

    
  $('#scrollup').hover(function() {
 clearInterval(headline_interval);
  }, function() {
 headline_interval = setInterval(headline_rotate,5000);
  });
  headline_rotate();

    Then it won't manually kickstart the scroller everytime the mouse is moved over the box.. instead just initiating it once and letting the mouseover/mouseout purely change the timing variable.

    Thanks for the script as well.. while i'll probably end up going with the Cycle plugin for the effects, I like the simplicity of this so will no doubt use it in the future..

    Reply
  78. Webagentur
    June 4, 2009 at 4:34 am

    Thank you ... that has me very helped.

    Reply
  79. Taruna
    June 25, 2009 at 4:34 am

    Hi is there anyone to help me, i tried following up and i doesn't work for me. I have pasted the code above the jquery file. I have got the styles in my css file. I have the following divs in my html file. I hope I am not missing on anything other than this.

    Reply
  80. Taruna
    June 25, 2009 at 4:36 am

    Hi is there anyone to help me, i tried following up and it* doesn't work for me. I have pasted the js code above the jquery file. I have got the styles in my css file. I have the following divs in my html file. I hope I am not missing on anything other than this.

    Reply
    • Karl Swedberg
      June 25, 2009 at 6:17 pm

      Hi Taruna,
      It looks like your code didn't come through. If you're having a problem getting something to work, please provide a link to the page where you're experiencing the problem.

      thanks.

      Reply
  81. marek
    July 14, 2009 at 2:33 am

    Hi Karl.
    Excellent script works like a charm !
    I am fresh to jquery programming, so my question is :
    is it possible to update elements from regular javascript ( name.innerHTML or document.write ) to make it a dynamic content ? i.e load it from XML file ?
    Regards.

    Reply
  82. marek
    July 14, 2009 at 2:35 am

    in the previous post i ment to upade &ltdiv&gt elements

    Reply
  83. alon
    August 16, 2009 at 4:14 am

    thanks alot !!
    I was looking for that kind of script alot of time ! and even without a plugin.
    just perfect, thanks.

    Reply
  84. Helen Hunt
    October 9, 2009 at 5:19 am

    thanks alot !!
    I was looking for that kind of script alot of time ! and even without a plugin.
    just perfect, thanks.

    I will use it on my site :)

    Reply
  85. Jason
    October 12, 2009 at 6:58 am

    how can i do for more than one headline rotator ?
    ex.

    
    Headline 1
    Headline 2
    Headline 3
    .... 

    Headline 1
    Headline 2
    Headline 3
    ....

    i was try with "each" but can't done succes

    Thanks

    Reply
  87. Lance
    January 18, 2010 at 9:56 am

    Very helpful, thank you

    Reply
  88. Bruce
    January 18, 2010 at 4:39 pm

    Hi,

    Demo page not working.
    Message:
    Not Found

    The requested URL /scrollup.htm was not found on this server.

    Reply
  89. Bruce
    January 18, 2010 at 7:19 pm

    I've spent many hours trying, different variations trying to get scroll-up-headline-reader to work but nothing happens. "The go head" page doesn't exist, therefore I can't benefit like those whom got the code to work. I just got fed up and bought this wonderful Newscroller at news-scroller.com

    It was only $35.00. Also you can download the free demo before buying. It appears to be easy to use. You'll have it up and running less than 20 minutes. It has a easy interface for color styling, HMTL, fade in, scrolling speed control and much, much more. No coding headaches. You simply FTP a HTML and a Javascript file onto your web host server and use the short code provided, to put any where on your website. That's it!

    Stop wasting time. You make the choice.

    Reply
    • Karl Swedberg
      January 18, 2010 at 9:46 pm

      Bruce, if you believe that learning something is a waste of time, then by all means spend your $30 and have your fun. Sorry the demo page was 404ed. It's a three-year-old post, and I switched web hosts during that time due to my account being hacked, so I've had to painstakingly recreate a lot of files that were lost. That said, I linked to the full JavaScript at the end of the post and I provided all the html and css you need in various codes blocks throughout the post. I also show a running example in the post, linked to another demo on a book companion site (here's another one), and recommended that people check out Mike Alsup's fantastic, free Cycle Plugin. If that's not enough for you, then too bad. Apparently you made your choice. Now stop wasting my time.

      Reply

4 Pings

  1. commadot.com » Blog Archive » Marketo.com Launched
    May 20, 2007 at 11:31 pm

    [...] product and public site this week.  Uses a bunch of jQuery, Tabs Plugin, Validation Plugin and Scrolling Promo Effect.  Design was done by Sean Zimmerman.  HTML Production was done by NetKitchen and myself.  [...]

  2. Chad’s dailies » Blog Archive » links for 2007-10-05
    October 5, 2007 at 7:23 pm

    [...] Learning jQuery » Scroll Up Headline Reader (tags: jquery scroller) [...]

  3. Nova’s Blog » Blog Archiv » JQuery Tutorials für Einsteiger, Fortgeschrittene, Experten
    November 15, 2008 at 3:08 pm

    [...] coding tips and tricks, C#, .NET, ASP.NET, SQL, default text, jQuery trick, default text input Learning jQuery » Scroll Up Headline Reader Creating a Dynamic Poll with jQuery and PHP - NETTUTS Submit A Form Without Page Refresh using [...]

  4. Simple Headline Rotator | Out to Lunch Productions
    March 19, 2009 at 5:43 pm

    [...] new image just to include a story in their front page rotator. So I started looking, and I found a JQuery site that had an interesting [...]

Leave a Comment

IMPORTANT:

  • If you wish to post code examples, please wrap them in <code> tags.
  • Multi-line code should be wrapped in <pre><code> </code></pre>
  • Use &lt; instead of < and &gt; instead of > in the examples themselves. Otherwise, you could lose part of the comment when it's submitted.