Home > Computers and Internet, JQuery > JQuery – Scroll up Headline Display

JQuery – Scroll up Headline Display

JQueryA 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

Just in case the original source disappears here’s the code from that page:

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>

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: }
 
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: }
Advertisements
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: