Simple jQuery News Ticker Plugin
Very lightweight jQuery dependent news ticker for use with an ordered or un-ordered list.
https://github.com/i-like-robots
HTML
<ol id="sample" class="ticker">
<li>Item 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </li>
<li>Item 2. Lorem ipsum doler sit amet.</li>
<li>Item 3. Lorem ipsum doler sit amet.</li>
</ol>
CSS
/* Ticker Styling */
.ticker-wrapper.has-js {
margin: 20px 0px 20px 0px;
padding: 0px 20px;
width: 100%;
height: 32px;
display: block;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
background-color: #f8f0db;
font-size: 0.75em;
}
.ticker {
width: 410px;
height: 23px;
display: block;
position: relative;
overflow: hidden;
background-color: #f8f0db;
}
.ticker-title {
padding-top: 9px;
color: #990000;
font-weight: bold;
background-color: #f8f0db;
text-transform: uppercase;
position: relative;
z-index: 10;
}
.ticker-content {
margin: 0px;
padding-top: 9px;
position: relative;
color: #1F527B;
font-weight: bold;
background-color: #f8f0db;
overflow: hidden;
white-space: nowrap;
line-height: 1.2em;
}
.ticker-content:focus {
none;
}
.ticker-content a {
text-decoration: none;
color: #1F527B;
}
.ticker-content a:hover {
text-decoration: underline;
color: #0D3059;
}
.ticker-swipe {
padding-top: 9px;
position: relative;
top: 0px;
background-color: #f8f0db;
display: block;
width: 500px;
height: 23px;
}
.ticker-swipe span {
margin-left: 1px;
background-color: #f8f0db;
border-bottom: 1px solid #1F527B;
height: 12px;
width: 7px;
display: block;
}
.ticker-controls {
padding: 8px 0px 0px 0px;
list-style-type: none;
float: left;
}
.ticker-controls li {
padding: 0px;
margin-left: 5px;
float: left;
cursor: pointer;
height: 16px;
width: 16px;
display: block;
}
.ticker-controls li.jnt-play-pause {
background-image: url('https://raw.github.com/IsraelWebDev/jQuery-News-Ticker/master/images/controls.png');
background-position: 32px 16px;
}
.ticker-controls li.jnt-play-pause.over {
background-position: 32px 32px;
}
.ticker-controls li.jnt-play-pause.down {
background-position: 32px 0px;
}
.ticker-controls li.jnt-play-pause.paused {
background-image: url('https://raw.github.com/IsraelWebDev/jQuery-News-Ticker/master/images/controls.png');
background-position: 48px 16px;
}
.ticker-controls...
JavaScript
/*
jQuery News Ticker is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, version 2 of the License.
jQuery News Ticker is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with jQuery News Ticker. If not, see <http://www.gnu.org/licenses/>.
*/
(function($){
$.fn.ticker = function(options) {
// Extend our default options with those provided.
// Note that the first arg to extend is an empty object -
// this is to keep from overriding our "defaults" object.
var opts = $.extend({}, $.fn.ticker.defaults, options);
// check that the passed element is actually in the DOM
if ($(this).length == 0) {
if (window.console && window.console.log) {
window.console.log('Element does not exist in DOM!');
}
else {
alert('Element does not exist in DOM!');
}
return false;
}
/* Get the id of the UL to get our news content from */
var newsID = '#' + $(this).attr('id');
/* Get the tag type - we will check this later to makde sure it is a UL tag */
var tagType = $(this).get(0).tagName;
return this.each(function() {
// get a unique id for this ticker
var uniqID = getUniqID();
/* Internal vars */
var settings = {
position: 0,
time: 0,
distance: 0,
newsArr: {},
play: true,
paused: false,
contentLoaded: false,
dom: {
contentID: '#ticker-content-' + uniqID,
titleID: '#ticker-title-' + uniqID,
titleElem: '#ticker-title-' + uniqID + ' SPAN',
tickerID : '#ticker-' + uniqID,
wrapperID: '#ticker-wrapper-' + uniqID,
revealID: '#ticker-swipe-' + uniqID,
revealElem:...