2

I am trying to make a news ticker using JQuery that cycles messages automatically, but can be stopped and started with buttons. So far I have the <li> messages that will cycle and repeat.

I am trying to use the following code to create the buttons mentioned above. The buttons are created, and the script function looks right to me. 

Is there something I'm missing below?

Also, is there a feature that I can use to make the page refresh itself? In case someone manipulates the messages while the page is in use. If I don't take care of that, its fine I really am getting stumped on buttons.

Thank you for any help you can offer.

<!doctype html>

<head><meta charset="utf-8" />
<title>homework</title>
<link href="resources/css/global.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js">

</script>

<link href='http://fonts.googleapis.com/css?family=IM+Fell+DW+Pica+SC' rel='stylesheet' type='text/css'>

</head>
<body>

<div id="page">

<ul id="ticker_01" class="ticker">

<li>1st block</li>
<li>2nd Block</li>
<li>Should be nearly finished</li>
<li>Finally done</li>
</ul>
</div>
<input type="button" class="next" value="next" />
<input type="button" class="prev" value="prev" />
<script>

function tick()
{
$('#ticker_01 li:first').slideUp( function () { $(this).appendTo($('#ticker_01')).slideDown(); });
}

setInterval(function(){ tick () }, 5000);
(function(){
var $lis = $('ul li');
var index = 0, lastIndex = 0;
start(); // activate first, add event listeners to buttons
function next(){
lastIndex = index;
if(++index == $lis.length) index = 0; // if next is out of bounds go to first
    $lis.eq(index).addClass('active');
    $lis.eq(lastIndex).removeClass('active');
};

function prev(){
    lastIndex = index;
    if(--index < 0) index = ($lis.length - 1); // if prev is less than first go to last
    $lis.eq(index).addClass('active');
    $lis.eq(lastIndex).removeClass('active');
};
function start(){
    $lis.eq(0).addClass('active');
    $('.next').click(next);
    $('.prev').click(prev);
}
})();
</script>
</body>
</html>
TheDungeonMaster
  • 35
  • 5

1 Answers1

2

Is there a built-in button feature with JQuery ?

Hardly Not ,but you have to look upon jQuery UI

Also, is there a feature that I can use to make the page refresh itself?

yes of course that's AJAX

AJAX helps you to update what you want with out a real gaint refresh , simply update only what you want

Refer http://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/

http://api.jquery.com/jQuery.ajax/

http://www.w3schools.com/jquery/jquery_ajax_intro.asp


internals-in
  • 4,798
  • 2
  • 21
  • 38