Comments on: Scroll Up Headline Reader

By: Rachit

Rachit — Thu, 05 Jan 2012 18:31:22 +0000

Thankyou for such a great tutorial Karl Sir. ! I am working on to modify this script to work with lists, more like the same above but with multiple links in the box.

By: Karl Swedberg

Karl Swedberg — Tue, 06 Dec 2011 16:56:07 +0000

thanks. I fixed the code example.

By: Randy

Randy — Thu, 10 Nov 2011 08:32:52 +0000

$("div.headline:eq(" + current_headline + ")").css(top, '5px'); You are referencing top as an object, not as a literal. Change to: $("div.headline:eq(" + current_headline + ")").css('top', '5px');

By: Randy

Randy — Thu, 10 Nov 2011 07:16:57 +0000

Hi Karl, In the code snippet just above the jQ1.1 .top() deprecation warning .css(top, '5px') should be .css('top', '5px') Guess I'm the only one that does cut/paste from the snippets instead of the final complete example. Regards

By: Keith

Keith — Thu, 30 Dec 2010 18:21:11 +0000

Did anyone get Markus’s post #17 and Karl’s reply post #18 working?

It works when JS is disabled, all the headlines appear with a vertical scroll bar. But with JS enabled the first headline is not appearing until the first time through the setInterval time.

I think is has something to do with css “Top” property, but I’m not 100% sure. It looks as if it is starting with top set to 320px, which displays nothing.

Code:
#scrollup {position: relative; overflow: auto; height: 320px; }
.headline {position: relative; top: 5px; left: 0; overflow: hidden; height: auto;}

$(document).ready(function(){
headline_count = $(“div.headline”).size();
$(‘#scrollup’).css({overflow: ‘hidden’})
$(‘div.headline’)
.css({position: ‘absolute’, height: ’320px’})
.not(current_headline)
.css(‘top’,’320px’);
headline_interval = setInterval(headline_rotate,2000);
});

By: txmod

txmod — Mon, 15 Nov 2010 13:33:06 +0000

If I want to use the same function for other boxes on the same page, how do I add a different id in the script? Otherwise I should load different scripts and css for each box. I used a method, but does not work. Can you tell me how to improve the script suggesting this?


headlineId = $(this).attr('class');
headline_count = $("div."+headlineId+"_hl").size();

otherwise

headlineId = $(this).attr('id');
headline_count = $("#"+headlineId+"_hl").size();

Thanks

By: SMS

SMS — Mon, 08 Nov 2010 21:36:30 +0000

In FF I moved the mouse pointer in and out of the box real fast several times…interesting results. You shouldn’t have to care about people being careless like that, but you could probably easily code a fix to prevent it.

By: JQuery – Scroll up Headline Display « A September Chill…

JQuery – Scroll up Headline Display « A September Chill… — Mon, 18 Oct 2010 20:01:13 +0000

[...] A really simple newsfeed scrolling display – at time of writing only displays one item at a time, but the author intends to write a multi-item display version before long: http://www.learningjquery.com/2006/10/scroll-up-headline-reader [...]

By: Karl Swedberg

Karl Swedberg — Sun, 26 Sep 2010 18:12:00 +0000

In the code above, the headline_interval variable is assigned to a setInterval function. That setInterval function executes the headline_rotate function every 5000 milliseconds (or 5 seconds):

headline_interval = setInterval(headline_rotate,5000);

By: Stephan Ivaylov

Stephan Ivaylov — Fri, 24 Sep 2010 08:55:47 +0000

Hi Karl,

I really can’t get which part of the code is in charge for the cycling?
I mean all this functions to be called again for every iteration.
Is it only the “setTimeout()” method responsible?