diff --git a/includes/jquery.ticker.js b/includes/jquery.ticker.js
index 96799e8..94f208e 100755
--- a/includes/jquery.ticker.js
+++ b/includes/jquery.ticker.js
@@ -11,15 +11,15 @@
You should have received a copy of the GNU General Public License
along with jQuery News Ticker. If not, see .
*/
-(function($){
- $.fn.ticker = function(options) {
+(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 ($(this).length === 0) {
if (window.console && window.console.log) {
window.console.log('Element does not exist in DOM!');
}
@@ -32,7 +32,7 @@
/* 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 */
+ /* Get the tag type - we will check this later to make sure it is a UL tag */
var tagType = $(this).get(0).tagName;
return this.each(function() {
@@ -42,6 +42,7 @@
/* Internal vars */
var settings = {
position: 0,
+ prevPosition: 0,
time: 0,
distance: 0,
newsArr: {},
@@ -64,24 +65,25 @@
};
// if we are not using a UL, display an error message and stop any further execution
- if (tagType != 'UL' && tagType != 'OL' && opts.htmlFeed === true) {
+ if (tagType !== 'UL' && tagType !== 'OL' && opts.htmlFeed === true) {
debugError('Cannot use <' + tagType.toLowerCase() + '> type of element for this plugin - must of type or ');
return false;
}
// set the ticker direction
- opts.direction == 'rtl' ? opts.direction = 'right' : opts.direction = 'left';
+ opts.direction === 'rtl' ? opts.direction = 'right' : opts.direction = 'left';
// lets go...
initialisePage();
- /* Function to get the size of an Object*/
+
+ // function to get the size of an object
function countSize(obj) {
- var size = 0, key;
- for (key in obj) {
- if (obj.hasOwnProperty(key)) size++;
- }
- return size;
- };
+ var size = 0, key;
+ for (key in obj) {
+ if (obj.hasOwnProperty(key)) size++;
+ }
+ return size;
+ }
function getUniqID() {
var newDate = new Date;
@@ -113,14 +115,13 @@
$(settings.dom.wrapperID).append('');
$(settings.dom.wrapperID).removeClass('no-js').addClass('ticker-wrapper has-js ' + opts.direction);
- // hide the ticker
- $(settings.dom.tickerElem + ',' + settings.dom.contentID).hide();
+
// add the controls to the DOM if required
if (opts.controls) {
// add related events - set functions to run on given event
- $(settings.dom.controlsID).live('click mouseover mousedown mouseout mouseup', function (e) {
+ $(document).on('click mouseover mousedown mouseout mouseup',settings.dom.controlsID,function (e) {
var button = e.target.id;
- if (e.type == 'click') {
+ if (e.type === 'click') {
switch (button) {
case settings.dom.prevID.replace('#', ''):
// show previous item
@@ -136,7 +137,7 @@
break;
case settings.dom.playPauseID.replace('#', ''):
// play or pause the ticker
- if (settings.play == true) {
+ if (settings.play === true) {
settings.paused = true;
$(settings.dom.playPauseID).addClass('paused');
pauseTicker();
@@ -149,33 +150,33 @@
break;
}
}
- else if (e.type == 'mouseover' && $('#' + button).hasClass('controls')) {
+ else if (e.type === 'mouseover' && $('#' + button).hasClass('controls')) {
$('#' + button).addClass('over');
}
- else if (e.type == 'mousedown' && $('#' + button).hasClass('controls')) {
+ else if (e.type === 'mousedown' && $('#' + button).hasClass('controls')) {
$('#' + button).addClass('down');
}
- else if (e.type == 'mouseup' && $('#' + button).hasClass('controls')) {
+ else if (e.type === 'mouseup' && $('#' + button).hasClass('controls')) {
$('#' + button).removeClass('down');
}
- else if (e.type == 'mouseout' && $('#' + button).hasClass('controls')) {
+ else if (e.type === 'mouseout' && $('#' + button).hasClass('controls')) {
$('#' + button).removeClass('over');
}
});
// add controls HTML to DOM
$(settings.dom.wrapperID).append('');
}
- if (opts.displayType != 'fade') {
- // add mouse over on the content
- $(settings.dom.contentID).mouseover(function () {
- if (settings.paused == false) {
- pauseTicker();
- }
- }).mouseout(function () {
- if (settings.paused == false) {
- restartTicker();
- }
- });
+ if (opts.displayType !== 'fade') {
+ // add mouse over on the content
+ $(settings.dom.contentID).mouseover(function () {
+ if (settings.paused === false) {
+ pauseTicker();
+ }
+ }).mouseout(function () {
+ if (settings.paused === false) {
+ restartTicker();
+ }
+ });
}
// we may have to wait for the ajax call to finish here
if (!opts.ajaxFeed) {
@@ -186,60 +187,99 @@
/* Start to process the content for this ticker */
function processContent() {
// check to see if we need to load content
- if (settings.contentLoaded == false) {
+ if (settings.contentLoaded === false) {
// construct content
if (opts.ajaxFeed) {
- if (opts.feedType == 'xml') {
- $.ajax({
- url: opts.feedUrl,
- cache: false,
- dataType: opts.feedType,
- async: true,
- success: function(data){
- count = 0;
- // get the 'root' node
- for (var a = 0; a < data.childNodes.length; a++) {
- if (data.childNodes[a].nodeName == 'rss') {
- xmlContent = data.childNodes[a];
+ switch(opts.feedType){
+ case 'xml':
+ $.ajax({
+ url: opts.feedUrl,
+ cache: false,
+ dataType: opts.feedType,
+ async: true,
+ success: function(data){
+ var count = 0;
+ // get the 'root' node
+ for (var a = 0; a < data.childNodes.length; a++) {
+ if (data.childNodes[a].nodeName === 'rss') {
+ xmlContent = data.childNodes[a];
+ }
}
- }
- // find the channel node
- for (var i = 0; i < xmlContent.childNodes.length; i++) {
- if (xmlContent.childNodes[i].nodeName == 'channel') {
- xmlChannel = xmlContent.childNodes[i];
- }
- }
- // for each item create a link and add the article title as the link text
- for (var x = 0; x < xmlChannel.childNodes.length; x++) {
- if (xmlChannel.childNodes[x].nodeName == 'item') {
- xmlItems = xmlChannel.childNodes[x];
- var title, link = false;
- for (var y = 0; y < xmlItems.childNodes.length; y++) {
- if (xmlItems.childNodes[y].nodeName == 'title') {
- title = xmlItems.childNodes[y].lastChild.nodeValue;
- }
- else if (xmlItems.childNodes[y].nodeName == 'link') {
- link = xmlItems.childNodes[y].lastChild.nodeValue;
- }
- if ((title !== false && title != '') && link !== false) {
- settings.newsArr['item-' + count] = { type: opts.titleText, content: '' + title + '' }; count++; title = false; link = false;
+ // find the channel node
+ for (var i = 0; i < xmlContent.childNodes.length; i++) {
+ if (xmlContent.childNodes[i].nodeName === 'channel') {
+ xmlChannel = xmlContent.childNodes[i];
+ }
+ }
+ // for each item create a link and add the article title as the link text
+ for (var x = 0; x < xmlChannel.childNodes.length; x++) {
+ if (xmlChannel.childNodes[x].nodeName === 'item') {
+ xmlItems = xmlChannel.childNodes[x];
+ var title, link = false;
+ for (var y = 0; y < xmlItems.childNodes.length; y++) {
+ if (xmlItems.childNodes[y].nodeName === 'title') {
+ title = xmlItems.childNodes[y].lastChild.nodeValue;
+ }
+ else if (xmlItems.childNodes[y].nodeName === 'link') {
+ link = xmlItems.childNodes[y].lastChild.nodeValue;
+ }
+ if ((title !== false && title !== '') && link !== false) {
+ settings.newsArr['item-' + count] = { type: opts.titleText, content: '' + title + '' }; count++; title = false; link = false;
+ }
}
- }
- }
- }
- // quick check here to see if we actually have any content - log error if not
- if (countSize(settings.newsArr < 1)) {
- debugError('Couldn\'t find any content from the XML feed for the ticker to use!');
- return false;
+ }
+ }
+ // check to see if we actually have any content - log error if not
+ if (countSize(settings.newsArr) < 1) {
+ debugError('Couldn\'t find any content from the XML feed for the ticker to use!');
+ return false;
+ }
+ settings.contentLoaded = true;
+ setupContentAndTriggerDisplay();
+ },
+ error: function(){
+ debugError('Ajax call failed!');
}
- settings.contentLoaded = true;
- setupContentAndTriggerDisplay();
+ });
+ break;
+ case 'json':
+ switch(opts.jsonType){
+ case 'array':
+ $.getJSON(opts.feedUrl, function(data){
+ var count = 0;
+ switch (opts.jsonType) {
+ case 'array':
+ $.each(data,function(key,val){
+ settings.newsArr['item-' + count] = {type: opts.titleText, content: val};
+ count++;
+ });
+ break;
+ case 'object':
+ $.each(data[opts.jsonObjKey],function(key,val){
+ settings.newsArr['item-' + count] = {type: opts.titleText, content: val};
+ count++;
+ });
+ break;
+ default:
+ debugError('JSON has been enabled but a valid JSON type has not been selected. Please check the ticker settings.');
+ return false;
+ }
+ // check to see if we actually have any content - log error if not
+ if (countSize(settings.newsArr) < 1){
+ debugError('Couldn\'t find any content from the JSON feed for the ticker to use!');
+ return false;
+ }
+ settings.contentLoaded = true;
+ setupContentAndTriggerDisplay();
+ })
+ .fail(function() {
+ debugError('JSON call failed!');
+ });
}
- });
+ break;
+ default:
+ debugError('Invalid Ajax Feed Type!');
}
- else {
- debugError('Code Me!');
- }
}
else if (opts.htmlFeed) {
if($(newsID + ' LI').length > 0) {
@@ -261,7 +301,6 @@
}
function setupContentAndTriggerDisplay() {
-
settings.contentLoaded = true;
// update the ticker content with the correct item
@@ -269,38 +308,47 @@
$(settings.dom.titleElem).html(settings.newsArr['item-' + settings.position].type);
$(settings.dom.contentID).html(settings.newsArr['item-' + settings.position].content);
- // set the next content item to be used - loop round if we are at the end of the content
- if (settings.position == (countSize(settings.newsArr) -1)) {
- settings.position = 0;
- }
- else {
- settings.position++;
- }
- // get the values of content and set the time of the reveal (so all reveals have the same speed regardless of content size)
- distance = $(settings.dom.contentID).width();
- time = distance / opts.speed;
+ if (opts.order === 'sequential') {
+ // set the next content item to be used - loop round if we are at the end of the content
+ if (settings.position === (countSize(settings.newsArr) - 1)) {settings.position = 0}
+ else {settings.position++}
+ }
+ else if (opts.order === 'random') {
+ // select random position that is different then the previous one, then set as previous for next iteration
+ do {settings.position = Math.floor(Math.random()*countSize(settings.newsArr))} while (settings.position === settings.prevPosition);
+ settings.prevPosition = settings.position;
+ }
+ else {
+ debugError('Need to choose a valid order type.');
+ return false;
+ }
// start the ticker animation
- revealContent();
+ revealContent();
}
// slide back cover or fade in content
function revealContent() {
+
+ // get the values of content and set the time of the reveal (so all reveals have the same speed regardless of content size)
+ var distance = $(settings.dom.contentID).width();
+ var time = distance / opts.speed;
+
$(settings.dom.contentID).css('opacity', '1');
if(settings.play) {
// get the width of the title element to offset the content and reveal
- var offset = $(settings.dom.titleID).width() + 20;
+ var offset = $(settings.dom.titleID).width() + settings.offset;
$(settings.dom.revealID).css(opts.direction, offset + 'px');
// show the reveal element and start the animation
- if (opts.displayType == 'fade') {
+ if (opts.displayType === 'fade') {
// fade in effect ticker
$(settings.dom.revealID).hide(0, function () {
$(settings.dom.contentID).css(opts.direction, offset + 'px').fadeIn(opts.fadeInSpeed, postReveal);
});
}
- else if (opts.displayType == 'scroll') {
+ else if (opts.displayType === 'scroll') {
// to code
}
else {
@@ -308,7 +356,7 @@
$(settings.dom.revealElem).show(0, function () {
$(settings.dom.contentID).css(opts.direction, offset + 'px').show();
// set our animation direction
- animationAction = opts.direction == 'right' ? { marginRight: distance + 'px'} : { marginLeft: distance + 'px' };
+ var animationAction = opts.direction === 'right' ? { marginRight: distance + 'px'} : { marginLeft: distance + 'px' };
$(settings.dom.revealID).css('margin-' + opts.direction, '0px').delay(20).animate(animationAction, time, 'linear', postReveal);
});
}
@@ -316,15 +364,15 @@
else {
return false;
}
- };
+ }
// here we hide the current content and reset the ticker elements to a default state ready for the next ticker item
function postReveal() {
- if(settings.play) {
+ if(settings.play) {
// we have to separately fade the content out here to get around an IE bug - needs further investigation
$(settings.dom.contentID).delay(opts.pauseOnItems).fadeOut(opts.fadeOutSpeed);
// deal with the rest of the content, prepare the DOM and trigger the next ticker
- if (opts.displayType == 'fade') {
+ if (opts.displayType === 'fade') {
$(settings.dom.contentID).fadeOut(opts.fadeOutSpeed, function () {
$(settings.dom.wrapperID)
.find(settings.dom.revealElem + ',' + settings.dom.contentID)
@@ -362,9 +410,7 @@
// stop animation and show content - must pass "true, true" to the stop function, or we can get some funky behaviour
$(settings.dom.tickerID + ',' + settings.dom.revealID + ',' + settings.dom.titleID + ',' + settings.dom.titleElem + ',' + settings.dom.revealElem + ',' + settings.dom.contentID).stop(true, true);
$(settings.dom.revealID + ',' + settings.dom.revealElem).hide();
- $(settings.dom.wrapperID)
- .find(settings.dom.titleID + ',' + settings.dom.titleElem).show()
- .end().find(settings.dom.contentID).show();
+ $(settings.dom.wrapperID).find(settings.dom.titleID + ',' + settings.dom.titleElem).show().end().find(settings.dom.contentID).show();
}
// play ticker
@@ -372,7 +418,7 @@
settings.play = true;
settings.paused = false;
// start the ticker again
- postReveal();
+ postReveal();
}
// change the content on user input
@@ -380,17 +426,17 @@
pauseTicker();
switch (direction) {
case 'prev':
- if (settings.position == 0) {
+ if (settings.position === 0) {
settings.position = countSize(settings.newsArr) -2;
}
- else if (settings.position == 1) {
+ else if (settings.position === 1) {
settings.position = countSize(settings.newsArr) -1;
}
else {
settings.position = settings.position - 2;
}
$(settings.dom.titleElem).html(settings.newsArr['item-' + settings.position].type);
- $(settings.dom.contentID).html(settings.newsArr['item-' + settings.position].content);
+ $(settings.dom.contentID).html(settings.newsArr['item-' + settings.position].content);
break;
case 'next':
$(settings.dom.titleElem).html(settings.newsArr['item-' + settings.position].type);
@@ -398,7 +444,7 @@
break;
}
// set the next content item to be used - loop round if we are at the end of the content
- if (settings.position == (countSize(settings.newsArr) -1)) {
+ if (settings.position === (countSize(settings.newsArr) - 1)) {
settings.position = 0;
}
else {
@@ -410,18 +456,22 @@
// plugin defaults - added as a property on our plugin function
$.fn.ticker.defaults = {
- speed: 0.10,
+ speed: 0.10,
+ htmlFeed: true,
ajaxFeed: false,
feedUrl: '',
feedType: 'xml',
+ jsonType: null,
+ jsonObjKey: null,
+ titleText: 'Latest',
+ order: 'sequential',
+ direction: 'ltr',
displayType: 'reveal',
- htmlFeed: true,
- debugMode: true,
- controls: true,
- titleText: 'Latest',
- direction: 'ltr',
pauseOnItems: 3000,
+ offset: 20,
fadeInSpeed: 600,
- fadeOutSpeed: 300
- };
-})(jQuery);
\ No newline at end of file
+ fadeOutSpeed: 300,
+ controls: true,
+ debugMode: true
+ };
+})(jQuery);
diff --git a/styles/ticker-style.css b/styles/ticker-style.css
index ca3c273..688c507 100644
--- a/styles/ticker-style.css
+++ b/styles/ticker-style.css
@@ -1,7 +1,7 @@
/* Ticker Styling */
.ticker-wrapper.has-js {
- margin: 20px 0px 20px 0px;
- padding: 0px 20px;
+ margin: 20px 0 20px 0;
+ padding: 0 20px;
width: 780px;
height: 32px;
display: block;
@@ -27,7 +27,7 @@
text-transform: uppercase;
}
.ticker-content {
- margin: 0px;
+ margin: 0;
padding-top: 9px;
position: absolute;
color: #1F527B;
@@ -51,7 +51,7 @@
.ticker-swipe {
padding-top: 9px;
position: absolute;
- top: 0px;
+ top: 0;
background-color: #f8f0db;
display: block;
width: 800px;
@@ -66,12 +66,12 @@
display: block;
}
.ticker-controls {
- padding: 8px 0px 0px 0px;
+ padding: 8px 0 0 0;
list-style-type: none;
float: left;
}
.ticker-controls li {
- padding: 0px;
+ padding: 0;
margin-left: 5px;
float: left;
cursor: pointer;
@@ -87,7 +87,7 @@
background-position: 32px 32px;
}
.ticker-controls li.jnt-play-pause.down {
- background-position: 32px 0px;
+ background-position: 32px 0;
}
.ticker-controls li.jnt-play-pause.paused {
background-image: url('../images/controls.png');
@@ -97,17 +97,17 @@
background-position: 48px 32px;
}
.ticker-controls li.jnt-play-pause.paused.down {
- background-position: 48px 0px;
+ background-position: 48px 0;
}
.ticker-controls li.jnt-prev {
background-image: url('../images/controls.png');
- background-position: 0px 16px;
+ background-position: 0 16px;
}
.ticker-controls li.jnt-prev.over {
- background-position: 0px 32px;
+ background-position: 0 32px;
}
.ticker-controls li.jnt-prev.down {
- background-position: 0px 0px;
+ background-position: 0 0;
}
.ticker-controls li.jnt-next {
background-image: url('../images/controls.png');
@@ -117,13 +117,13 @@
background-position: 16px 32px;
}
.ticker-controls li.jnt-next.down {
- background-position: 16px 0px;
+ background-position: 16px 0;
}
.js-hidden {
display: none;
}
.no-js-news {
- padding: 10px 0px 0px 45px;
+ padding: 10px 0 0 45px;
color: #F8F0DB;
}
.left .ticker-swipe {
@@ -143,4 +143,4 @@
}
.right .ticker-controls {
padding-right: 6px;
-}
\ No newline at end of file
+}