I suggest you to take a look at this live preview and download the source code to understand how it works. In the source code I added a file called base.html that contains the basic structure of this ticker you can quickly reuse and customize in your web project.
A little introduction
Step 1: image to have a <ul> list with ID = listticker. This list contains some list elements <li> (in this case: My News 1, My News 2, ...). First step is: get the first element of the list, save its content into a var and remove it using a fade out effect.
You can get the HTML code contained into the first element of the list (#listticker) and assign it to a var (first) using this simple code:
first = $('ul#listticker li:first').html();
To use fade out effect and remove the element you can use this code:
.fadeOut('slow', function() {$(this).remove();});
Step 2: now you have to add the content saved into the var first to the end of the list:
You can use this simple code:
$('ul#listticker').append(first)
...where first is the var you used to save the content of the first element in the step 1.
Step 3: Now you have to move up the content of the list (My News 2 is now the first element of the list) and repeat the entire process from the step 1.
HTML Code
HTML code is really simple. The only thing you have to do is adding an <ul> list with ID = listticker and some list elements:
<ul id="listticker">
<li>My News 1</li>
<li>My News 2</li>
<li>My News 3</li>
<li>My News 4</li>
<li>My News 5</li>
</ul><li>My News 2</li>
<li>My News 3</li>
<li>My News 4</li>
<li>My News 5</li>
Remeber to add into the tag <head> of the page where you want to implement this ticker a link to jQuery:
<script type="text/javascript" src="jquery.js"></script>
Javascript Code
Take a look at the follow code. I implement 2 functions removeFirst() and addLast(). Each function contains five lines of code. Total lines for "conceptual" code: 10 lines! I promised! :)
<script type="text/javascript">
$(document).ready(function(){
var first = 0;
var speed = 700;
var pause = 3000;
interval = setInterval(removeFirst, pause);
});</script>
$(document).ready(function(){
var first = 0;
var speed = 700;
var pause = 3000;
function removeFirst(){
function addLast(first){
first = $('ul#listticker li:first').html();
$('ul#listticker li:first')
.animate({opacity: 0}, speed)
.fadeOut('slow', function() {$(this).remove();});
addLast(first);
}$('ul#listticker li:first')
.animate({opacity: 0}, speed)
.fadeOut('slow', function() {$(this).remove();});
addLast(first);
function addLast(first){
last = '
first+'';
$('ul#listticker').append(last)
$('ul#listticker li:last')
.animate({opacity: 1}, speed)
.fadeIn('slow')
}first+'';
$('ul#listticker').append(last)
$('ul#listticker li:last')
.animate({opacity: 1}, speed)
.fadeIn('slow')
interval = setInterval(removeFirst, pause);
});</script>
In the last line I used:
interval = setInterval(removeFirst, pause);
...it calls the function removeFirst()every 3 seconds (3000 milliseconds) and in this way I create ad infinite loop.
If you have suggestions to improve the code please leave a comment. Thanks!
0 comments