Posted By

flashpro on 11/17/08


Tagged

javascript yui ticker newsticker


Versions (?)

Who likes this?

3 people have marked this snippet as a favorite

ginoplusio
flashpro
inkdeep


YUI newsticker


 / Published in: JavaScript
 

URL: http://www.lutsr.nl/yui/newsticker/

class "newsTicker" is required

span is optional

  1. HTML:
  2. <div class="newsTicker">
  3. <ul>
  4. <li>
  5. <span>14-11-2008</span> <a href="#">Student Informatica wint eerste prijs waterschapsdebat</a>
  6. </li>
  7.  
  8. <li>
  9. <span>14-11-2008</span> <a href="#">Basisschoolleerlingen bewust van respect</a>
  10. </li>
  11.  
  12. <li>
  13. <span>14-11-2008</span> <a href="#">Tijdgebrek groot probleem voor studenten met functiebeperking</a>
  14. </li>
  15.  
  16. <li>
  17. <span>14-11-2008</span> <a href="#">Regisseur Matanic wint Stenden Media Student Award</a>
  18. </li>
  19.  
  20. <li>
  21. <span>14-11-2008</span> <a href="#">Stenden-studenten onderweg naar Dakar voor KiKa</a>
  22. </li>
  23. </ul>
  24. </div>
  25.  
  26. CSS:
  27. div.newsTicker {
  28. position: relative;
  29. width: 400px;
  30. overflow: hidden;
  31. }
  32. div.newsTicker ul li {
  33. white-space: nowrap;
  34. float: left;
  35. padding-right: 30px; /* don't change to margin = margin between news items */
  36. }
  37.  
  38.  
  39. JAVASCRIPT:
  40. var Dom = YAHOO.util.Dom;
  41. var Event = YAHOO.util.Event;
  42.  
  43. YAHOO.namespace("snippet");
  44. YAHOO.snippet.ticker = {
  45. init : function(className){
  46. this.speed = 150;
  47. // get all ticker element from a page
  48. this.tickerEl = Dom.getElementsByClassName(className);
  49. for(var i=0; i<this.tickerEl.length; i++) {
  50. this.buildTicker(this.tickerEl[i]);
  51. }
  52. },
  53. buildTicker : function(tickerEl) {
  54. // get all newsitems from a ticker element
  55. this.tickerItem = tickerEl.getElementsByTagName("li");
  56. this.tickerItemContainer = tickerEl.getElementsByTagName("ul");
  57.  
  58. // get width of all list items and set the container to this width
  59. this.containerWidth = 0;
  60. for(var i=0; i<this.tickerItem.length; i++) {
  61. this.containerWidth += Dom.getRegion(this.tickerItem[i]).right - Dom.getRegion(this.tickerItem[i]).left;
  62. }
  63. Dom.setStyle(this.tickerItemContainer[0],"width",this.containerWidth + "px");
  64.  
  65. // set position of container to the left of the containing box
  66. Dom.setStyle(this.tickerItemContainer[0],"left", (Dom.getRegion(tickerEl).right - Dom.getRegion(tickerEl).left) + "px");
  67. this.yPos = Dom.getRegion(this.tickerItemContainer[0]).top;
  68.  
  69. // set listener for mouseover
  70. Event.addListener(this.tickerItemContainer[0],"mouseover",this.pauseAnim,this);
  71.  
  72. // set listener for mouseout
  73. Event.addListener(this.tickerItemContainer[0],"mouseout",this.restartAnim,this);
  74.  
  75. // start animation
  76. this.startAnim(tickerEl);
  77. },
  78. startAnim : function(tickerEl) {
  79. this.startPos = Dom.getStyle(this.tickerItemContainer[0],"left");
  80. this.startPos = this.startPos.split("px")[0];
  81. this.endPos = Dom.getRegion(tickerEl).left - this.containerWidth;
  82.  
  83. this.attributes = {
  84. points: { to: [this.endPos,this.yPos] }
  85. };
  86.  
  87. this.anim = new YAHOO.util.Motion(this.tickerItemContainer[0], this.attributes);
  88. this.currentWidth = this.containerWidth + parseFloat(this.startPos);
  89. this.anim.duration = this.currentWidth/this.speed;
  90. this.anim.useSeconds = true;
  91. this.anim.onComplete.subscribe(this.endAnim,this);
  92. this.anim.animate();
  93. },
  94. pauseAnim : function(e,obj) {
  95. obj.anim.stop();
  96. },
  97. restartAnim : function(e,obj) {
  98. obj.currentWidth = obj.containerWidth + Dom.getRegion(obj.tickerItemContainer[0]).left;
  99. obj.anim.duration = obj.currentWidth/obj.speed;
  100. obj.anim.animate();
  101. },
  102. endAnim : function(state,dur,obj) {
  103. if(Dom.getRegion(obj.tickerItemContainer[0]).left <= obj.endPos) {
  104. YAHOO.snippet.ticker.init("newsTicker");
  105. };
  106. }
  107. }
  108.  
  109. initPage = function() {
  110. YAHOO.snippet.ticker.init("newsTicker");
  111. }
  112.  
  113. Event.on(window,"load",initPage);

Report this snippet  

You need to login to post a comment.