Browse files

multiple tickers per page possible, reduced HTML needed, bug fix for …

…title length
  • Loading branch information...
1 parent 651cb16 commit 645242c1f93aa4cf634d3c0981b2a9fefd4b97fc @rhodimus committed Nov 13, 2011
Showing with 120 additions and 107 deletions.
  1. +58 −33 includes/jquery.ticker.js
  2. +1 −1 includes/site.js
  3. +26 −38 index.html
  4. +3 −3 styles/style.css
  5. +32 −32 styles/ticker-style.css
View
91 includes/jquery.ticker.js
@@ -17,6 +17,17 @@
// 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');
@@ -25,6 +36,9 @@
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,
@@ -35,17 +49,17 @@
paused: false,
contentLoaded: false,
dom: {
- contentID: '#ticker-content',
- titleID: '#ticker-title',
- titleElem: '#ticker-title SPAN',
- tickerID : '#ticker',
- wrapperID: '#ticker-wrapper',
- revealID: '#ticker-swipe',
- revealElem: '#ticker-swipe SPAN',
- controlsID: '#ticker-controls',
- prevID: '#prev',
- nextID: '#next',
- playPauseID: '#play-pause'
+ 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: '#ticker-swipe-' + uniqID + ' SPAN',
+ controlsID: '#ticker-controls-' + uniqID,
+ prevID: '#prev-' + uniqID,
+ nextID: '#next-' + uniqID,
+ playPauseID: '#play-pause-' + uniqID
}
};
@@ -69,6 +83,11 @@
return size;
};
+ function getUniqID() {
+ var newDate = new Date;
+ return newDate.getTime();
+ }
+
/* Function for handling debug and error messages */
function debugError(obj) {
if (opts.debugMode) {
@@ -79,13 +98,21 @@
alert(obj);
}
}
- }
+ }
/* Function to setup the page */
function initialisePage() {
+ // process the content for this ticker
+ processContent();
+
// add our HTML structure for the ticker to the DOM
- $(settings.dom.wrapperID).append('<div id="' + settings.dom.tickerID.replace('#', '') + '"><div id="' + settings.dom.titleID.replace('#', '') + '"><span><!-- --></span></div><p id="' + settings.dom.contentID.replace('#', '') + '"></p><div id="' + settings.dom.revealID.replace('#', '') + '"><span><!-- --></span></div></div>');
- $(settings.dom.wrapperID).removeClass('no-js').addClass('has-js ' + opts.direction);
+ $(newsID).wrap('<div id="' + settings.dom.wrapperID.replace('#', '') + '"></div>');
+
+ // remove any current content inside this ticker
+ $(settings.dom.wrapperID).children().remove();
+
+ $(settings.dom.wrapperID).append('<div id="' + settings.dom.tickerID.replace('#', '') + '" class="ticker"><div id="' + settings.dom.titleID.replace('#', '') + '" class="ticker-title"><span><!-- --></span></div><p id="' + settings.dom.contentID.replace('#', '') + '" class="ticker-content"></p><div id="' + settings.dom.revealID.replace('#', '') + '" class="ticker-swipe"><span><!-- --></span></div></div>');
+ $(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
@@ -99,13 +126,13 @@
// show previous item
settings.paused = true;
$(settings.dom.playPauseID).addClass('paused');
- manualChangeContent(button);
+ manualChangeContent('prev');
break;
case settings.dom.nextID.replace('#', ''):
// show next item
settings.paused = true;
$(settings.dom.playPauseID).addClass('paused');
- manualChangeContent(button);
+ manualChangeContent('next');
break;
case settings.dom.playPauseID.replace('#', ''):
// play or pause the ticker
@@ -136,22 +163,21 @@
}
});
// add controls HTML to DOM
- $(settings.dom.wrapperID).append('<ul id="' + settings.dom.controlsID.replace('#', '') + '"><li id="' + settings.dom.playPauseID.replace('#', '') + '" class="controls"></li><li id="' + settings.dom.prevID.replace('#', '') + '" class="controls"></li><li id="' + settings.dom.nextID.replace('#', '') + '" class="controls"></li></ul>');
+ $(settings.dom.wrapperID).append('<ul id="' + settings.dom.controlsID.replace('#', '') + '" class="ticker-controls"><li id="' + settings.dom.playPauseID.replace('#', '') + '" class="jnt-play-pause controls"><a href=""><!-- --></a></li><li id="' + settings.dom.prevID.replace('#', '') + '" class="jnt-prev controls"><a href=""><!-- --></a></li><li id="' + settings.dom.nextID.replace('#', '') + '" class="jnt-next controls"><a href=""><!-- --></a></li></ul>');
}
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();
- }
- });
+ // add mouse over on the content
+ $(settings.dom.contentID).mouseover(function () {
+ if (settings.paused == false) {
+ pauseTicker();
+ }
+ }).mouseout(function () {
+ if (settings.paused == false) {
+ restartTicker();
+ }
+ });
}
- // process the content for this ticker
- processContent();
+ setupContentAndTriggerDisplay();
}
/* Start to process the content for this ticker */
@@ -203,7 +229,6 @@
debugError('Couldn\'t find any content from the XML feed for the ticker to use!');
return false;
}
- setupContentAndTriggerDisplay();
settings.contentLoaded = true;
}
});
@@ -218,7 +243,6 @@
// maybe this could be one whole object and not an array of objects?
settings.newsArr['item-' + i] = { type: opts.titleText, content: $(this).html()};
});
- setupContentAndTriggerDisplay();
}
else {
debugError('Couldn\'t find HTML any content for the ticker to use!');
@@ -261,8 +285,9 @@
function revealContent() {
$(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.titleElem).width() + 20;
+ // get the width of the title element to offset the content and reveal
+ var offset = $(settings.dom.titleID).width() + 20;
+
$(settings.dom.revealID).css(opts.direction, offset + 'px');
// show the reveal element and start the animation
if (opts.displayType == 'fade') {
View
2 includes/site.js
@@ -1,7 +1,7 @@
$(function () {
// start the ticker
$('#js-news').ticker();
-
+
// hide the release history when the page loads
$('#release-wrapper').css('margin-top', '-' + ($('#release-wrapper').height() + 20) + 'px');
View
64 index.html
@@ -12,27 +12,28 @@
</head>
<body>
<h1>jQuery News Ticker</h1>
- <div id="ticker-wrapper" class="no-js">
- <ul id="js-news" class="js-hidden">
- <li class="news-item">jQuery News Ticker now has support for right-to-left languages!</li>
+ <ul id="js-news" class="js-hidden">
+ <li class="news-item">jQuery News Ticker now has support for multiple tickers per page!</li>
+ <li class="news-item">jQuery News Ticker now has support for right-to-left languages!</li>
+ <li class="news-item">jQuery News Ticker now has support for loading content via an RSS feed!</li>
+ <li class="news-item">jQuery News Ticker now has an optional fade effect between items!</li>
+ <li class="news-item">New updates have been made to jQuery News Ticker! Check below for more details!</li>
+ <li class="news-item">jQuery News Ticker is now compatible with jQuery 1.3.2! See below for further details and for latest download.</li>
+ <li class="news-item">Further updates to jQuery News Ticker are coming soon!</li>
+ </ul>
+
+ <noscript>
+ <h2>Latest News</h2>
+ <ul id="no-js-news">
+ <li class="news-item">jQuery News Ticker now has support for multiple tickers per page!</li>
+ <li class="news-item">jQuery News Ticker now has support right-to-left languages!</li>
<li class="news-item">jQuery News Ticker now has support for loading content via an RSS feed!</li>
<li class="news-item">jQuery News Ticker now has an optional fade effect between items!</li>
<li class="news-item">New updates have been made to jQuery News Ticker! Check below for more details!</li>
<li class="news-item">jQuery News Ticker is now compatible with jQuery 1.3.2! See below for further details and for latest download.</li>
- <li class="news-item">Further updates to jQuery News Ticker are coming soon!</li>
+ <li class="news-item">Further updates to jQuery News Ticker are coming soon, come back soon for more details.</li>
</ul>
- <noscript>
- <h2>Latest News</h2>
- <ul id="no-js-news">
- <li class="news-item">jQuery News Ticker now has support right-to-left languages!</li>
- <li class="news-item">jQuery News Ticker now has support for loading content via an RSS feed!</li>
- <li class="news-item">jQuery News Ticker now has an optional fade effect between items!</li>
- <li class="news-item">New updates have been made to jQuery News Ticker! Check below for more details!</li>
- <li class="news-item">jQuery News Ticker is now compatible with jQuery 1.3.2! See below for further details and for latest download.</li>
- <li class="news-item">Further updates to jQuery News Ticker are coming soon, come back soon for more details.</li>
- </ul>
- </noscript>
- </div>
+ </noscript>
<div id="content">
@@ -58,10 +59,11 @@ <h2 class="divider-top">So how do I use this thing?!</h2>
</a>
</div>
- <p>The latest version of jQuery News Ticker is v1.7 which was released on 14th May 2011 <a href="#release-history">(view release history)</a>.</p>
+ <p>The latest version of jQuery News Ticker is v1.8 which was released on 13th November 2011 <a href="#release-history">(view release history)</a>.</p>
<div id="release-history">
<div id="release-wrapper">
+ <p><strong>v1.8</strong> - 2011-11-13 - Reduced amount of HTML needed, multiple tickers now possible, title positioning bug fixed</p>
<p><strong>v1.7</strong> - 2011-05-14 - Support for jQuery 1.6+</p>
<p><strong>v1.6</strong> - 2011-04-25 - Support for right-to-left languages, orders lists and a few bug fixes</p>
<p><strong>v1.5</strong> - 2011-02-23 - Various bug fixes</p>
@@ -95,14 +97,12 @@ <h3 class="divider-top">Don't I need some HTML to make this news ticker work?</h
<p>Yes you do, all you need is the following HTML:</p>
- <pre><code>&lt;div <span class="grey">id</span>=<span class="red">&quot;ticker-wrapper&quot;</span> <span class="grey">class</span>=<span class="red">&quot;no-js&quot;</span>&gt;
- &lt;ul <span class="grey">id</span>=<span class="red">&quot;js-news&quot;</span> <span class="grey">class</span>=<span class="red">&quot;js-hidden&quot;</span>&gt;
- &lt;li <span class="grey">class</span>=<span class="red">&quot;news-item&quot;</span>&gt;&lt;a <span class="grey">href</span>=<span class="red">&quot;#&quot;</span>&gt;<span class="grey">This is the 1st latest news item.</span>&lt;/a&gt;&lt;/li&gt;
- &lt;li <span class="grey">class</span>=<span class="red">&quot;news-item&quot;</span>&gt;&lt;a <span class="grey">href</span>=<span class="red">&quot;#&quot;</span>&gt;<span class="grey">This is the 2nd latest news item.</span>&lt;/a&gt;&lt;/li&gt;
- &lt;li <span class="grey">class</span>=<span class="red">&quot;news-item&quot;</span>&gt;&lt;a <span class="grey">href</span>=<span class="red">&quot;#&quot;</span>&gt;<span class="grey">This is the 3rd latest news item.</span>&lt;/a&gt;&lt;/li&gt;
- &lt;li <span class="grey">class</span>=<span class="red">&quot;news-item&quot;</span>&gt;&lt;a <span class="grey">href</span>=<span class="red">&quot;#&quot;</span>&gt;<span class="grey">This is the 4th latest news item.</span>&lt;/a&gt;&lt;/li&gt;
- &lt;/ul&gt;
-&lt;/div&gt;</code></pre>
+ <pre><code>&lt;ul <span class="grey">id</span>=<span class="red">&quot;js-news&quot;</span> <span class="grey">class</span>=<span class="red">&quot;js-hidden&quot;</span>&gt;
+ &lt;li <span class="grey">class</span>=<span class="red">&quot;news-item&quot;</span>&gt;&lt;a <span class="grey">href</span>=<span class="red">&quot;#&quot;</span>&gt;<span class="grey">This is the 1st latest news item.</span>&lt;/a&gt;&lt;/li&gt;
+ &lt;li <span class="grey">class</span>=<span class="red">&quot;news-item&quot;</span>&gt;&lt;a <span class="grey">href</span>=<span class="red">&quot;#&quot;</span>&gt;<span class="grey">This is the 2nd latest news item.</span>&lt;/a&gt;&lt;/li&gt;
+ &lt;li <span class="grey">class</span>=<span class="red">&quot;news-item&quot;</span>&gt;&lt;a <span class="grey">href</span>=<span class="red">&quot;#&quot;</span>&gt;<span class="grey">This is the 3rd latest news item.</span>&lt;/a&gt;&lt;/li&gt;
+ &lt;li <span class="grey">class</span>=<span class="red">&quot;news-item&quot;</span>&gt;&lt;a <span class="grey">href</span>=<span class="red">&quot;#&quot;</span>&gt;<span class="grey">This is the 4th latest news item.</span>&lt;/a&gt;&lt;/li&gt;
+&lt;/ul&gt;</code></pre>
<p>jQuery News Ticker will also work fine with an &lt;ol&gt; element to contain the news items.</p>
@@ -202,7 +202,7 @@ <h3 class="divider-top">What license is this released under?</h3>
<h2 class="divider-top">What about loading content from a feed?!</h2>
- <div class="content-box">
+ <div class="content-box divider-bottom">
<p><del>Yeah, well the population of news items will be from HTML only for now I'm afraid...</del></p>
@@ -231,18 +231,6 @@ <h2 class="divider-top">What about loading content from a feed?!</h2>
</div>
- <h2>I'll be back for that! Is there anything else coming?</h2>
-
- <div class="content-box divider-bottom">
-
- <p>I'd like to make some improvements to the CSS for the ticker and support for JSONP requests (think Twitter feed).</p>
-
- <p>Simplifying the markup required to get the ticker to work, plus support for random news item display and on-the-fly content reloading are also on the todo list.</p>
-
- <p>And hopefully some more flexibility in options for the plugin and support for multiple tickers on one page.</p>
-
- </div>
-
<h2 class="divider-top">Hey, this is really great work - how can I thank you?</h2>
<div class="content-box divider-bottom">
View
6 styles/style.css
@@ -183,9 +183,9 @@ div#content {
display: block;
width: 216px;
height: 96px;
- -webkit-box-shadow: 5px 5px 15px ;
- -moz-box-shadow: 5px 5px 15px ;
- box-shadow: 5px 5px 15px ;
+ -webkit-box-shadow: 5px 5px 15px black;
+ -moz-box-shadow: 5px 5px 15px black;
+ box-shadow: 5px 5px 15px black;
}
#download a {
font-family: 'LeagueGothicRegular', arial, san-serif;
View
64 styles/ticker-style.css
@@ -1,5 +1,5 @@
/* Ticker Styling */
-#ticker-wrapper.has-js {
+.ticker-wrapper.has-js {
margin: 20px 0px 20px 0px;
padding: 0px 20px;
width: 780px;
@@ -11,22 +11,22 @@
background-color: #f8f0db;
font-size: 0.75em;
}
-#ticker {
+.ticker {
width: 710px;
height: 23px;
display: block;
position: relative;
overflow: hidden;
background-color: #f8f0db;
}
-#ticker-title {
+.ticker-title {
padding-top: 9px;
color: #990000;
font-weight: bold;
background-color: #f8f0db;
text-transform: uppercase;
}
-#ticker-content {
+.ticker-content {
margin: 0px;
padding-top: 9px;
position: absolute;
@@ -37,18 +37,18 @@
white-space: nowrap;
line-height: 1.2em;
}
-#ticker-content:focus {
+.ticker-content:focus {
none;
}
-#ticker-content a {
+.ticker-content a {
text-decoration: none;
color: #1F527B;
}
-#ticker-content a:hover {
+.ticker-content a:hover {
text-decoration: underline;
color: #0D3059;
}
-#ticker-swipe {
+.ticker-swipe {
padding-top: 9px;
position: absolute;
top: 0px;
@@ -57,20 +57,20 @@
width: 800px;
height: 23px;
}
-#ticker-swipe span {
+.ticker-swipe span {
margin-left: 1px;
background-color: #f8f0db;
border-bottom: 1px solid #1F527B;
height: 12px;
width: 7px;
display: block;
}
-#ticker-controls {
+.ticker-controls {
padding: 8px 0px 0px 0px;
list-style-type: none;
float: left;
}
-#ticker-controls li {
+.ticker-controls li {
padding: 0px;
margin-left: 5px;
float: left;
@@ -79,68 +79,68 @@
width: 16px;
display: block;
}
-#ticker-controls li#play-pause {
+.ticker-controls li.jnt-play-pause {
background-image: url('../images/controls.png');
background-position: 32px 16px;
}
-#ticker-controls li#play-pause.over {
+.ticker-controls li.jnt-play-pause.over {
background-position: 32px 32px;
}
-#ticker-controls li#play-pause.down {
+.ticker-controls li.jnt-play-pause.down {
background-position: 32px 0px;
}
-#ticker-controls li#play-pause.paused {
+.ticker-controls li.jnt-play-pause.paused {
background-image: url('../images/controls.png');
background-position: 48px 16px;
}
-#ticker-controls li#play-pause.paused.over {
+.ticker-controls li.jnt-play-pause.paused.over {
background-position: 48px 32px;
}
-#ticker-controls li#play-pause.paused.down {
+.ticker-controls li.jnt-play-pause.paused.down {
background-position: 48px 0px;
}
-#ticker-controls li#prev {
+.ticker-controls li.jnt-prev {
background-image: url('../images/controls.png');
background-position: 0px 16px;
}
-#ticker-controls li#prev.over {
+.ticker-controls li.jnt-prev.over {
background-position: 0px 32px;
}
-#ticker-controls li#prev.down {
+.ticker-controls li.jnt-prev.down {
background-position: 0px 0px;
}
-#ticker-controls li#next {
+.ticker-controls li.jnt-next {
background-image: url('../images/controls.png');
background-position: 16px 16px;
}
-#ticker-controls li#next.over {
+.ticker-controls li.jnt-next.over {
background-position: 16px 32px;
}
-#ticker-controls li#next.down {
+.ticker-controls li.jnt-next.down {
background-position: 16px 0px;
}
.js-hidden {
display: none;
}
-#no-js-news {
+.no-js-news {
padding: 10px 0px 0px 45px;
color: #F8F0DB;
}
-.left #ticker-swipe {
- left: 80px;
+.left .ticker-swipe {
+ /*left: 80px;*/
}
-.left #ticker-controls, .left #ticker-content, .left #ticker-title, .left #ticker {
+.left .ticker-controls, .left .ticker-content, .left .ticker-title, .left .ticker {
float: left;
}
-.left #ticker-controls {
+.left .ticker-controls {
padding-left: 6px;
}
-.right #ticker-swipe {
- right: 80px;
+.right .ticker-swipe {
+ /*right: 80px;*/
}
-.right #ticker-controls, .right #ticker-content, .right #ticker-title, .right #ticker {
+.right .ticker-controls, .right .ticker-content, .right .ticker-title, .right .ticker {
float: right;
}
-.right #ticker-controls {
+.right .ticker-controls {
padding-right: 6px;
}

0 comments on commit 645242c

Please sign in to comment.