Ticker

We have included a fun content "ticker" that fades in and out to show blocks of text. This ticker block uses an unordered list <ul> that is styled with a bit of css. When editing the page in Design View, the content will appear expanded for easy editing.

Ticker

We typically use it on the template's About Us page. In older templates it may be included on the home page and for testimonials on other inside pages. The "look" of the ticker block is all CSS and can be edited in the default.css file.

Hint: Because we want the ticker to be a consistent height regardless of the amount of content, there is a min-height attribute. Depending on the amount of content you place in each section, you may need to increase or decrease this minimum height.

CSS
  1. #ticker .content {padding: 25px 35px; text-align: left; min-height: 300px;}
html
  1. <ul id="ticker">
  2. <li>
  3. <section class="content">
  4. <h6>Topic Title:</h6>
  5. <p class="newsAuthor">Author Name</p>
  6. <p>Since 1998 we've been focusing on the one thing we do best.</p>
  7. <p>We make templates that work for you. They are easy to use, flexible, and are designed with clean coding,
  8. HTML5, some great CSS3, and are cross-browser tested.</p>
  9. </section>
  10. </li>
  11. ...more list items...
  12. </ul>

You can adjust the speed by editing the ticker.js file located in the javascripts folder on the main.js in newer templates and on the ticker.js on older ones.

javascript
  1. // TICKER www.alexefish.com
  2. (function($) {
  3. $.fn.list_ticker = function(options) {
  4. var defaults = {
  5. speed: 8000,
  6. effect: 'slide'
  7. };
  8. var options = $.extend(defaults, options);
  9. return this.each(function() {
  10. var obj = $(this);
  11. var list = obj.children();
  12. list.not(':first').hide();
  13. setInterval(function() {
  14. list = obj.children();
  15. list.not(':first').hide();
  16. var first_li = list.eq(0)
  17. var second_li = list.eq(1)
  18. if (options.effect == 'slide') {
  19. first_li.slideUp();
  20. second_li.slideDown(function() {
  21. first_li.remove().appendTo(obj);
  22. });
  23. } else if (options.effect == 'fade') {
  24. first_li.fadeOut(function() {
  25. second_li.fadeIn();
  26. first_li.remove().appendTo(obj);
  27. });
  28. }
  29. }, options.speed)
  30. });
  31. };
  32. // Edit speed below. Effect can be slide or fade.
  33. })(jQuery);
  34. $(function() {
  35. $('#ticker').list_ticker({
  36. speed: 8000,
  37. effect: 'fade'
  38. })
  39. });