Solved

Trying to create a vertical scrolling "News Ticker"...Help please!!

Posted on 2011-09-14
21
719 Views
Last Modified: 2012-05-12
I've come up with a simple scrolling ticker from a tutorial I found but I find the scrolling very "jumpy". The jumpiness seems to be happening when the list item at the very top is removed and added to the bottom. I've played around with it but I'm not really sure what I can do to prevent that and make the scrolling nice and smooth.

Any suggestions would be greatly appreciated.
0
Comment
Question by:Adam
  • 10
  • 4
  • 3
  • +1
21 Comments
 
LVL 15

Expert Comment

by:Tomarse111
ID: 36537218
The one I have used in a few sites is

http://www.gmarwaha.com/jquery/jcarousellite/

very easy to use if you are familiar with jQuery and very light weight. It can also do vertical or horizontal.
0
 
LVL 15

Expert Comment

by:Tomarse111
ID: 36537241
0
 
LVL 1

Author Comment

by:Adam
ID: 36537285
Can it be set to autoscroll? I don't really need the "next" and "previous" buttons. It should be a list that is in continuous motion.
0
 
LVL 1

Author Comment

by:Adam
ID: 36537338
I actually tried the second one you suggested already. The problem with most vertical scrollers I've found (and like the one you mentioned), is that each list item has a set height for it to work properly. My list will have variable heights (depending on the length of the title) so it doesn't work quite as well for my purposes.

Not sure if this helps, but here is the tutorial that I based mine off of: http://net.tutsplus.com/tutorials/javascript-ajax/build-a-simple-jquery-news-ticker/
0
 
LVL 15

Expert Comment

by:Tomarse111
ID: 36541640
Hiya

yes it can be set to auto, simply add:

auto: 5000 to the options to wait for 5 seconds before going to the next item.

As to the variable height, you will probably find this with most verticals. The way we have dealt with that is either only show X amount of chars or you could adjust the height automatically through jQuery. Not sure how this would look though.
0
 
LVL 1

Author Comment

by:Adam
ID: 36549326
Thanks again for the reply Tomarse111. I managed to get my news ticker working with the plugin you suggested. I have it auto-scrolling vertically which is great. However, I am noticing an issue with some of my list items that are "longer"—they are getting cut off. Even though its not mentioned in the documentation, I'm pretty sure there is a max-height somewhere in the plugin code which is causing this.

I understand what you mean about setting a variable height but to be honest, my coding skills aren't that strong. Would you have any idea how I can pull something like that off with the plugin (or any other suggestions on how I can achieve something like it)?

I've attached my sample ticker as a reference. Thanks again.

sample-ticker.zip
0
 
LVL 28

Expert Comment

by:sammySeltzer
ID: 36567103
why not attach the one you are currently having problem with?
0
 
LVL 1

Author Comment

by:Adam
ID: 36567180
See my last message. I already attached it there ("sample-ticker.zip")
0
 
LVL 28

Expert Comment

by:sammySeltzer
ID: 36567416
I saw your last post. I was under the impression that you used their sample to build yours.

Why not use the exact same sample they used in the demo and add your own text?

Why try to reinvent the wheel?

See attachment.
sample-ticker.zip
0
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 1

Author Comment

by:Adam
ID: 36568005
Thanks for the help sammySeltzer.

I actually did originally use the one from that site but they had it set up using definition lists rather then an unordered list. I made the switch to an unordered list and it got kind of "glitchy". The glitch happens when the top item is added to the bottom of the list. See the attached code.

I also tried just leaving it as a definition list but when I started changing the styling a bit, it also became "glitchy" and started "jumping" like in my unordered list version.

Any ideas?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Simple News Ticker</title>
    <style type="text/css">
#ticker {
	width:180px;
	height:300px;
	border:1px solid #aaaaaa;
	overflow:auto;
	padding: 0;
}
#ticker li {
	font:normal 14px Georgia;
	padding:10px;
	background-color:#e5e5e5;
	border-bottom:1px solid #ffffff;
	position:relative;
	margin: 0;
	list-style: none;
}
#ticker div {
	margin-top:0;
}
</style>
    </head>
    <body>
<div id="tickerContainer">
      <ul id="ticker">
    <li class="heading">This is a news title! This is a snippet of the news. It could be the whole news item or it could link to another page containing...</li>
    <li class="heading">News Heading 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
    <li class="heading">News Heading 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In id lectus libero. Etiam volutpat nulla sed nunc tincidunt sit amet molestie sapien adipiscing. Donec volutpat nulla vulputate turpis faucibus malesuada fermentum nibh fermentum. Aliquam consequat, ligula ac volutpat aliquam, arcu ipsum elementum augue, at imperdiet metus neque in velit. Nullam tincidunt, justo ut gravida tristique, justo orci porttitor odio, sit amet consectetur sem elit sed nisl.</li>
    <li class="heading">News Heading 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
    <li class="heading">This item is long! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
  </ul>
    </div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript">
	  $(function() {
	  
		//cache the ticker
		var ticker = $("#ticker");
		  
		//hide the scrollbar
		ticker.css("overflow", "hidden");
		
		//animator function
		function animator(currentItem) {
		    
		  //work out new anim duration
		  var distance = currentItem.height();
			duration = (distance + parseInt(currentItem.css("marginTop"))) / 0.025;

		  //animate the first child of the ticker
		  currentItem.animate({ marginTop: -distance }, duration, "linear", function() {
		    
			//move current item to the bottom
			currentItem.appendTo(currentItem.parent()).css("marginTop", 0);

			//recurse
			animator(currentItem.parent().children(":first"));
		  }); 
		};
		
		//start the ticker
		animator(ticker.children(":first"));
				
		//set mouseenter
		ticker.mouseenter(function() {
		  
		  //stop current animation
		  ticker.children().stop();
		  
		});
		
		//set mouseleave
		ticker.mouseleave(function() {
		          
          //resume animation
		  animator(ticker.children(":first"));
		  
		});
	  });
    </script>
</body>
</html>

Open in new window

0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 36568514
How about a simple javascript scroller?

Sample attached.
<!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>
<style type="text/css">

div.ticker { position:relative; width: 220px; height:400px; overflow:hidden }
div.ticker ul li { position:absolute; left:0; height: auto !important }
.tickerLi { list-style:none }
</style>
</head>

<body onload="moveUl()">
<div class="ticker" id="ticker">
<ul id="tickerUl">
  <li id="li_1">
    <h3><a href="#">Title 1</a></h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus fringilla nisl.</p>
  </li>
  <li id="li_2">
    <h3><a href="#">Title 2</a></h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus fringilla nisl. Proin ornare diam orci. Proin eros odio, laoreet eu fermentum vel, aliquam placerat sem. Donec mauris sem, egestas egestas vehicula a, porttitor eu enim.</p>
  </li>
  <li id="li_3">
    <h3><a href="#">Title 3</a></h3>
    <p>Nam lobortis aliquam mi quis elementum.</p>
  </li>
  <li id="li_4">
    <h3><a href="#">Title 4</a></h3>
    <p>Maecenas consequat sollicitudin nunc, non sollicitudin mi tempor quis. Nulla elementum dapibus dolor, eget porttitor elit pulvinar nec. Sed eget leo consequat elit suscipit dignissim. </p>
  </li>
    <li id="li_5">
    <h3><a href="#">Title 5</a></h3>
    <p>Nullam ut sem quis nisi molestie blandit posuere nec nunc. Nullam augue nunc, condimentum interdum varius eget, imperdiet sit amet diam. Mauris gravida, turpis sit amet pharetra posuere, mi mauris convallis sem, ut suscipit velit magna quis erat. Nulla in sem quis tortor vehicula placerat eget in lectus. </p>
  </li>
</ul>
</div>
<script type="text/javascript">
var scrollUl = document.getElementById('tickerUl');
var ulHeight = 0;
var arLi = scrollUl.getElementsByTagName('li');
var allLi = new Array(arLi.length + 3);
for(j=0;j<allLi.length;j++){
    if(j < arLi.length) {
        allLi[j] = arLi[j];
        ulHeight += arLi[j].offsetHeight;
    } else {
        //copy list items 1, 2 and 3 and add them to the end of the ticker to fill the gap and make ticker continuous
        var newLi = document.createElement('li');
        newLi.setAttribute('id', 'li_' + (j+1));
        newLi.setAttribute('class', 'tickerLi');
        newLi.style.position = "absolute";
        newLi.innerHTML = document.getElementById('li_' + (j-(arLi.length-1))).innerHTML;
        document.getElementById('ticker').appendChild(newLi);
        allLi[j] = newLi;
    }                
}
var topPos = 0;
var objHeight = 0;
var moveup = 0;
function moveUl() {
    if(moveup == ulHeight){
        topPos = 0;
        moveup = 0;
    } else {
        topPos = topPos - topPos - moveup;
    }
    setTop(topPos);
    moveup++;
    var t = setTimeout("moveUl()", 20);
}

function setTop(topVal) {
    for(i=0; i<allLi.length; i++) {
        objHeight = allLi[i].offsetHeight;
        allLi[i].style.top = topVal + 'px';        
        topVal = topVal + objHeight;
        objHeight = 0;
    }
}
</script>
</body>
</html>

Open in new window

0
 
LVL 1

Author Comment

by:Adam
ID: 36568580
Thanks tommyBoy—that would work too. The only thing I was hoping to include is the ability to stop the scrolling when you hover over a list item. Is that something that can be easily added?
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 36568993
No Problem.
<!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>
<style type="text/css">

div.ticker { position:relative; width: 220px; height:400px; overflow:hidden }
div.ticker ul li { position:absolute; left:0; height: auto !important }
.tickerLi { list-style:none }
</style>
</head>

<body onload="moveUl()">
<div class="ticker" id="ticker" onmouseover="pauseScroll()" onmouseout="resumeScroll()">
<ul id="tickerUl">
  <li id="li_1">
    <h3><a href="#">Title 1</a></h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus fringilla nisl.</p>
  </li>
  <li id="li_2">
    <h3><a href="#">Title 2</a></h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus fringilla nisl. Proin ornare diam orci. Proin eros odio, laoreet eu fermentum vel, aliquam placerat sem. Donec mauris sem, egestas egestas vehicula a, porttitor eu enim.</p>
  </li>
  <li id="li_3">
    <h3><a href="#">Title 3</a></h3>
    <p>Nam lobortis aliquam mi quis elementum.</p>
  </li>
  <li id="li_4">
    <h3><a href="#">Title 4</a></h3>
    <p>Maecenas consequat sollicitudin nunc, non sollicitudin mi tempor quis. Nulla elementum dapibus dolor, eget porttitor elit pulvinar nec. Sed eget leo consequat elit suscipit dignissim. </p>
  </li>
    <li id="li_5">
    <h3><a href="#">Title 5</a></h3>
    <p>Nullam ut sem quis nisi molestie blandit posuere nec nunc. Nullam augue nunc, condimentum interdum varius eget, imperdiet sit amet diam. Mauris gravida, turpis sit amet pharetra posuere, mi mauris convallis sem, ut suscipit velit magna quis erat. Nulla in sem quis tortor vehicula placerat eget in lectus. </p>
  </li>
</ul>
</div>
<script type="text/javascript">
var pause = false;
function pauseScroll() {
    pause = true;
}
function resumeScroll() {
    pause = false;
    moveUl();
}
var scrollUl = document.getElementById('tickerUl');
var ulHeight = 0;
var arLi = scrollUl.getElementsByTagName('li');
var allLi = new Array(arLi.length + 3);
for(j=0;j<allLi.length;j++){
    if(j < arLi.length) {
        allLi[j] = arLi[j];
        ulHeight += arLi[j].offsetHeight;
    } else {
        //copy list items 1, 2 and 3 and add them to the end of the ticker to fill the gap and make ticker continuous
        var newLi = document.createElement('li');
        newLi.setAttribute('id', 'li_' + (j+1));
        newLi.setAttribute('class', 'tickerLi');
        newLi.style.position = "absolute";
        newLi.innerHTML = document.getElementById('li_' + (j-(arLi.length-1))).innerHTML;
        document.getElementById('ticker').appendChild(newLi);
        allLi[j] = newLi;
    }                
}
var topPos = 0;
var objHeight = 0;
var moveup = 0;
function moveUl() {
    if(!pause){
        if(moveup == ulHeight){
            topPos = 0;
            moveup = 0;
        } else {
            topPos = topPos - topPos - moveup;
        }
        setTop(topPos);
        moveup++;
        var t = setTimeout("moveUl()", 20);
    }
}
function setTop(topVal) {
    for(i=0; i<allLi.length; i++) {
        objHeight = allLi[i].offsetHeight;
        allLi[i].style.top = topVal + 'px';        
        topVal = topVal + objHeight;
        objHeight = 0;
    }
}
</script>
</body>
</html>

Open in new window

0
 
LVL 1

Author Comment

by:Adam
ID: 36577931
Thanks very much for the help tommyBoy. This is great.

Just a few more questions and I promise I'll leave you alone... ;)

Firstly, the list I have has more items then the list in your sample (I have 8 in mine). I find that once the list reaches the end, the first list item gets added to the bottom multiple times and half-way up as its scrolling, it resets and the list is back to normal. Is this because I have more list items then in your sample? Is there a value I need to change in the Javascript?

Also, when I hover over a list item, it pauses (which is great). However, when I move my cursor off of the item, the scrolling increases its speed (I'm assuming its trying to compensate for the pause). Is there anyway to fix it so that it continues to scroll at the same speed?

Again, thank you for the help. Much appreciated.
0
 
LVL 1

Author Comment

by:Adam
ID: 36577938
BTW—I noticed one small mistake in your code. On line 63, you have:
document.getElementById('ticker').appendChild(newLi);

Open in new window

But it should be:
document.getElementById('tickerUl').appendChild(newLi);

Open in new window

This way, the list item gets added to the <ul> rather then outside of it. Just thought I'd mention it in case someone else stumbles across this.
0
 
LVL 1

Author Comment

by:Adam
ID: 36578062
Hmmm...it seems that the change I mentioned in my last post is the exact cause for the problem I'm having:

I find that once the list reaches the end, the first list item gets added to the bottom multiple times and half-way up as its scrolling, it resets and the list is back to normal.

If I leave line 60 as is:
document.getElementById('ticker').appendChild(newLi);

Open in new window


...it seems to work. However, the list item is incorrectly added outside of the <ul> (and kind of messes some things up with my CSS that you don't really notice in your sample). Do you know how we can fix it so that it correctly adds the list item to the end of the <ul> and doesn't cause the first list item to be repeatedly added to the end of the list?
0
 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
ID: 36580597
Sorry for the delay, I am out of town.

You were correct in pointing out my mistake.

You may have already figured it out, but the reason it gets messed up when you simply change from adding the new list items to the 'ticker' div to adding them to the 'tickerUl' list is that adding the new list items to 'tickerUl' increases the length of the array of list items (arLi.length). That messes up the calculation (j-(arLi.length-1)) and thus copies the wrong list item's contents.

Here's the corrected script:
<script type="text/javascript">
var pause = false;
function pauseScroll() {
    pause = true;
}
function resumeScroll() {
    pause = false;
    moveUl();
}
var scrollUl = document.getElementById('tickerUl');
var ulHeight = 0;
var arLi = scrollUl.getElementsByTagName('li');
var origLi = arLi.length;
var allLi = new Array(arLi.length + 3);
for(j=0;j<allLi.length;j++){
    if(j < arLi.length) {
        allLi[j] = arLi[j];
        ulHeight += arLi[j].offsetHeight;
    } else {
        //copy list items 1, 2 and 3 and add them to the end of the ticker to fill the gap and make ticker continuous
        var newLi = document.createElement('li');
        newLi.setAttribute('id', 'li_' + (j+1));
        newLi.innerHTML = document.getElementById('li_' + (j-(origLi-1))).innerHTML;
        document.getElementById('tickerUl').appendChild(newLi);
        allLi[j] = newLi;
    }                
}
var topPos = 0;
var objHeight = 0;
var moveup = 0;
function moveUl() {
    if(!pause){
        if(moveup == ulHeight){
            topPos = 0;
            moveup = 0;
        } else {
            topPos = topPos - topPos - moveup;
        }
        setTop(topPos);
        moveup++;
        var t = setTimeout("moveUl()", 20);
    }
}
function setTop(topVal) {
    for(i=0; i<allLi.length; i++) {
        objHeight = allLi[i].offsetHeight;
        allLi[i].style.top = topVal + 'px';        
        topVal = topVal + objHeight;
        objHeight = 0;
    }
}
</script>

Open in new window

0
 
LVL 1

Author Closing Comment

by:Adam
ID: 36586276
Thanks again for your help tommyBoy. This is just what I needed.
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 36586419
You're welcome, thanks for the points.
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Read about why website design really matters in today's demanding market.
Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now