Trying to create a vertical scrolling &amp;quot;News Ticker&amp;quot;...Help please!!

ASKER

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.

ASKER

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/

Tomarse111

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.

ASKER

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

sammySeltzer

why not attach the one you are currently having problem with?

ASKER

See my last message. I already attached it there ("sample-ticker.zip")

sammySeltzer

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

ASKER

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>

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>

ASKER

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?

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>

ASKER

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.

ASKER

BTW—I noticed one small mistake in your code. On line 63, you have:

document.getElementById('ticker').appendChild(newLi);

But it should be:

document.getElementById('tickerUl').appendChild(newLi);

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.

ASKER

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);

...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?

ASKER CERTIFIED SOLUTION

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER

Thanks again for your help tommyBoy. This is just what I needed.